對於“web語義化”這個詞語我相信只要是從事前端的人都不陌生，當然我對這個詞語也是非常熟悉，我相信從事前端工作的同事在投簡歷時都會在招聘需求裡面看到這句話：“對web語義化有深刻的理解”，當然我本人也是從某公司的招聘需求裡看到的這個詞語，那麼到底什麼是web語義化？它有什麼作用？現將我自己收集整理的資料與大家分享一下：

• 什麼是web語義化

如今網際網路都到了web2.0的時代了，HTML語言在不斷的進化併發揮著越來越重要的地位；而我們製作網頁也從當初的table表格巢狀發展到了 div+css，這是進步的標誌。然而，我們似乎看到了一個不太好的現象：整個網頁大量的使用div標籤進行分隔頁面內容，有的甚至整個頁面只有div一 種html標籤存在。這種現象(使用習慣)非常的不好，濫用現象使得網頁製作似乎就只剩下了div。剛才說了，時代是在進化著的，所以，誕生了web語義化 這個概念。而它又包含兩個方面：html語義化及css命名語義化。

首先抽象的說下語義（Semantic）的概念：“語義可以簡單地看作是資料所對應的現實世界中的事物所代表的概念的含義，以及這些含義之間的關 系，是資料在某個領域上的解釋和邏輯表示。”那麼web語義化也可以簡單的理解為：用特定的語言來定義特定的事物。

• 為什麼要web語義化？

首先，人可以通過視覺的劃分判斷內容的語義,搜尋引擎看到的只是程式碼。搜尋引擎只能通過標籤來判斷內容的語義。因為頁面的很大一部分流量是來自搜尋引擎的，要使頁面儘可能地對搜尋引擎友好，所以就要儘可能地使標籤語義化。

以前以我對web開發的粗淺理解，覺得寫一個好的符合標準的頁面只需要把結構和表現分離，然後不要使用table，p等標籤就行了，至於通篇都是div我也不會覺得有什麼問題，因為CSS很強大。但是，所有的標籤都是有自己的語義的，下面給出一部分標籤的語義：

div 語義：Division(分隔)

span 語義：Span(範圍)

ol 語義：Ordered List(排序列表)

ul 語義：Unordered List(不排序列表)

li 語義：List Item(列表專案)

…………

如果無視標籤語義和預設樣式，所有標籤都用div，其實也是可以寫出來視覺效果很好的頁面，只要你靈活運用CSS。但是那樣的話雖然視覺上達到了要求，但是整個頁面一點語義都沒有，搜尋引擎還是看不懂。所以，要記住：

結構(html)才是重點，樣式(css)是用來修飾結構的。所以，要先確定html，確定標籤，再來選用合適的css

 其次，SEO的時候我們經常用h1來突出標題，用strong來突出關鍵字，這確實就是語義化的體現。就目前的搜尋引擎來說並不能想訪客那樣很直觀的去檢視網頁，它只有分析原始碼來體現或猜測網站要表達的內容。比如我們想表達某篇文章的標題， 我們或許會這樣寫：

<div id=”title”>文章的標題</div>

訪客或許能理解我們的意思，但搜尋引擎就要反覆揣摩了，更好的討好搜尋引擎我們可以這樣來寫：

<h1>這是標題</h1>

小提示：h1擁有最高的權值，在一個頁面中最好指使用1個h1來突出你的內容，太多的h1會分散其整個頁面的權重，對搜尋引擎也是非常的不友好。

當然語義化還有其他優勢：

正如上面那個例子，語義化的程式碼更小，下載也就更快了。另外語義化程式碼也能夠更加快速的幫助新的前端工程師理解我們的程式碼。語義化程式碼也更能幫助視障的人通過裝置來理解我們的內容等等。當然語義化程式碼也是我們能力的體現。

• 怎樣進行web語義化？

1、html語義化

一個 html元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓css使一個html元素看起來就像另一個html元素，比如用<div>來代替<p>標記標題。簡而言之，就是你在看到內容的時候想想用什麼標籤能更好的描述它，是什麼就用什麼標籤。很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。<strong> ,<em> 用來區別於其他文字，起到了強調的作用。至於列表<ul>、<ol>等和表格<table>很明顯的告訴你他們是做什麼的。如：

<Hx>

<h1>、<h2> 、、<h5> 、<h6>，作為標題使用，並且依據重要性遞減。<h1>是最高的等級。

<p>

段落標記，知道了<p> 作為段落，我們就不會再使用 <br/> 來換行了，而且不要 <br/> <br/> 來區分段落與段落。<p> 中的文字會自動換行，而且換行的效果優於 <br> 。段落與段落之間的空隙也可以利用css來控制，很容易而且清晰的區分出段落與段落。在利用行高 (line-height) 很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。

2、css命名語義化

一般而言，CSS類名的語義化宣告方式應當考慮頁面中某個相對元素的”用意”，獨立於它的“定位”或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。

讓我們看看下面這個例子：

…而現在我們想把頁面中的元素調換一下位置，如果我們使用的是結構化方式(1)，那麼我們就要把所有css類名重新進行定義，因為它們的位置變了。在佈局(3)中，我們看到元素都倒轉了: right-bar 現在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。

換句話說，使用語義化方式的話，我們在修改網站佈局的時候可以僅僅修改相關CSS類的屬性即可，而不用修改它們的類名了，如果網站的程式碼很龐大，這將節省大量的時間。

參考網站：