如何理解HTML結構的語義化？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【如何理解HTML結構的語義化？ 】

1. HTML語義化背景介紹

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

1. 知識剖析

什麼是語義化，語義化以後文檔會有什麼效果呢？
1.首先，語義化，顧名思義，就是你寫的HTML結構，是用相對應的有必定語義的英文字母（標籤）表示的，標記的，由於HTML自己就是標記語言。不只對本身來講，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是作網頁開發的人來講，也容易閱讀。那麼，咱們之後再開發的過程當中，必定要注意了，儘可能使用官方的有語義的標籤，不要再使用一堆無心義的標籤去堆你的結構。

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

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

1. 常見問題

1．爲何要語義化?

1. 寫HTML代碼時，應注意什麼？
2. 解決方案

1．爲何要語義化?
a. 爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；

b. 用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息的標籤儘可能填寫有含義的詞語、label標籤的活用；

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

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

e. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

1. 寫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新增了哪些語義化標籤？
一、header元素

header元素表明「網頁「和」section」的頁眉。一般包含H1~H6元素或者hgroup元素。做爲整個頁面或者內容塊的標題，也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，能夠擁有多個，能夠爲每一個內容塊增長一個header元素

header使用注意：

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

•沒有個數限制。

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

二、footer元素

footer元素表明「網頁」或「section」的頁腳，一般含有該頁面的一些基本信息，例如：文檔創做者的姓名、文檔的版權信息、使用條款的連接、聯繫信息等等。。

footer使用注意：

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

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

三、hgroup元素

hgroup元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

hgroup使用注意：

•若是隻須要一個h1-h6標籤就不用hgroup

•若是有連續多個h1-h6標籤就用hgroup

•若是有連續多個標題和其餘文章數據，h1-h6標籤就用hgroup包住，和其餘文章元數據一塊兒放入header標籤

四、nav元素

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

nav使用注意：

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

五、aside元素

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

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

aside使用總結：

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

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

•若是是廣告，其餘日誌連接或者其餘分類導航也能夠用

六、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命名規範文檔