一、為什麼HTML5要引入新語義標籤

在HTML5出現之前，我們一般採用DIV+CSS佈局我們的頁面。但是這樣的佈局方式不僅使我們的文件結構不夠清晰，而且不利於搜尋引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標籤。

二、引入語義化標籤的優點

引入語義化標籤的好處主要有下列三點：

• 比<div>標籤有更加豐富的含義，方便開發與維護
• 搜尋引擎能更方便的識別頁面的每個部分
• 方便其他裝置解析（如移動裝置、盲人閱讀器等）

三、標籤詳解

所謂語義化標籤就是一種我們僅通過標籤名就能判斷出該標籤內容的語義的標籤。下面將介紹<article> <section> <nav> <aside>、<header> <footer>

（一） header

通常被放置在頁面或者頁面中某個區塊元素的頂部，包含整個頁面或者區塊的標題、簡介等資訊，起到引導與導航的作用。

我們不但可以放置頁面或者頁面中某個區塊的標題，還可以放置搜尋表單、logo圖片等元素，按照最新的W3C標準，我們還可以放置<nav>導航欄。

下面是一個使用該標籤的網站頭部例項：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**資訊科技有限公司</h1>
 

</header>

需要注意的是，一個文件中可以包含一對或者一對以上的<header>標籤。標籤的位置是次要的，不一定非要顯示在頁面的上方，我們可以為任何需要的區塊標籤新增<header>元素，例如下面將要講解的<article> <section>等標籤。

（二）nav

表示頁面的導航，可以通過導航連線到網站的其他頁面，或者當前頁面的其它部分。

<nav>不但可以作為頁面獨立的導航區域存在，我們還可以在<header>標籤中使用。此外，<nav>標籤還可以顯示在側邊欄中。由此可見，一個頁面之中可以有多個<nav>

根據HTML5標準，<nav>標籤只用於頁面的主要導航部分。因為搜尋引擎或者螢幕閱讀器會根據<nav>標籤來確定網站的主體內容，所以並不是任意一組超連結都適合放置在<nav>標籤中,我們只要將主要的，基本的連結組放進<nav>即可,對於有輔助性的頁尾連結則不推薦使用<nav>標籤。

示例如下：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**資訊科技有限公司</h1>
    <nav>
        <li><a href="#">首頁</a></li>
        <li><a href="example.html">客戶案例</a></li>
        <li><a href="service_one.html">技術服務</a></li>          
        <li><a href="aboutus_one.html">關於我們</a></li>
        <li><a href="connection.html">聯絡我們</a></li>
    </nav>
</header>

值得我們注意的是,HTML5規範不允許將<nav>標籤巢狀在<address>標籤中使用。

（三）aside

所包含的內容不是頁面的主要內容、具有獨立性，是對頁面的補充。

<aside>標籤一般使用在頁面、文章的側邊欄、廣告、友情連結等區域。

示例如下：

 <article>
    <h1>HTML5學習之語義化標籤</h1>
    <p>....正文.....</p>
    <aside>
        <h2>什麼是語義化標籤</h2>
        <p>語義化標籤就是......</p>
    </aside>
</article>

（四）footer

一般被放置在頁面或者頁面中某個區塊的底部，包含版權資訊、聯絡方式等資訊。

跟<header>標籤一樣，<footer>標籤的使用個數沒有限制，可以在任意需要的區塊底部使用。

示例如下：

<footer>
    <small>
        版權所有 © 2016-2017 **資訊科技有限公司
    </small>
</footer>

（五）article

表示包含於一個文件、頁面、應用程式或網站中的一段獨立的內容，可以被獨立的釋出或者重新使用文章標記標籤。

<article>標籤應該使用在相對比較獨立、完整的的內容區塊，所以我們可以在一篇部落格、一個論壇帖子、一篇新聞報道或者一個使用者評論中使用它。通常情況下，一個<article>元素包括標題、正文和腳註。和<nav>標籤一樣，該標籤同樣不能用在<address>標籤中；

示例如下：

<article>
    <h1>HTML5學習之語義化標籤</h1>
    <p>....正文.....</p>
    <footer>版權所有*偽版必究</footer>
</article>

<article>標籤還可以巢狀使用，但是它們必須是部分與整體的關係。例如在一篇發表的部落格中，我們可以對讀者評論使用該標籤。

示例如下：

<article>
    <h1>HTML5學習之語義化標籤</h1>
    <p>....正文.....</p>
    <article>
        <header>
            <h2>讀者評論</h2>
        </header>  
        <article>
            <header>
                <h3>評論人：張三</h3>
                <p>評論時間：<time datetime="2017-02-15">2017-02-15 11:45:23</time></p>
            </header>
            <p>張三到此一遊</p>
        </article>     
        <article>
            <header>
                <h3>評論人：李四</h3>
                <p>評論時間：<time datetime="2017-02-09">2017-02-09 14:20:15</time></p>
            </header>
            <p>李四到此一遊</p>
        </article>  
     </article>  
</article>

（六）section

是一個主題性的內容分組，通常用於對頁面進行分塊或者對文章等進行分段

<section>標籤所包裹的是有一組相似的主題的內容，可以用這個標籤來實現文章的章節、標籤式對話方塊中的各種標籤頁等類似的功能。

<section>通常包含一個頭部<header>、可能還會包含一個尾部<footer>。

示例如下：

<article>
    <h1>JavaScript框架</h1>
    <p>Javascript框架是指以Javascript語言為基礎搭建的程式設計框架。</p>
    <section>
        <h2>angular.Js<h2>
        <p>angular.Js是一款優秀的前端JS框架</p>
    </section>
    <section>
        <h2>Vue.js<h2>
        <p>Vue.js是用於構建互動式的Web介面的庫</p>
    </section>
    <section>
        <h2>jQuery<h2>
        <p>jQuery是一個快速、簡潔的JavaScript框架。</p>
    </section>
</article>

在這篇關於JS框架的文章中,所列舉的三個框架都是文章主題構成的一部分，所以我們使用<section>標籤對其進行分段。

我們不但可以在<article>標籤中使用<section>標籤，還可以在<section>標籤中使用<article>標籤。

示例如下：

<section>
    <h1>HTML5技術棧</h1>
    <p>廣義而言的HTML5包含HTML、CSS和JavaScript三個部分</p>
    <article>
        <h2>HTML<h2>
        <p>內容</p>
    </article>
    <article>
        <h2>CSS<h2>
        <p>樣式</p>
    </article>
    <article>
        <h2>JavaScript<h2>
        <p>行為</p>
    </article>
</section>

在這個例子中，<section>標籤代表一段內容，在這段內容中，HTML、CSS、Javascript是三個完全獨立的部分，因而我們為這三個不同的部分分別使用<article>標籤。

<div> <section> <article>三者的比較：

• <div>：應用廣泛，只要我們想為一個區域定義一個樣式或者為其新增JS行為，就可以使用div標籤
• <section>：包含的內容是一個明確的主題，通常有標題區域
• <article>:如果我們的頁面中需要一個單獨的模組來實現一個單獨的功能，就用<article>，其他的時候都用<section>。
  

最後，歡迎IT專業學生及程式設計愛好者加入QQ交流群：154658901領取學習資料，一起學習，共同進步。