摘要：語義化的頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內容。

Web語義化，使用語義恰當的標簽，可以讓頁面具有良好的結構，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用；另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內容。

有利于 SEO 。

SEO也就是Search Engine Optimization，搜索引擎優化。指通過站內優化比如網站結構調整、網站內容建設、網站代碼優化等以及站外優化，比如網站站外推廣、網站品牌建設等，使網站滿足搜索引擎收錄排名需求，在搜索引擎中提高關鍵詞排名，從而吸引精準用戶進入網站，獲得免費流量，產生直接銷售或品牌推廣。

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

在頁面去掉或樣式丟失的時候，能讓頁面呈現清晰的結構。html的一些標簽，例如h1（粗體）,strong（加粗）,em（斜體）,通過一些默認的樣式，可以使頁面即使在缺失CSS樣式修飾時也能呈現清晰的結構。

屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。

團隊開發中，良好的語義化標簽，可以減少很多差異化，減少成員間溝通成本，方便開發和后期維護，利于實現模塊化開發。

web語義化應該是樣式與結構分離的結果，重構中的語義化包含HTML標簽語義化和CSS命名語義化,HTTP的語義化是針對HTTP協議來說。

HTML為網頁文檔內容提供上下文結構和含義。對于HTML體系而言，Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，讓頁面元素有含義，便于被瀏覽器、搜索引擎解析。通常我們所說的HTML應該是完全脫離表現信息的，其中的標簽應該都是語義化地定義了文檔的結構。

例如：
為了SEO，我們會選擇h1標簽來突出標題，用strong標簽來突出關鍵字，這其實就是語義化的體現。SEO的原理其實是分析源碼來體現或猜測網站要表達的內容。比如我們想表達某篇文章的標題， 我們或許會這樣寫：

  
文章的標題

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

文章的標題

一些常用的標簽元素有：

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

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

表現列表：ul, li, ol, dl, dt, dd

表單相關：form,input,select,button

表格相關：table,thead,tbody,tfoot,th,tr,td

用于圖像顯示：img, canvas

打開鏈接，發送郵件，段落跳轉：a

此外，meta Description/meta keywords等針對搜索引擎和更新頻度的描述和關鍵詞的meta標簽也會用來實現網頁的SEO。
【詳細可以參考：w3schools.com:https://www.w3schools.com/tag... 】

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

一個經典的頁面結構如圖：
html5表現內容.jpg

header區：

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

  

    
標題
    
副標題
  
  
 文本或者圖片

2.Navigation區

nav標簽專門為頁面導航功能定義一塊區域

3.Article 和 Section 區

Article包含頁面的實際內容，包含 Web 內容的相關的組件區。

    

      Content
    
    

      Content
    


  

      Content
  
  

      Content
  

4.figure標記

包含圖像、圖表和照片。figure標記可以包含figcaption，figcaption表示圖像對應的描述文字，與圖片產生對應關系。

5.媒體元素

audio/video/source/embed

6.aside

包含一些補充性內容，可以被移除而不會影響文章或文章所在的區段或頁面所傳達的信息。

7.footer等

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

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

    nickName:seg




    nickName:seg

url語義化，可以使得搜索引擎或者爬蟲更好地理解當前url所在目錄所需要表達的內容；而對于用戶來說，通過url也可以判斷上一級目錄或者下一級目錄想要表示的內容，可以提高用戶體驗。
例如我司的搜索品類的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

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

url簡化，規范化。例如：url里的參數兩個單詞的連接用下劃線_。

結構化，語義化。比如：category "品類"

采用技術無關的url：比如第一個鏈接中的index.php這種就不應該出現在用戶側的url里。

參考文檔：

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