HTML 5語義化標籤

HTML 5的革新之一：語義化標籤一節元素標籤。

在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</h1> <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。