HTML5 語義標籤

在 HTML5 出來以前，咱們用 div 來表示頁面章節，可是這些 div 都沒有實際意義。（即便咱們用 css 樣式的 id 和 class 來形容這塊內容的意義）。這些標籤只是咱們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但如今，那些以前沒「意義」的標籤由於 html5 的出現而消失了，這就是咱們平時所說的「語義」。

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

可是也不要由於 html5 新標籤的出現，而隨意用之，錯誤的使用確定會事與願違。因此有些地方仍是要用 div 的，就是由於 div 沒有任何意義的元素，他只是一個標籤，僅僅是用來構建外觀和結構。所以是最適合作容器的標籤。

W3C 定義了這些語義標籤，不可能徹底符合咱們有時的設計目標，就像制定出來的法律不可能流傳 100 年都不改變，更況且它才制定沒多久，不可能這些語義標籤對因此設計目標的適應。只是必定程度上的「通用」，咱們的目標是讓爬蟲讀懂重要的東西就夠了。

結論：不能由於有了 HTML5 標籤就棄用了 div，每一個事物都有它獨有的做用。

header 元素

header 元素表明「網頁」或「section」的頁眉；

一般包含 h1-h6 元素或 hgroup，做爲整個頁面或者一個內容塊的標題，也能夠包裹一個目錄部分，一個搜索框，一個 nav，或者任何相關 logo；

整個頁面沒有限制 header 元素的個數，能夠擁有多個，能夠爲每一個內容塊增長一個 header 元素；

header 示例代碼：

1 2 3 4 5 6 7 8

< header >      < hgroup >      < h1 >網站標題</ h1 >      < h2 >網站副標題</ h2 >    </ hgroup >   </ header >

header 使用注意：

1. 能夠是「網頁」或任意「section」的頭部部分；

2. 沒有個數限制；

3. 若是 hgroup 或 h1-h6 本身就能工做的很好，那就不要用 header；

section 元素

section 元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組；

section 一般還帶標題，雖然 html5 中 section 會自動給標題 h1-h6 降級，可是最好手動給他們降級；

section 示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< section >      < h1 >什麼是 section</ h1 >      < article >        < h2 >關於 section</ h2 >      < p >section 的介紹</ p >        < section >        < h3 >關於其餘</ h3 >        < p >關於其餘 section 的介紹</ p >      </ section >      </ article >   </ section >

section 使用注意：

1. 表示文檔中的節或者段；

2. article、nav、aside 能夠理解爲特殊的 section，因此若是能夠用 article、nav、aside 就不要用 section，沒實際意義的就用 div；

article 元素

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

除了它的內容，article 會有一個標題（一般會在 header 裏），會有一個 footer 頁腳。咱們舉幾個例子介紹一下 article，好更好區分 article、section、div；

一篇簡單文章的 article 示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13

< article >      < header >      < h1 >文章標題</ h1 >    </ header >      < p >文章內容..</ p >      < footer >      < p >版權：cssue.com</ p >    </ footer >   </ article >

上例是最簡單的 article 標籤使用狀況，若是在 article 內部再嵌套 article，那就表明內嵌的 article 是與它外部的內容有關聯的，如博客文章下面的評論；

文章裏的評論，一個 article 裏嵌套 article 的示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

< article >      < header >      < h1 >文章標題</ h1 >      < time datetime = "2012-12-06" >2012/12/06</ time >    </ header >      < p >文章內容..</ p >      < article >        < h2 >評論</ h2 >        < article >        < header >          < h3 >評論者: XXX</ h3 >          < time datetime = "2012-12-06T19:10" >~1 hour ago</ time >        </ header >        < p >娃哈哈..</ p >      </ article >        < article >        < header >          < h3 >評論者: XXX</ h3 >          < time datetime = "2012-12-06T19:10" >~1 hour ago</ time >        </ header >        < p >哈哈哈哈...</ p >      </ article >      </ article >   </ article >

article 內部嵌套 article，有多是評論或其餘跟文章有關聯的內容。那 article 內部嵌套 section 通常是什麼狀況呢。以下：

文章裏的章節，一個 article 裏嵌套 section 的示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< article >      < h1 >前端技術</ h1 >    < p >前端技術有那些</ p >      < section >      < h2 >HTML</ h2 >      < p >標籤..</ p >    </ section >      < section >      < h2 >CSS</ h2 >      < p >樣式..</ p >    </ section >      < section >      < h2 >JS</ h2 >      < p >腳本..</ p >    </ section >   </ article >

由於文章內 section 部分雖然也是獨立的部分，可是它門只能算是組成總體的一部分，從屬關係，article 是大主體，section 是構成這個大主體的一部分。本網站的所有文章都是 article 嵌套一個個 section 章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。

那 section 內部嵌套 article 又有哪些狀況呢，以下：

一個 section 裏嵌套 article 的示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< section >      < h1 >介紹網站製做成員配備</ h1 >      < article >      < h2 >設計師</ h2 >      < p >設計網頁的...</ p >    </ article >      < article >      < h2 >程序員</ h2 >      < p >編寫程序的..</ p >    </ article >      < article >      < h2 >前端工程師</ h2 >      < p >給樓上兩位打雜的..</ p >    </ article >   </ section >

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

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

article 使用注意：

1. 自身獨立的狀況下：使用 article；

2. 是相關內容：使用 section；

3. 沒有語義的：使用 div；

nav 元素

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

nav 示例代碼：

1 2 3 4 5 6 7

< nav >    < ul >      < li >HTML5</ li >      < li >CSS3</ li >      < li >JavaScript</ li >    </ ul > </ nav >

可是我在有些時候卻不由自主的想用它，譬如：側邊欄上的目錄，麪包屑導航，或者上一篇下一篇文章，可是事實上規範上說 nav 只能用在頁面主要導航部分上。頁腳區域中的連接列表，雖然指向不一樣網站的不一樣區域，譬如服務條款，版權頁等，這些 footer 元素就可以用了。

nav 使用注意：

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

aside 元素

aside 元素標籤用來表示當前頁面或文章的附屬信息部分，能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav 元素組，以及其餘相似的有別與主要內容的部分。

1 2 3 4 5 6 7 8 9 10 11 12 13

< article >      < h1 >前端技術</ h1 >    < p >前端技術包括：HTML、CSS、JavaScript等...</ p >      < aside >      < dl >        < dt >HTML</ dt >        < dd >HTML 是用於描述網頁文檔的一種超文本標記語言。</ dd >      </ dl >    </ aside >   </ article >

aside 使用注意：

1. 被包含在 article 元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的引用、詞彙列表等。

2. 在 article 以外使用，做爲頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容能夠是友情連接、附屬導航或廣告單元等。

footer 元素

footer 元素表明「網頁」或「section」的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。若是 footer 元素包含了整個節，那麼它們就表明附錄，索引，提拔，許可協議，標籤，類別等一些其餘相似信息。

footer 示例代碼：

1 2 3

< footer >    < p >版權：cssue.com</ p > </ footer >

footer 使用注意：

1. 能夠是「網頁」或任意「section」的底部部分；

2. 沒有個數限制，除了包裹的內容不同，其餘跟 header 相似；