HTML5學習之語義化標籤（一）

1、爲何HTML5要引入新語義標籤

在HTML5出現以前，咱們通常採用DIV+CSS佈局咱們的頁面。可是這樣的佈局方式不只使咱們的文檔結構不夠清晰，並且不利於搜索引擎爬蟲對咱們頁面的爬取。爲了解決上述缺點，HTML5新增了不少新的語義化標籤。

2、引入語義化標籤的優勢

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

• 比<div>標籤有更加豐富的含義，方便開發與維護

• 搜索引擎能更方便的識別頁面的每一個部分

• 方便其餘設備解析（如移動設備、盲人閱讀器等）

3、標籤詳解

所謂語義化標籤就是一種咱們僅經過標籤名就能判斷出該標籤內容的語義的標籤。下面將介紹<article>、<section>、<nav>、<aside>、<header>、<footer>等HTML5新增的語義化區塊標籤。

（一） header

一般被放置在頁面或者頁面中某個區塊元素的頂部，包含整個頁面或者區塊的標題、簡介等信息，起到引導與導航的做用。

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

下面是一個使用<header>標籤的網站頭部實例：

<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>標籤的導航欄應用案例：

<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>元素。一般狀況下，一個<article>元素包括標題、正文和腳註。和<nav>標籤同樣，該標籤一樣不能用在<address>標籤中；

示例以下：

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

<article>標籤還能夠嵌套使用，可是它們必須是部分與總體的關係。例如在一篇發表的博客中，咱們能夠對讀者評論使用<article>標籤。

示例以下：

<article>
   <h1>HTML5學習之語義化標籤</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

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

<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>Node.Js<h2>
        <p>Node.js就是運行在服務端的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領取學習資料，一塊兒學習，共同進步。