1. HTML語義化背景介紹

講到語義化，我們首先來聊聊html語義化的背景，HTML結構語義化，是最近幾年才提出來的，以前的html結構，都是一堆沒有語義的冷冰冰的標簽。最泛濫的就是div+css，以前的頁面，一打開就是一堆div+css，為了改變這種這種狀況，開發者們和官方提出了讓HTML結構語義化的概念，并且官方w3c，也在HTML5給出了幾個新的語義化的標簽。

2. 知識剖析

什么是語義化，語義化之后文檔會有什么效果呢？

1.首先，語義化，顧名思義，就是你寫的HTML結構，是用相對應的有一定語義的英文字母（標簽）表示的，標記的，因為HTML本身就是標記語言。不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是做網頁開發的人來說，也容易閱讀。那么，我們以后再開發的過程中，一定要注意了，盡量使用官方的有語義的標簽，不要再使用一堆無意義的標簽去堆你的結構。

怎么知道，自己的頁面結構是否語義化，那就要看你的HTML結構，在去掉CSS樣式表之后，是否，依然能很好的呈現內容的結構，代碼結構。也就是說，脫掉css的外衣，依然頭是頭，腳是腳。赤裸裸的完整的一篇文檔。這也就是，語義化之后文檔的效果。

2.其實語義化，也無非就是自己在使用標簽的時候多使用有英文語義的標簽，比如h標簽，在HTML中就是就是用來定義標題，還有p標簽，英文是paragraph段落，table表格標簽,等等。

3. 常見問題

1．為什么要語義化?

2. 寫HTML代碼時，應注意什么？

4. 解決方案

1．為什么要語義化?

a. 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；

b. 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息的標簽盡量填寫有含義的詞語、label標簽的活用；

c. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

d. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網頁；

e. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

2. 寫HTML代碼時，應注意什么？

1.? 盡可能少的使用無語義的標簽div和span；

2.? 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

3.? 不要使用純樣式標簽，如：b、font、u等，改用css設置。

4.? 需要強調的文本，可以包含在strong或em標簽中，strong默認樣式是加粗（不要用b），em是斜體（不要用i）；

5.? 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；

6.表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；demo

7.每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

8.補充一點：不僅寫html結構時，要用語義化標簽，給元素寫css類名時，也要遵循語義化原則，不要，隨便起個名字就用，那樣等以后，再重構時，非常難讀。最忌諱的是不會英文，用漢語拼音代替。別那么LOW 。

5．編碼實戰

6．擴展思考

HTML5新增了哪些語義化標簽？

1、header元素

header元素代表“網頁“和”section”的頁眉。通常包含H1~H6元素或者hgroup元素。作為整個頁面或者內容塊的標題，也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素

header使用注意：

?可以是“網頁”或任意“section”的頭部部分；

?沒有個數限制。

?如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2、footer元素

footer元素代表“網頁”或“section”的頁腳，通常含有該頁面的一些基本信息，例如：文檔創作者的姓名、文檔的版權信息、使用條款的鏈接、聯系信息等等。。

footer使用注意：

?可以是“網頁”或任意“section”的底部部分；

?沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

3、hgroup元素

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

hgroup使用注意：

?如果只需要一個h1-h6標簽就不用hgroup

?如果有連續多個h1-h6標簽就用hgroup

?如果有連續多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽

4、nav元素

nav元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，面包屑導航，搜索樣式，或者下一篇上一篇文章，但是事實上規范上說nav只能用在頁面主要導航部分上。頁腳區域中的鏈接列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。

nav使用注意：

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

5、aside元素

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

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

aside使用總結：

?aside在article內表示主要內容的附屬信息，

?在article之外則可做側邊欄，沒有article與之對應，最好不用。

?如果是廣告，其他日志鏈接或者其他分類導航也可以用

6、article元素

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

除了它的內容，article會有一個標題（通常會在header里），會有一個footer頁腳。

article使用注意：

?自身獨立的情況下：用article

?是相關內容：用section

?沒有語義的：用div

另外，說一下，HTML5其他結構元素標簽

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

?address代表區塊容器，必須是作為聯系信息出現，郵編地址、郵件地址等等,一般出現在footer。demo

?h1-h6因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁面出現多個h1。

7.參考文獻

參考一：百度

8.更多討論

1.css的class怎么命名：

根據公司定義css命名規范，或則百度查找css命名規范文檔；