HTML5 新增的結構元素——能用不代表用對了

      我們需要讓標簽語義化，清晰的結構，更好的 seo，利於特殊終端的閱讀(無障礙)，此時 html5 標簽的作用就很明顯了，並不是說能用就好。於是復習下內容並記錄在博客上，順便分享給大家，也方便自己以後查找。

發送時要保守，接受時要開放！

HTML5 新增結構元素分為主體結構元素和非主體結構元素

• 主體結構元素： article、section、nav、aside、time
• 非主體結構元素：header、hgroup、footer、address

一、主體結構元素

article

article 標簽，從語義化上看為文檔、頁面，其用法如下：

• 通常是一篇文章、一個頁面、一個獨立完整的內容模塊
• 一般會帶個標題，並放在 header 標簽中
• article 元素可以互相嵌套

使用頻率極高，強調獨立性，多註意下與 header 標簽的使用。

<article>
    <header>
        <h1>是我標簽</h1>
    </header>
    <p>我是段落</p>
    <article>
        <div>我的內容</div>
    </article>
</article>

section

section 標簽，從語義化上看為部分，其用法如下：

• 用於頁面內容的獨立分塊，往往是文章的一段
• 通常由內容和標題組成，沒有標題的內容不推薦使用 section

使用頻率低，強調分段分塊。

註：《HTML5與CSS3權威指南》這本書中說明：一個容器需要被定義樣式或者腳本定義行為時，推薦用div而非section，不要將section用作設置樣式的容器。

<section>
    <h1>水果</h1> 
    <article> 
        <h2>蘋果</h2>
        <div>蘋果是撒？</div> 
    </article> 
     <article> 
        <h2>桔子</h2>
        <div>桔子是撒？</div> 
    </article> 
</section>
<!-- article可以看成是一種特殊種類的section元素,它比section更強調獨立性 -->
<article>
    <h1>中國人物</h1>
    <p>三國、兩晉、南北朝</p>
    <section>
        <h2>三國</h3>
        <p>猛將猛將猛將猛將</p>
    </section>
    <section>
        <h2>兩晉</h3>
        <p>猛將猛將猛將猛將</p>
    </section>
</article>

nav

nav 標簽，從語義化上看為導航，其用法如下：

• 通常作為頁面導航的鏈接組
• 側邊欄導航

使用頻率高。

<nav>
    <ul>
        <li><a href=http://www.ithao123.cn/"">菜單1
        
菜單2
        
菜單3
    

aside

aside 標簽，從語義化上看為在旁邊、側邊，其用法如下：

• 在 article 標簽中使用時，作為主要內容的附屬信息部分，如有關的參考資料、名詞解釋等。
• 在 article 標簽外使用時，作為頁面或者站點全局的附屬信息部分，如側邊欄、博客的友情鏈接部分、廣告區域等。

使用頻率低。

<!-- 在article標簽外使用時 -->
<article>
    <h1>馬雲是誰</h1>
    <p>馬雲，男，1964年10月15日出生於浙江省杭州市，中國著名企業家，阿裏巴巴集團、淘寶網、支付寶創始人..........</p>
    <aside>
        <h1>參考資料</h1>
        <p>百度網、維基百科...</p>
    </aside>
</article>

<!-- 在article標簽內使用時 -->
<aside>
    <nav>
        <ul>
            <li><a href=http://www.ithao123.cn/"">老趙的博客
            
鬼哥的博客
            
彪叔的博客
        
    

time

time 標簽，從語義化上看為時間，其用法如下：

• 代表 24 小時中的某個時刻或某個日期
• 表示時刻時允許帶時間差
• 可定義很多格式的日期和時間

使用頻率低。

<time datetime="2013-3-6">2014年3月6日</time>
<!-- datetime 屬性中日期與時間之間要用"T" 分隔，"T'表示時間 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<!-- 時間加上"Z"表示給機器編碼時使用 UTC 標準時間 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>

二、非主體結構元素

header

header 標簽，從語義化上看為文檔的頁眉，其用法如下：

• 一種具有引導和導航作用的結構元素
• 通常放置在整個頁面或者頁面內的一個內容區塊的標題
• 一個網頁內並沒有限制 header 標簽的個數

使用頻率極高，比較容易理解。

<header>
    <h1>我是大頭</h1>
</header>
<article>
    <header>
        <h1>我是脖子</h1>
    </header>
    <p>我是身體</p>
</article>

hgroup

hgroup 標簽，從語義化上看為標題組，其用法如下：

• 作為 header 標簽的子元素
• 一個內容模塊中包括了主標題和至少一個子標題才使用 hgroup
• 通常會將 h1~h6 元素進行分組

使用頻率高。

<article>
    <header>
        <hgrounp>
            <h1>我是劉備</h1>
            <h2>我是關羽</h2>
            <h3>我是張飛</h3>
        </hgrounp>
    </header>
    <p>呂布驚呆了</p>
</article>

footer

footer 標簽，從語義化上看為文檔的腳註，其用法如下：

• 一個內容塊區的腳註
• 通常內容為聯系信息、相關閱讀、版權信息等

使用頻率高，比較容易理解。

<article>
    <p>呂布驚呆了</p>
    <footer>
        <ul>
            <li>關於三國</li>
            <li>地圖信息</li>
            <li>遊戲攻略</li>
        </ul>
    </footer>
</article>

address

address 標簽，從語義化上看為地址，其用法如下：

• 用於文檔中呈現的聯系信息
• 通常內容為作者、網站鏈接、電子郵箱、地址、電話號碼等

使用頻率低。

<address>
    <a href=http://www.ithao123.cn/"">作者：張三豐
    地址：武當山
    聯系方式：1247

 感謝webapp群的獵巫同學提醒，這個屬性其實HTML 4.01就已經有了，這裏修正下。

文章來源：