摘要：語義化的頁面一方面可以讓機(jī)器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類所用另一方面它可以讓開發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內(nèi)容。

Web語義化，使用語義恰當(dāng)?shù)臉?biāo)簽，可以讓頁面具有良好的結(jié)構(gòu)，頁面元素具有良好的含義，從而讓人和機(jī)器都能快速理解。語義化的web頁面一方面可以讓機(jī)器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類所用；另一方面它可以讓開發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內(nèi)容。

有利于 SEO 。

SEO也就是Search Engine Optimization，搜索引擎優(yōu)化。指通過站內(nèi)優(yōu)化比如網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)、網(wǎng)站代碼優(yōu)化等以及站外優(yōu)化，比如網(wǎng)站站外推廣、網(wǎng)站品牌建設(shè)等，使網(wǎng)站滿足搜索引擎收錄排名需求，在搜索引擎中提高關(guān)鍵詞排名，從而吸引精準(zhǔn)用戶進(jìn)入網(wǎng)站，獲得免費(fèi)流量，產(chǎn)生直接銷售或品牌推廣。

人可以通過視覺的劃分判斷內(nèi)容的語義,而搜索引擎只能通過爬取網(wǎng)頁標(biāo)簽等代碼來判斷內(nèi)容的語義。得到搜索引擎的有效爬取，是提高網(wǎng)站流量的有效方法之一。要使頁面盡可能地對搜索引擎友好，所以就要盡可能地使標(biāo)簽和內(nèi)容語義化。

在頁面去掉或樣式丟失的時(shí)候，能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。html的一些標(biāo)簽，例如h1（粗體）,strong（加粗）,em（斜體）,通過一些默認(rèn)的樣式，可以使頁面即使在缺失CSS樣式修飾時(shí)也能呈現(xiàn)清晰的結(jié)構(gòu)。

屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。

團(tuán)隊(duì)開發(fā)中，良好的語義化標(biāo)簽，可以減少很多差異化，減少成員間溝通成本，方便開發(fā)和后期維護(hù)，利于實(shí)現(xiàn)模塊化開發(fā)。

web語義化應(yīng)該是樣式與結(jié)構(gòu)分離的結(jié)果，重構(gòu)中的語義化包含HTML標(biāo)簽語義化和CSS命名語義化,HTTP的語義化是針對HTTP協(xié)議來說。

HTML為網(wǎng)頁文檔內(nèi)容提供上下文結(jié)構(gòu)和含義。對于HTML體系而言，Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，讓頁面元素有含義，便于被瀏覽器、搜索引擎解析。通常我們所說的HTML應(yīng)該是完全脫離表現(xiàn)信息的，其中的標(biāo)簽應(yīng)該都是語義化地定義了文檔的結(jié)構(gòu)。

例如：
為了SEO，我們會選擇h1標(biāo)簽來突出標(biāo)題，用strong標(biāo)簽來突出關(guān)鍵字，這其實(shí)就是語義化的體現(xiàn)。SEO的原理其實(shí)是分析源碼來體現(xiàn)或猜測網(wǎng)站要表達(dá)的內(nèi)容。比如我們想表達(dá)某篇文章的標(biāo)題， 我們或許會這樣寫：

  
文章的標(biāo)題

但是為了更好的討好搜索引擎我們最好寫成如下形式：

文章的標(biāo)題

一些常用的標(biāo)簽元素有：

本身無實(shí)在意義，組合其他HTML元素，常用于頁面布局:div

設(shè)置文本，填充段落:h1~h6, p, span, strong, em...

表現(xiàn)列表：ul, li, ol, dl, dt, dd

表單相關(guān)：form,input,select,button

表格相關(guān)：table,thead,tbody,tfoot,th,tr,td

用于圖像顯示：img, canvas

打開鏈接，發(fā)送郵件，段落跳轉(zhuǎn)：a

此外，meta Description/meta keywords等針對搜索引擎和更新頻度的描述和關(guān)鍵詞的meta標(biāo)簽也會用來實(shí)現(xiàn)網(wǎng)頁的SEO。
【詳細(xì)可以參考：w3schools.com:https://www.w3schools.com/tag... 】

