回顧HTML5的語義化元素
什麽是語義化的元素
語義即是意義的意思。意思就是通過這個標簽的名字就可以知道這個標簽的含義。
比如div，p，span就不是語義化的元素，因為你不能通過這個標簽來獲悉它的含義。
而header，img等就是語義化的元素，我們知道這個標簽代表是什麽。
為什麽要推行語義化的元素
對瀏覽器：
更好的搜索引擎收錄。
增強網頁的結構性。
對用戶，工程師和維護團隊：
使用語義化無義增強了代碼的可讀性和維護性。
HTML5新增的語義化元素
1.section（節）
section常用來定義網頁中的章節，頁眉，頁腳一類的。
而且section也通常是呈現一組信息（包含了內容和標題），就像書本的中的章節一樣。
<section> <h1>章節標題</h1> <p>章節內容</p> </section>
2、article
article常用來定義獨立的內容。
<article> <h1>章節標題</h1> <p>章節內容</p> </article>
我們可以看到section和article的使用很類似，那麽怎區分它們呢。
打個比方，section就像是一本書裏面的大的章節部分，而article則是其中的小的，獨立的一個部分，比如說註釋的部分。article總是代表獨立的一個章節，和上下文沒有關聯性。還有一點，section和article是可以互相嵌套使用。置於在你的網頁中到底怎麽使用，需要自己體會。
3.nav
nav標簽是用來定義導航鏈接部分的標簽，但註意的是，這並非定義鏈接(a)標簽，也就是a標簽可以單獨使用。
nav還有一個好處就是可以很好的實現響應式設計。比如在手機瀏覽器或者小屏幕瀏覽器上，我們可以看到有些導航欄默認是省略了的。
<nav> <a href="www.badu.com">百度</a> <a href="www.google.com">谷歌</a> <a href="https://cn.bing.com/">必應</a> </nav>
4.aside
aside用來定義側邊欄。
從語義化的角度來說，aside需要和主內容相關聯。
<aside> <p>這是側邊欄</p> </aside>
5.header
用來定義文檔標題欄部分。
header可以嵌套在article和section之中，可以包含<h1>-<h6>的標題頭和其他內容，組成一個標題介紹區域。
比如我們常看見的作者信息，logo，icon等就可以放在header之中。
<header> <h1>這是一個標題區域</h1> <p>可以包含其他的內容</p> </header>
6.footer
和上面的header相對應的是footer。
footer中包含的通常是版權信息，友情鏈接等等。這個部分在很多網站都是常見的，大部分網站的最底端就是這個footer。
<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>.</p> </footer>
7.figure和figcaption
用來定義一些獨立的圖片，代碼塊，插圖和統計圖表等。
figuer把figcaption包含在內。figcaption就是對圖片或者代碼塊的說明部分。
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure>
兼容性問題
在IE8的早期版本中可能無法使用某些新增元素。
需要下載HTML5 Shiv腳本
然後在<head>部分插入下面的代碼：
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
回顧HTML5的語義化元素