HTML5學習之語義化標簽

一、為什么HTML5要引入新語義標簽

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

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

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

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

三、標簽詳解

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

（一） 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>。

四、文檔級別語義

HTML5試圖為每個元素加入一個特定的文檔級別語義。

（一）ruby、rt、rp

ruby是一種排版注釋系統，是位於橫排基礎文本上方的簡短文字，主要針對東亞語言作出簡單的讀音注釋。例如可以為中文或日文顯示讀音。

ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一個具體的表達式，然后使用rt提供說明。rt部分將顯示在表達式上方。

下面這個例子中，拼音將顯示在文字的上方。

<ruby>
    北<rt>bei</rt>
    京<rt>jing</rt>
</ruby>

但是在不支持ruby的瀏覽器中需要使用rp對這兩個區塊進行視覺上的隔離。

<ruby>
    北
    <rp>
        <rt>bei</rt>
    </rp>
    京
    <rp>
        <rt>jing</rt>
    </rp>
</ruby>

（二）time

為了將現在的常用的日期和時間語句用規范的、利於機器識別的格式進行表述，time元素提供了一個可選的時間和時區組件。

為了確保機器能夠正確識別，我們可以使用datetime屬性，其屬性值可以被定義為時間、日期或者這兩者的復合體。

<time datetime="2017-07-03">

還可以使用pubdate為一個網頁指定發布時間。

<time datetime="2017-07-03" pubdate>
<!--以下兩種形式也可以行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">

注意：在 HTML5中，true或false並非有效的屬性值，當解釋器發現存在布爾屬性時，它將直接解釋為true。如果需要將屬性設為false，將這個屬性去掉即可。

（三）mark

mark元素用於高亮標記一段文字。

可以使用mark元素來標記出網頁里被搜索的關鍵詞或是用於高亮顯示一段解釋性的代碼。

（四）wbr

wbr元素用於讓瀏覽器為長單詞增加可選擇的破折號，以便自動拆行。

在相當長的單詞中插入一對wbr元素，可以讓瀏覽器根據排版的需要決定是否將單詞換行。破折號是否出現，以及出現的位置完全由排版決定。wbr只是允許自動拆行，但非強制拆行。

（五）略微改變的元素

在HTML4版本中的標簽元素在HTML5中有了新的定義。

使用b表示文檔渲染為粗體，而i表示文檔渲染為斜體。使用strong和em來強調一段重要的文本。cite用來為對參考文獻的引用進行定義，比如書籍或雜志的標題。small不僅僅指的是小字體，它還同樣為法律聲明增添不具有重要性的旁注或小字。hr現在表達的是主體性的間斷，不再僅僅是分割版面的一條水平線。