Web語義化

對於「web語義化」這個詞語我相信只要是從事前端的人都不陌生，固然我對這個詞語也是很是熟悉，我相信從事前端工做的同事在投簡歷時都會在招聘需求裏面看到這句話：「對web語義化有深入的理解」，那麼到底什麼是web語義化？它有什麼做用？現將我本身收集整理的資料與你們分享一下：
什麼是web語義化
現在互聯網都到了web2.0的時代了，HTML語言在不斷的進化併發揮着愈來愈重要的地位；而咱們製做網頁也從當初的table表格嵌套發展到了 div+css，這是進步的標誌。然而，咱們彷佛看到了一個不太好的現象：整個網頁大量的使用div標籤進行分隔頁面內容，有的甚至整個頁面只有div一 種html標籤存在。這種現象(使用習慣)很是的很差，濫用現象使得網頁製做彷佛就只剩下了div。剛纔說了，時代是在進化着的，因此，誕生了web語義化 這個概念。而它又包含兩個方面：html語義化及css命名語義化。
首先抽象的說下語義（Semantic）的概念：「語義能夠簡單地看做是數據所對應的現實世界中的事物所表明的概念的含義，以及這些含義之間的關 系，是數據在某個領域上的解釋和邏輯表示。」那麼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語義化？
一、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) 很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。
二、css命名語義化
通常而言，CSS類名的語義化聲明方式應當考慮頁面中某個相對元素的」用意」，獨立於它的「定位」或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。


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

如今咱們想把頁面中的元素調換一下位置，若是咱們使用的是結構化方式(1)，那麼咱們就要把全部css類名從新進行定義，由於它們的位置變了。在佈局(3)中，咱們看到元素都倒轉了: right-bar 如今成了 「left-bar」，而 left-content 成了 「right-content」。若是你使用語義化方式則避免了此類問題。

換句話說，使用語義化方式的話，咱們在修改網站佈局的時候能夠僅僅修改相關CSS類的屬性便可，而不用修改它們的類名了，若是網站的代碼很龐大，這將節省大量的時間。