web語義化

WEB 語義化 

很多招聘資訊中提到web語義化，我將自己收集整理的資料總結與你們分享一下：

先提幾個問題，為什麼使用語義化的HTML？語義化的 HTML有什麼好處？

為什麼使用web語義化的HTML結構？

web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素的含義，能夠讓人和搜尋引擎都容易理解。如果可以合適的位置使用恰當的標籤，那麼寫出來的頁面語義明確，結構清晰，搜尋引擎也可以認出哪些是頁面內容，予以較高的重視。HTML5的一大改革就是語義化標籤的改善。

其實簡單的來說就是讓機器可以讀懂內容。web頁面的解析是由搜尋引擎來進行搜尋，機器來解析。所以語義化的標準是儘可能的讓機器讀懂。人可以通過視覺的劃分判斷內容的語義，搜尋引擎看到的是程式碼。搜尋引擎只能通過標籤來判斷內容的語義。因為頁面的很大一部分流量是來自搜尋引擎的，要使頁面儘可能地對搜尋引擎友好，所以儘可能地使用標籤語義化。

最初的HTML中如h1~h6、thead、ul、ol等標籤，通過標籤的語義，最初設計的想法，來達到語義化的要求。如標題、表頭、無序、有序列表，搜尋引擎很好的利用了這些語義化標籤抓取內容

後來，最初定義的HTML語義化標籤，不足以實現對Web頁面各個部分的功能或位置描述，所以Web前端人員利用HTML標籤的id和class屬性，進一步對HTML標籤進行描述，如對頁尾HTML標籤新增如id="footer"或者class="footer"的屬性（值），以“無聲”的方式在不同的前端程式設計師或者前後端程式設計師間實現交流。

制定HTML5的W3C組織採用了諸如header、footer、section等語義化標籤，來進行頁面佈局的設計想法，彌補了採用id="header"或者class="section"等。

語義化HTML結構到底有什麼好處呢？

1、去掉或樣式丟失的時候能讓頁面呈現清晰的結構

<h1>加粗，字型大小2em;<strong>是加粗的，這不是html的表現而是預設的css樣式。瀏覽器都有預設的樣式，預設樣式的目的是為了更好的表達html語義。可以說瀏覽器的預設樣式和語義化的html標籤是不可分割的。（h1和div的樣式對比）

2、螢幕閱讀器會完全根據你的標記來“讀”你的網頁

例如,如果你使用的含語義的標記,螢幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發音。

3、PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些裝置對CSS的支援較弱）。

4、搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重.

過去你可能還沒有考慮搜尋引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其寶貴的使用者。沒有他們的話,搜尋引擎將無法索引你的網站,然後一般使用者將很難過來訪問.

5、你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

因此,如果頁面檔案的標題被標記,而不是,那麼這個頁面在搜尋結果的位置可能會比較靠後。除了提升易用性外,語義標記有利於正確使用CSS和JavaScript,因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為。
SEO主要還是靠你網站的內容和外部連結的

6、便於團隊開發和維護

W3C給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模組化開發。

參考：https://www.cnblogs.com/p2227/p/3586725.html    http://blog.csdn.net/li2274221/article/details/25188497      http://www.mamicode.com/info-detail-482090.html