HTML5之語義化標籤

在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義。（即使我們用css樣式的id和class形容這塊內容的意義）。這些標籤只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒“意義”的標籤因為因為html5的出現消失了，這就是我們平時說的“語義”。

看下圖沒有用div標籤來佈局

html5的佈局

嗯，如上圖那個頁面結構沒有一個div，都是採用html5語義標籤（用哪些標籤，關鍵取決於你的設計目標）。

但是也不要因為html5新標籤的出現，而隨意用之，錯誤的使用肯定會事與願違。所以有些地方還是要用div的，就是因為div沒有任何意義的元素，他只是一個標籤，

僅僅是用來構建外觀和結構。因此是最適合做容器的標籤。

W3C定義了這些語義標籤，不可能完全符合我們有時的設計目標，就像制定出來的法律不可能流傳100年都不改變，更何況它才制定沒多久，

不可能這些語義標籤對所以設計目標的適應。只是一定程度上的“通用”，我們的目標是讓爬蟲讀懂重要的東西就夠了。

結論：不能因為有了HTML 5標籤就棄用了div，每個事物都有它的獨有作用的。

節點元素標籤因使用的地方不同，我將他們分為：節元素標籤、文字元素標籤、分組元素標籤分開來講解HTML5中新增加的語義化標籤和使用總結。

header元素

header 元素代表“網頁”或“section”的頁首。
通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜尋框，一個nav，或者任何相關logo。

整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素

<header>

    <hgroup>

        <h1>網站標題</h1>

        <h1>網站副標題</h1>

    </hgroup>

</header>    

header的示例程式碼

header使用注意：

• 可以是“網頁”或任意“section”的頭部部分；
• 沒有個數限制。
• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

footer元素

footer元素代表“網頁”或“section”的頁尾，通常含有該節的一些基本資訊，譬如：作者，相關文件連結，版權資料。如果footer元素包含了整個節，那麼它們就代表附錄，索引，提拔，許可協議，標籤，類別等一些其他類似資訊。

<footer>

    COPYRIGHT@小北

</footer>

footer的示例程式碼

footer使用注意：

• 可以是“網頁”或任意“section”的底部部分；
• 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

hgroup元素

hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

<hgroup>

    <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1>

    <h2>HTML 5</h2>

</hgroup>

hgroup示例程式碼

hgroup使用注意：

• 如果只需要一個h1-h6標籤就不用hgroup
• 如果有連續多個h1-h6標籤就用hgroup
• 如果有連續多個標題和其他文章資料，h1-h6標籤就用hgroup包住，和其他文章元資料一起放入header標籤

nav元素

nav元素代表頁面的導航連結區域。用於定義頁面的主要導航部分。

<nav>

    <ul>

        <li>HTML 5</li>

        <li>CSS3</li>

        <li>JavaScript</li>

    </ul>

</nav>    

nav例項

但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，麵包屑導航，搜尋樣式，或者下一篇上一篇文章，但是事實上規範上說nav只能用在頁面主要導航部分上。

頁尾區域中的連結列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。

nav使用注意：

• 用在整個頁面主要導航部分上，不合適就不要用nav元素；

aside元素

aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）

在article元素之外使用作為頁面或站點全域性的附屬資訊部分。最典型的是側邊欄，其中的內容可以是日誌串連，其他組的導航，甚至廣告，這些內容相關的頁面。

<article>

    <p>內容</p>

    <aside>

        <h1>作者簡介</h1>

        <p>小北，前端一枚</p>

    </aside>

</article>    

aside例項

aside使用總結：

• aside在article內表示主要內容的附屬資訊，
• 在article之外則可做側邊欄，沒有article與之對應，最好不用。
• 如果是廣告，其他日誌連結或者其他分類導航也可以用

section元素

section元素代表文件中的“節”或“段”，“段”可以是指一篇文章裡按照主題的分段；“節”可以是指一個頁面裡的分組。

section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。如下：

<section>

    <h1>section是啥？</h1>

    <article>

    　　<h2>關於section</h2>

    　　<p>section的介紹</p>

   　　 <section>

   　　     <h3>關於其他</h3>

    　　    <p>關於其他section的介紹</p>

   　　 </section>

    </article>

</section>

section示例程式碼

section使用注意：

一張頁面可以用section劃分為簡介、文章條目和聯絡資訊。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和指令碼的便利，可以用div。

• 表示文件中的節或者段；
• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

article元素

article元素最容易跟section和div容易混淆，其實article代表一個在文件，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）

除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。我們舉幾個例子介紹一下article，好更好區分article、section、div

<article>

    <h1>一篇文章</h1>

    <p>文章內容..</p>

    <footer>

        <p>

            <small>版權：html5jscss網所屬，作者：小北</small>

        </p>

    </footer>

</article>

一篇簡單文章的article示例程式碼

上例是最好簡單的article標籤使用情況，如果在article內部再巢狀article，那就代表內嵌的article是與它外部的內容有關聯的，如部落格文章下面的評論，如下：

<article>

    <header>

        <h1>一篇文章</h1>

        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>

    </header>

    <p>文章內容..</p>

    <article>

        <h2>評論</h2>

        <article>

            <header>

                <h3>評論者: XXX</h3>

                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>

            </header>

            <p>哈哈哈</p>

        </article>

        <article>

            <header>

                <h3>評論者: XXX</h3>

                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>

            </header>

            <p>哈？哈？哈？</p>

        </article>

    </article>

</article>

文章裡的評論，一個article巢狀article來表示的例項

article內部巢狀article，有可能是評論或其他跟文章有關聯的內容。那article內部巢狀section一般是什麼情況呢。如下：

<article>

    <h1>前端技術</h1>

    <p>前端技術有那些</p>

    <section>

        <h2>CSS</h2>

        <p>樣式..</p>

    </section>

    <section>

        <h2>JS</h2>

        <p>指令碼</p>

    </section>

</article>

文章裡的章節，一個article裡的section例項

因為文章內section部分雖然也是獨立的部分，但是它門只能算是組成整體的一部分，從屬關係，article是大主體，section是構成這個大主體的一部分。本網站的全部文章都是article巢狀一個個section章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。

那section內部巢狀article又有哪些情況呢，如下

<section>

    <h1>介紹: 網站製作成員配備</h1>

    <article>

        <h2>設計師</h2>

        <p>設計網頁的...</p>

    </article>

    <article>

        <h2>程式設計師</h2>

        <p>後臺寫程式的..</p>

    </article>

    <article>

        <h2>前端工程師</h2>

        <p>給樓上兩位打雜的..</p>

    </article>

</section>

一個section裡的article例項

設計師、程式設計師、前端工程師都是一個獨立的整體，他們組成了網站製作基本配備，當然還有其他成員~~。設計師、程式設計師、前端工程師就像article，是一個個獨立的整體，而section將這些自成一體的article包裹，就組成了一個團體。

article和section和例子就例舉這麼多了，具體情況具體分析，不易深究。漏了divd，其實div就是隻是想用來把元素組合或者給它們加樣式時使用。

article使用注意：

• 自身獨立的情況下：用article
• 是相關內容：用section
• 沒有語義的：用div

HTML5其他結構元素標籤

HTML5節元素標籤包括body article nav aside section header footer hgroup ，還有h1-h6 address。

• address代表區塊容器，必須是作為聯絡資訊出現，郵編地址、郵件地址等等,一般出現在footer。
• h1-h6因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁面出現多個h1。

我們在構造語義化和結構化的標籤時的選擇也變得有些不慎重。也就是說，我們不應該濫用超語義化的元素。