HTML 規(guī)范其實(shí)一直在往語義化的方向上努力，許多元素、屬性在設(shè)計(jì)的時(shí)候，就已經(jīng)考慮了如何讓各種用戶代理甚至網(wǎng)絡(luò)爬蟲更好地理解 HTML 文檔。HTML5 更是在之前規(guī)范的基礎(chǔ)上，將所有表現(xiàn)層的語義描述都進(jìn)行了修改或者刪除，增加了不少可以表達(dá)更豐富語義的元素，也出現(xiàn)很多可以提到DIV元素的更具象的標(biāo)簽。

一個(gè)經(jīng)典的頁面結(jié)構(gòu)如圖：
html5表現(xiàn)內(nèi)容.jpg

header區(qū)：

包含p h1~h6 hgroup等可以表示標(biāo)題和副標(biāo)題。例如：

  

    
標(biāo)題
    
副標(biāo)題
  
  
 文本或者圖片

2.Navigation區(qū)

nav標(biāo)簽專門為頁面導(dǎo)航功能定義一塊區(qū)域

3.Article 和 Section 區(qū)

Article包含頁面的實(shí)際內(nèi)容，包含 Web 內(nèi)容的相關(guān)的組件區(qū)。

    

      Content
    
    

      Content
    


  

      Content
  
  

      Content
  

4.figure標(biāo)記

包含圖像、圖表和照片。figure標(biāo)記可以包含figcaption，figcaption表示圖像對應(yīng)的描述文字，與圖片產(chǎn)生對應(yīng)關(guān)系。

5.媒體元素

audio/video/source/embed

6.aside

包含一些補(bǔ)充性內(nèi)容，可以被移除而不會影響文章或文章所在的區(qū)段或頁面所傳達(dá)的信息。

7.footer等

總之，HTML語義化是反對大篇幅使用無語義化的div+span+class,而鼓勵使用HTML定義好的語義化標(biāo)簽。當(dāng)然，如果需要兼容低版本的IE瀏覽器，比如說IE8以及以下，那就需要選擇合適的兼容性的標(biāo)簽了。

CSS語義就是class和ID命名的語義。class屬性作為HTML與CSS銜接的紐帶，其本意是用來描述元素內(nèi)容的。指用易于理解的名稱對html標(biāo)簽附加的class或id命名。如果說HTML語義化標(biāo)簽是給機(jī)器看的，那么CSS命名的語義化就是給人看的。良好的CSS命名方式減少溝通調(diào)試成本，易于理解。
CSS命名首先要滿足W3C的命名規(guī)范和團(tuán)隊(duì)的命名規(guī)范。其次是高效和可重用性。
就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。

    nickName:seg




    nickName:seg

url語義化，可以使得搜索引擎或者爬蟲更好地理解當(dāng)前url所在目錄所需要表達(dá)的內(nèi)容；而對于用戶來說，通過url也可以判斷上一級目錄或者下一級目錄想要表示的內(nèi)容，可以提高用戶體驗(yàn)。
例如我司的搜索品類的url：

https://mall.midea.com/index.php/category?id=10049&addr_code=440000,440100,440103
https://mall.midea.com/category?id=10049&addr_code=440000,440100,440103

這兩個(gè)url指向的是同一個(gè)資源，但是顯然第二個(gè)url對于用戶和搜索引擎更加友好。
url語義化可以從以下標(biāo)準(zhǔn)來衡量：

url簡化，規(guī)范化。例如：url里的參數(shù)兩個(gè)單詞的連接用下劃線_。

結(jié)構(gòu)化，語義化。比如：category "品類"

采用技術(shù)無關(guān)的url：比如第一個(gè)鏈接中的index.php這種就不應(yīng)該出現(xiàn)在用戶側(cè)的url里。

參考文檔：

About HTML semantics and front-end architecture
HTML Element Reference
HTML語義化
IBM developerWorks?
url重構(gòu)
search-engine-optimization-starter-guide-zh-cn