html5 語義化標簽

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</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><timepubdatedatetime="2012-10-03">2012/10/03</time></p></header><p>文章內容..</p><article><h2>評論</h2><article><header><h3>評論者: XXX</h3><p><timepubdatedatetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>評論者: XXX</h3><p><timepubdatedatetime="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。

HTML5語義化標簽還有第二篇HTML 5的革新——語義化標簽(二)。我們在構造語義化和結構化的標簽時的選擇也變得有些不慎重。也就是說，我們不應該濫用超語義化的元素。

?

一張頁面中結構元素構成網頁大體，但是也需要其他內容來填充，譬如圖片、文本、代碼、表單、交互等等。所以接下來我們就來詳細了解HTML5的新增加的和重新定義的文本元素標簽、分組元素標簽等其他元素標簽。

文本字體元素

文字對SEO影響很大，而HTML5對一些文本字體元素的語義又重新定義了一遍，也增加了一些新的。那我們就來重新認識他們。

• a（anchor 的縮寫）： 用于定義超鏈接
• em(emphasis 的縮寫)：em 是句意強調，加與不加會引起語義變化，也可以理解為局部強調，用在語句某個單詞上來改變句子的側重。
• strong：strong表示重要，strong 的強調則是一種隨意無順序的，看見某文時，立刻就凸顯出來的關鍵詞句。
• p：p元素
• b（bold 的縮寫）：b 元素原本就是加粗，現在表示“文體突出”文字，通俗將是用來在文本中高亮顯示某個或者幾個字符，旨在引起用戶的特別注意，無強調作用。譬如文檔概要中的關鍵字，評論中的產品名，以及分類名。
• i（italic 的縮寫）：i 元素原本只是傾斜，現在描述為在普通文章中突出不同意見或語氣或其他的一段文本，就像劇本里的話外音（外語、譯音），或也可以用做排版的斜體文字。
• code：定義計算機代碼文本。
• q（quote 的縮寫）：用于定義一段引用的內容（短內容）
• cite?：用于定義引用內容出自書籍或雜志等的標題，不允許其他信息，如作者，日期等。
• u?（underline 的縮寫）：定義下劃線文本
• abbr?（abbreviation 的縮寫）：定義一個縮寫文本，建議在 abbr 的 title 屬性中描述縮寫的全稱
• dfn?（defining instance 的縮寫）：用于定義一個術語
• var?：定義計算機代碼中的變量
• samp?（sample 的縮寫）：由程序輸出的示例文本
• kbd?（keyboard 的縮寫）：定義由鍵盤輸入的文本
• wbr?(word break)的縮寫：定義換行的時機
• span?：沒有任何語義
• br?：定義一個換行符

以上很多只是W3C定義，有些還不支持，但是為了徹底貫徹W3C的語義化，還是慢慢熟悉用起來吧。

文本字體元素標簽使用注意:

• 在下面這些元素都不適合的時候：表重要的 strong ，表強調的 em ，表標題的 h1–h6，表高亮或標記文本的 p 等，就用 b 來表示。
• em 的強調是用在語句某個單詞上來改變句子的側重，可以說是局部的，而strong 和局部還是全局無關，局部強調用strong也可以，strong強調的是重要性，不會改變句意。

time元素

time元素也是文本標簽，因為是全新的標簽，所以我們單獨來介紹。time元素用來標記一篇文章的發布時間。

<timedatetime="2012-02-15"pubdate>2012年02月15日</time>

形如如上代碼，知道time標簽一般有三個組成部分

1. 機器可識別的時間戳：格式必須是年月日的數字以減號相隔，如果增加時間，那就在日期后面加字母T然后跟24小時格式的時間值以及時區偏移量，形如datetime="2012-2-15T22:49:40+08:00"
2. 人可識別的文本內容：格式隨意，只要能看懂。
3. 一個可選的pubdata標記：pubdata是個布爾值，如果需要，寫上屬性名就好pubdata。但是為了美觀，我們也可以寫成pubdata=""

我們還要注意的是，如果該time位于一個article中，那么它表示這篇文章的發布時間；如果不在article之中表示整個文檔的發布時間。

<article><header><h1>html5jscss網<timedatetime="2012-02-14">2月14日</time>成立</h1><p>發布 <timedatetime="2012-02-15"pubdate>2012年02月15日</time> 分類：前端交流</p></header><p>你好世界！</p></article>

time示例代碼

分組元素標簽

我們熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分組元素標簽，我們接下來看一些不常用的和新加的分組元素標簽

• blockquote：標記一段長引文。標記短引文（行內引文），應采用 q 元素！
• pre：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。pre 標簽的一個常見應用就是用來表示源代碼。他跟code的關系好比blockquote和q的關系。

ol元素

ol元素在HTML5有改良，增加了兩個屬性：

1. “start”：start屬性用來定義列表編號的起始位置，
2. “reversed”：reversed屬性表示將列表進行反轉，但是目前還沒有任何一款瀏覽器對其提供支持，在這里就不細說了。

figure元素與figcaption元素

figure元素用來包含一塊獨立內容，該內容如果被移除掉不會對周圍的內容有影響。具體來說它可以用來表示圖片，統計圖，圖表，音頻，視頻，代碼片段等。如果需要你也可以給該內容添加一個標題，這個標題使用figcaption來表示。figcaption只能作為figure元素的子元素，可以放在figure元素內的任何位置。形如：

<figure><imgsrc=""alt=""/><figcaption>html5jscss前端網是剛建立的小站</figcaption></figure>

不是所有圖片都用figure來包裹，img 標簽也有語義的。如果純粹只是為了呈現的圖，也不在文檔其他地方引用，那就絕對不要用figure。如果和上下文有關，也可以把它移動到附錄，那就別用figure，aside可能適合。

figure元素和aside元素看起來表達的內容差不多，但是aside所能包含的內容比figure要廣。當你不知道如何選擇的時候可以這樣來做：這段內容對周圍的內容來說是一個要點，或者很重要，不可少，那么可以使用figure，否則使用aside。

注意：

一個figure元素內最多只允許放置一個figcaption元素，也可以不放，但是其他元素可無限放置。注意不是所有圖片都得用figure元素。

嵌入元素標簽

在頁面中除了顯示文檔活字符外，還需要放入一些其他元素，就是我們所說的嵌入元素。

嵌入元素包括img（圖片），頁面（iframe），多媒體對象將不再全部綁定在 object 或 embed 標簽 中，而是由有 video(視頻)audio（音頻），用于繪畫的 canvas 元素

這里我們不詳細介紹它們的屬性了，以后專門介紹。

HTML5中增加了一些表單元素和一些交互元素等新的標簽，但是著重點不同，所以我們放在另一片文章來繼續了解。HTML5語義標簽到此結束。