html5語義化標簽使用規范

本文轉載自查看原文 2016-02-17 22:16 7293 html5/ HTML5

Html5添加了很多語義化標簽，一個典型的html5頁面結構可以如下安排

一、使用案例

1. 頭部——header和nav標簽

header頭部，body下的直接子元素header一般用於放頁面的介紹性的信息如網站名稱、logo或者導航欄nav。

    <header>
        <h1>html5語義化標簽</h1>
        <nav>
            <h1>導航</h1>
            <ul>
                <li>章節標簽</li>
                <li>標題標簽</li>
            </ul>
        </nav>
    </header>

使用html5的header和nav標簽

    <div class="header">
        <h1>html5語義化標簽</h1>
        <div class="nav">
            <h2>導航</h2>
            <ul>
                <li>章節標簽</li>
                <li>標題標簽</li>
            </ul>
        </div>
    </div>

傳統的頭部

注意到上面用了兩個h1標簽，在傳統的html4里面，h1標題一般只能用一個，用於表示頁面的大標題。但是在html5標簽里面，所有的標題標簽h1~h6都可用於不同的章節里。如上，第二個h1標簽隸屬於nav標簽，與第一個h1是不同級別的。在Chrome里面第二個h1的樣式字體小於第一個：

2. 主體部分——main和section

    <main>
        <section>
            <hgroup>
                <h2>章節標簽</h2>
                <p>為頁面區分不同的章節</p>
            </hgroup>
            <div>包括section article nav aside </div>
        </section>
        <section>
            <hgroup>
                <h2>標題標簽</h2>
                <p>為不同的章節定義標題</p>
            </hgroup> 
            <div>h1 h2 h3 h4 h5 h6六個標題標簽</div>
        </section>
    </main>

main標簽表示頁面的主體部份，section標簽給頁面區分不同的章節。section是一個章節標簽，構建頁面的大綱(outline)。除此外還有nav、artical和aside三個標簽能夠勾勒頁面的輪廓。章節標簽通常會帶上h1~h6的標題標簽。不同的章節標題是獨立的，嵌套的章節標題也跟着嵌套。另外多個標題可以用hgroup包括起來，在頁面提綱里成為獨立的一條內容。

注意上面的main標簽是后來出的標簽，所有IE瀏覽器都不支持該標簽，會把其子元素標簽變成相鄰的標簽，從而頁面錯亂。解決辦法是，IE8及以下用document.createElement("main")的辦法讓其識別，而IE9及以上設置css: main{display: block}即可。

3. 尾部——footer

    <footer>
        <p>copyright &copy hello, world</p>
    </footer>

footer和header一樣，用在不同的章節里，可以顯示該章節（如body整個頁面）相關的外鏈、版權等信息。

二、頁面的輪廓(outline)

上面已提多次提到outline和section章節，有一個在線工具HTML 5 Outliner可以抽象出頁面的提綱，上面的demo用這個工具提煉的大綱如下：

頁面的outline w3c有規定一個算法提取。

之所以要考慮大綱的問題主要有兩個好處：第一個是搜索引擎優化(SEO)，第二個是屏幕閱讀器可以快速地提取內容概要。這也是html5語義化標簽的生命力所在，也是本文討論的意義所在，同時也是和html4一個很大區別的地方。

頁面的大綱是通過上面提到的四個章節元素section、article、aside、nav和章節的根元素body區分不同的章節，而章節的大綱內容或者說標題通過h1等標題標簽定義。相反地，header/footer/div等元素並不會有outline的作用，在里面定義的h1等標題標簽屬於該header/footer所在標簽的章節。同時注意有幾個標簽定義的標題不會給該標簽所在的章節貢獻輪廓作用：blockquote body details dialog fieldset figure td。如下示例：

<body>
    <h1>一級大綱</h1>
    <blockquote>
        <h2>blockquote內的標題</h2>
    </blockquote>
    <div>
        <h2>div內的標題</h2>
    </div>
</body>

blockquote里面的h2標簽並不會給頁面的大綱增加內容

三、如何使用

1. div和section、section和article的區別

div是一個普通的容器，而section不能當作一個普通的容器使用，使用section要讓其起outline的作用，而article比section的章節概念更強。article適用於獨立性強的內容，如本身就是一篇文章、博客，或者用戶的評論等，article比section更加強調需要包含一個標題標簽h1~h6。如果使用article的語義性更好的時候，就不用section。或者，內容可再繼續細分章節的也應使用article。

2. 章節的內容是獨立的，並且可以嵌套

獨立是指每個章節都可以有自己的標題標簽、header、footer和nav，並且章節可以相互嵌套，例如：

<body>
    <h1>html標簽</h1>
    <article>
        <h1>html5標簽</h1>
        <section>
            <h1>標題標簽</h1>
        </section>
        <section>
            <h1>章節標簽</h1>
        </section>
    </article>
    <article>
        <h1>html4標簽</h1>
    </article>
</body>

3. 其它一些常用標簽

(1)figure和figcaption

figure用作照片及其注釋的容器

    <figure>
        <img src="Mars.jpg" alt="">
        <figcaption>火星</figcaption>
    </figure>

(2)aside

aside的內容與頁面的主體內容相切，可用作側邊欄

(3)更多標簽

更多標簽的使用見MDN HTML5 標簽列表

個人博客： http://yincheng.site/html5-label

參考：

1. w3c關於標簽標准說明：https://w3c.github.io/html/single-page.html

2. dive into html5對html5新標簽的解釋和使用介紹，http://diveintohtml5.info/semantics.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 語義化標簽 HTML5之語義化標簽 HTML5的新語義化的標簽 HTML5語義化標簽的應用 HTML5新增語義化標簽 HTML5語義化結構標簽有哪些？ HTML5常用的語義化標簽 html5新增的語義化標簽極其作用常見的HTML5語義化標簽 HTML5學習之語義化標簽