web語義化是什么？
Web語義化，使用語義恰當的標簽，可以讓頁面具有良好的結構，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集並研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用；另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內容。
為什么要語義化？
-
有利於 SEO 。
SEO也就是Search Engine Optimization，搜索引擎優化。指通過站內優化比如網站結構調整、網站內容建設、網站代碼優化等以及站外優化，比如網站站外推廣、網站品牌建設等，使網站滿足搜索引擎收錄排名需求，在搜索引擎中提高關鍵詞排名，從而吸引精准用戶進入網站，獲得免費流量，產生直接銷售或品牌推廣。
人可以通過視覺的划分判斷內容的語義,而搜索引擎只能通過爬取網頁標簽等代碼來判斷內容的語義。得到搜索引擎的有效爬取，是提高網站流量的有效方法之一。要使頁面盡可能地對搜索引擎友好，所以就要盡可能地使標簽和內容語義化。
-
在頁面去掉或樣式丟失的時候，能讓頁面呈現清晰的結構。html的一些標簽，例如h1（粗體）,strong（加粗）,em（斜體）,通過一些默認的樣式，可以使頁面即使在缺失CSS樣式修飾時也能呈現清晰的結構。
-
屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
-
團隊開發中，良好的語義化標簽，可以減少很多差異化，減少成員間溝通成本，方便開發和后期維護，利於實現模塊化開發。
web語義化的分類
web語義化應該是樣式與結構分離的結果，重構中的語義化包含HTML標簽語義化和CSS命名語義化,HTTP的語義化是針對HTTP協議來說。
HTML標簽語義化
HTML為網頁文檔內容提供上下文結構和含義。對於HTML體系而言，Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，讓頁面元素有含義，便於被瀏覽器、搜索引擎解析。通常我們所說的HTML應該是完全脫離表現信息的，其中的標簽應該都是語義化地定義了文檔的結構。
例如：
為了SEO，我們會選擇h1標簽來突出標題，用strong標簽來突出關鍵字，這其實就是語義化的體現。SEO的原理其實是分析源碼來體現或猜測網站要表達的內容。比如我們想表達某篇文章的標題， 我們或許會這樣寫：
<div class=”title”>文章的標題</div>但是為了更好的討好搜索引擎我們最好寫成如下形式：
<h1>文章的標題</h1>一些常用的標簽元素有：
-
本身無實在意義，組合其他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元素的更具象的標簽。
一個經典的頁面結構如圖：
-
header區：
包含p h1~h6 hgroup等可以表示標題和副標題。例如：
<header> <hgroup> <h1>標題</h1> <h2>副標題</h2> </hgroup> <p> 文本或者圖片</p> </header>2.Navigation區
nav標簽專門為頁面導航功能定義一塊區域
<nav> <ul> <li><a href="#">主頁</a></li> <li><a href="#">關於我們</a></li> </ul> </nav>3.Article 和 Section 區
Article包含頁面的實際內容，包含 Web 內容的相關的組件區。
<article> <section> Content </section> <section> Content </section> </article> <section> <article> Content </article> <article> Content </article> </section> 4.figure標記
包含圖像、圖表和照片。figure標記可以包含figcaption，figcaption表示圖像對應的描述文字，與圖片產生對應關系。
<figure> <img src="/figure.jpg" width="304" height="228" alt="Picture"> <figcaption>Caption for the figure</figcaption> </figure>5.媒體元素
audio/video/source/embed
6.aside
包含一些補充性內容，可以被移除而不會影響文章或文章所在的區段或頁面所傳達的信息。
<aside> <h4>Disney in France</h4> <p>Besides Euro Disney, there is a Disneyland in California.</p> </aside>7.footer等
總之，HTML語義化是反對大篇幅使用無語義化的div+span+class,而鼓勵使用HTML定義好的語義化標簽。當然，如果需要兼容低版本的IE瀏覽器，比如說IE8以及以下，那就需要選擇合適的兼容性的標簽了。
CSS命名語義化
CSS語義就是class和ID命名的語義。class屬性作為HTML與CSS銜接的紐帶，其本意是用來描述元素內容的。指用易於理解的名稱對html標簽附加的class或id命名。如果說HTML語義化標簽是給機器看的，那么CSS命名的語義化就是給人看的。良好的CSS命名方式減少溝通調試成本，易於理解。
CSS命名首先要滿足W3C的命名規范和團隊的命名規范。其次是高效和可重用性。
就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。
<!-- 以表現為中心 --> <div class="lr margin10"> <span>nickName:seg</span> <div> <!-- 以信息為中心 --> <p class="user-info"> <em>nickName:seg</em> <p>辦公資源網址導航 https://www.wode007.com
Http+URL語義化
url語義化，可以使得搜索引擎或者爬蟲更好地理解當前url所在目錄所需要表達的內容；而對於用戶來說，通過url也可以判斷上一級目錄或者下一級目錄想要表示的內容，可以提高用戶體驗。
url語義化可以從以下標准來衡量：
-
url簡化，規范化。例如：url里的參數兩個單詞的連接用下划線_。
-
結構化，語義化。比如：category "品類"
-
采用技術無關的url：比如第一個鏈接中的index.php這種就不應該出現在用戶側的url里。