天天學一點兒HTML5的新標籤

sections部分

（http://www.w3.org/TR/html5/sections.html）

 

標籤：article

article標籤用來表示頁面中一段完整的能夠自我包含的片斷，具備可重用的特性。能夠是一條貼子、雜誌或報紙的文章、一篇博客、一條用戶提交的評論，也能夠是一個可交互的組件，甚至能夠是任意獨立的內容條目。

article標籤是能夠嵌套使用的，好比一篇文章以後的評論就能夠嵌套放在表示文章的article元素以內。

範例：

<article>
    <header>
        <h1>文章標題</h1>
    </header>
    <p>文章正文</p>
</article>

標籤：section

section標籤表示文檔或者應用當中的一個章節片段。章節片段能夠帶有本身的heading。

section能夠用來表示文章的章節，一個標籤頁。一個網站的首頁能夠經過section分爲介紹、新聞、聯繫方式等等部分。

section能夠嵌套使用。

範例：

<article>
    <header>
        <h1>標題</h1>
    </header>
    <section>
        <h1>章節一標題</h1>
        <p>章節一段落</p>
    </section>
    <section>
        <h1>章節二標題</h1>
        <p>章節二段落</p>
    </section>
</article>

article仍是section？

套用HTML5規範裏的一句話：A section forms part of something else. An article is its own thing. 意思就是說section老是屢次出現的，由於每一個section是若干sections的一部分。而article很獨立，一個頁面能夠只有一個article。

標籤：nav

nav包含導航連接的片斷。

範例：

<nav>
    <p><a href="/">Home</a>
    <p><a href="/biog.html">Bio</a>
    <p><a href="/discog.html">Discog</a>
</nav>

標籤：aside

aside標籤表明與正文內容無關的部分。能夠是邊欄上引述的文字內容，廣告，也能夠包含nav元素。判斷是否使用aside標籤就看其包含的內容是否屬於住文檔流中。

範例：

<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>

標籤：header

header表示當前所在段落、章節的介紹性信息以及導航連接信息，通常狀況下會包含h1-h6，但也能夠不包含，也可使用其餘元素來表示其中內容。

強調一點，html中h1-h6是真正的標題（heading），header則是包含介紹性的信息（例如目錄、搜索框、logo等），其中能夠包含標題，也能夠不包含。

範例：

<article>
    <header>
        <h1>Hard Trance is My Life</h1>
        <p>By DJ Steve Hill and Technikal</p>
    </header>
    <p>The album with the amusing punctuation has red artwork.</p>
</article>

標籤：footer

footer標籤表示頁腳，一般包含文章的做者、相關信息的連接、版權信息等等。footer能夠包含整段的附錄信息、索引信息、版本更新記錄、許可協議。footer一般都是出如今內容的最後，但也不必定。

範例：

<article>
    <h1>Hard Trance is My Life</h1>
    <p>The album with the amusing punctuation has red artwork.</p>
    <footer>
        <p>Artists: DJ Steve Hill and Technikal</p>
    </footer>
</article>

標籤：address

address標籤表示與article或者body所包含內容相關的聯繫信息。注意address並非通常意義上的地址，除非這個地址與聯繫信息相關（例如文章裏提到了某個地址，就不能用address標籤來描述）。address只得包含聯繫信息。

範例：

<address>
    <a href="../People/Raggett/">Dave Raggett</a>,
    <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>