一、為什么HTML5要引入新語義標(biāo)簽
在HTML5出現(xiàn)之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結(jié)構(gòu)不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標(biāo)簽。
二、引入語義化標(biāo)簽的優(yōu)點
引入語義化標(biāo)簽的好處主要有下列三點：
- 比<div>標(biāo)簽有更加豐富的含義，方便開發(fā)與維護(hù)
- 搜索引擎能更方便的識別頁面的每個部分
- 方便其他設(shè)備解析（如移動設(shè)備、盲人閱讀器等）
三、標(biāo)簽詳解
所謂語義化標(biāo)簽就是一種我們僅通過標(biāo)簽名就能判斷出該標(biāo)簽內(nèi)容的語義的標(biāo)簽。下面將介紹<article>、<section>、<nav>、<aside>、<header>、<footer>等HTML5新增的語義化區(qū)塊標(biāo)簽。
（一） header
通常被放置在頁面或者頁面中某個區(qū)塊元素的頂部，包含整個頁面或者區(qū)塊的標(biāo)題、簡介等信息，起到引導(dǎo)與導(dǎo)航的作用。
我們不但可以放置頁面或者頁面中某個區(qū)塊的標(biāo)題，還可以放置搜索表單、logo圖片等元素，按照最新的W3C標(biāo)準(zhǔn)，我們還可以放置<nav>導(dǎo)航欄。
下面是一個使用<header>標(biāo)簽的網(wǎng)站頭部實例：
<header>
<h1>**信息科技有限公司</h1>
</header>
需要注意的是，一個文檔中可以包含一對或者一對以上的<header>標(biāo)簽。標(biāo)簽的位置是次要的，不一定非要顯示在頁面的上方，我們可以為任何需要的區(qū)塊標(biāo)簽添加<header>元素，例如下面將要講解的<article>、<section>等標(biāo)簽。
（二）nav
表示頁面的導(dǎo)航，可以通過導(dǎo)航連接到網(wǎng)站的其他頁面，或者當(dāng)前頁面的其它部分。
<nav>不但可以作為頁面獨立的導(dǎo)航區(qū)域存在，而且我們可以在<header>標(biāo)簽中使用。此外，<nav>標(biāo)簽還可以顯示在側(cè)邊欄中。由此可見，一個頁面之中可以有多個<nav>標(biāo)簽。
根據(jù)HTML5標(biāo)準(zhǔn)，<nav>標(biāo)簽只用于頁面的主要導(dǎo)航部分。因為搜索引擎或者屏幕閱讀器會根據(jù)<nav>標(biāo)簽來確定網(wǎng)站的主體內(nèi)容，所以并不是任意一組超鏈接都適合放置在<nav>標(biāo)簽中,我們只要將主要的，基本的鏈接組放進(jìn)<nav>即可,對于有輔助性的頁腳鏈接則不推薦使用<nav>標(biāo)簽。
下面來看一個結(jié)合<header>標(biāo)簽的導(dǎo)航欄應(yīng)用案例：
<header>
<h1>**信息科技有限公司</h1>
<nav>
<li><a href="#">首頁</a></li>
<li><a href="example.html">客戶案例</a></li>
<li><a href="service_one.html">技術(shù)服務(wù)</a></li>
<li><a href="aboutus_one.html">關(guān)于我們</a></li>
<li><a href="connection.html">聯(lián)系我們</a></li>
</nav>
</header>
值得我們注意的是,HTML5規(guī)范不允許將<nav>標(biāo)簽嵌套在<address>標(biāo)簽中使用。
（三）aside
所包含的內(nèi)容不是頁面的主要內(nèi)容、具有獨立性，是對頁面的補(bǔ)充。
<aside>一般使用在頁面、文章的側(cè)邊欄、廣告、友情鏈接等區(qū)域。
示例如下：
<article>
<h1>HTML5學(xué)習(xí)之語義化標(biāo)簽</h1>
<p>....正文.....</p>
<aside>
<h2>什么是語義化標(biāo)簽</h2>
<p>語義化標(biāo)簽就是......</p>
</aside>
</article>
（四）footer
一般被放置在頁面或者頁面中某個區(qū)塊的底部，包含版權(quán)信息、聯(lián)系方式等信息。
跟<header>標(biāo)簽一樣，<footer>標(biāo)簽的使用個數(shù)沒有限制，可以在任意需要的區(qū)塊底部使用。
示例如下：
<footer>
<small>
版權(quán)所有 ? 2016-2017 **信息科技有限公司
</small>
</footer>
（五）article
表示包含于一個文檔、頁面、應(yīng)用程序或網(wǎng)站中的一段獨立的內(nèi)容，可以被獨立的發(fā)布或者重新使用文章標(biāo)記標(biāo)簽。
<article>元素應(yīng)該使用在相對比較獨立、完整的的內(nèi)容區(qū)塊，所以我們可以在一篇博客、一個論壇帖子、一篇新聞報道或者一個用戶評論中使用<article>元素。通常情況下，一個<article>元素包括標(biāo)題、正文和腳注。和<nav>標(biāo)簽一樣，該標(biāo)簽同樣不能用在<address>標(biāo)簽中；
示例如下：
<article>
<h1>HTML5學(xué)習(xí)之語義化標(biāo)簽</h1>
<p>....正文.....</p>
<footer>版權(quán)所有*偽版必究</footer>
</article>
<article>標(biāo)簽還可以嵌套使用，但是它們必須是部分與整體的關(guān)系。例如在一篇發(fā)表的博客中，我們可以對讀者評論使用<article>標(biāo)簽。
示例如下：
<article>
<h1>HTML5學(xué)習(xí)之語義化標(biāo)簽</h1>
<p>....正文.....</p>
<article>
<header>
<h2>讀者評論</h2>
</header>
<article>
<header>
<h3>評論人：張三</h3>
<p>評論時間：<time datetime="2017-01-17">2017-2-15 11:45:23</time></p>
</header>
<p>張三到此一游</p>
</article>
</article>
</article>
（六）section
是一個主題性的內(nèi)容分組，通常用于對頁面進(jìn)行分塊或者對文章等進(jìn)行分段
<section>標(biāo)簽所包裹的是有一組相似的主題的內(nèi)容，可以用這個標(biāo)簽來實現(xiàn)文章的章節(jié)、標(biāo)簽式對話框中的各種標(biāo)簽頁等類似的功能。
<section>通常包含一個頭部<header>、可能還會包含一個尾部<footer>。
示例如下：
<article>
<h1>JavaScript框架</h1>
<p>Javascript框架是指以Javascript語言為基礎(chǔ)搭建的編程框架。</p>
<section>
<h2>angular.Js<h2>
<p>angular.Js是一款優(yōu)秀的前端JS框架</p>
</section>
<section>
<h2>Vue.js<h2>
<p>Vue.js是用于構(gòu)建交互式的Web界面的庫</p>
</section>
<section>
<h2>Node.Js<h2>
<p>Node.js就是運(yùn)行在服務(wù)端的JavaScript</p>
</section>
</article>
在這篇關(guān)于JS框架的文章中,所列舉的三個框架都是文章主題構(gòu)成的一部分，所以我們使用<section>標(biāo)簽對其進(jìn)行分段。
我們不但可以在<article>標(biāo)簽中使用<section>標(biāo)簽，還可以在<section>標(biāo)簽中使用<article>標(biāo)簽。
示例如下：
<section>
<h1>HTML5技術(shù)棧</h1>
<p>廣義而言的HTML5包含HTML、CSS和JavaScript三個部分</p>
<article>
<h2>HTML<h2>
<p>內(nèi)容</p>
</article>
<article>
<h2>CSS<h2>
<p>樣式</p>
</article>
<article>
<h2>JavaScript<h2>
<p>行為</p>
</article>
</section>
在這個例子中，<section>代表一段內(nèi)容，在這段內(nèi)容中，HTML、CSS、Javascript是三個完全獨立的部分，因而我們使用<article>標(biāo)簽。
<div>、<section>、<article>三者的比較：
- <div>：應(yīng)用廣泛，只要我們想為一個區(qū)域定義一個樣式或者為其添加JS行為，就可以使用div標(biāo)簽
- <section>：包含的內(nèi)容是一個明確的主題，通常有標(biāo)題區(qū)域
- <article>:如果我們的頁面中需要一個單獨的模塊來實現(xiàn)一個單獨的功能，就用<article>，其他的時候都用<section>。
四、文檔級別語義
HTML5試圖為每個元素加入一個特定的文檔級別語義。
（一）ruby、rt、rp
ruby是一種排版注釋系統(tǒng)，是位于橫排基礎(chǔ)文本上方的簡短文字，主要針對東亞語言作出簡單的讀音注釋。例如可以為中文或日文顯示讀音。
ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一個具體的表達(dá)式，然后使用rt提供說明。rt部分將顯示在表達(dá)式上方。
下面這個例子中，拼音將顯示在文字的上方。
<ruby>
北<rt>bei</rt>
京<rt>jing</rt>
</ruby>
但是在不支持ruby的瀏覽器中需要使用rp對這兩個區(qū)塊進(jìn)行視覺上的隔離。
<ruby>
北
<rp>
<rt>bei</rt>
</rp>
京
<rp>
<rt>jing</rt>
</rp>
</ruby>
（二）time
為了將現(xiàn)在的常用的日期和時間語句用規(guī)范的、利于機(jī)器識別的格式進(jìn)行表述，time元素提供了一個可選的時間和時區(qū)組件。
為了確保機(jī)器能夠正確識別，我們可以使用datetime屬性，其屬性值可以被定義為時間、日期或者這兩者的復(fù)合體。
<time datetime="2017-07-03">
還可以使用pubdate為一個網(wǎng)頁指定發(fā)布時間。
<time datetime="2017-07-03" pubdate>
<!--以下兩種形式也可以行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">
注意：在 HTML5中，true或false并非有效的屬性值，當(dāng)解釋器發(fā)現(xiàn)存在布爾屬性時，它將直接解釋為true。如果需要將屬性設(shè)為false，將這個屬性去掉即可。
（三）mark
mark元素用于高亮標(biāo)記一段文字。
可以使用mark元素來標(biāo)記出網(wǎng)頁里被搜索的關(guān)鍵詞或是用于高亮顯示一段解釋性的代碼。
（四）wbr
wbr元素用于讓瀏覽器為長單詞增加可選擇的破折號，以便自動拆行。
在相當(dāng)長的單詞中插入一對wbr元素，可以讓瀏覽器根據(jù)排版的需要決定是否將單詞換行。破折號是否出現(xiàn)，以及出現(xiàn)的位置完全由排版決定。wbr只是允許自動拆行，但非強(qiáng)制拆行。
（五）略微改變的元素
在HTML4版本中的標(biāo)簽元素在HTML5中有了新的定義。
使用b表示文檔渲染為粗體，而i表示文檔渲染為斜體。
使用strong和em來強(qiáng)調(diào)一段重要的文本。cite用來為對參考文獻(xiàn)的引用進(jìn)行定義，比如書籍或雜志的標(biāo)題。small不僅僅指的是小字體，它還同樣為法律聲明增添不具有重要性的旁注或小字。hr現(xiàn)在表達(dá)的是主體性的間斷，不再僅僅是分割版面的一條水平線。
