語義化這個詞我想大家都看到了無數次，特別是在一些招聘廣告上。其實我自己也是，不過每次看到都覺得是那些招聘公司複製的，其實他們根本說不清語義化是什麼，而且也根本不看重。所以我一直也沒把這東西當回事過。然而最近當我再次看到這個詞時，我想我應該好好思考下這問題了。就寫篇博客記錄下。一、什麼是語義化?在解釋...
語義化這個詞我想大家都看到了無數次，特別是在一些招聘廣告上。 其實我自己也是，不過每次看到都覺得是那些招聘公司複製的，其實他們根本說不清語義化是什麼，而且也根本不看重。 所以我一直也沒把這東西當回事過。 然而最近當我再次看到這個詞時，我想我應該好好思考下這問題了。就寫篇博客記錄下。 一、什麼是語義化? 在解釋這個概念之前，應該先解釋下“結構-表現-行為”。 如果說解耦合是代碼的高境界，那麼“結構-表現-行為”的原則就是前臺的標桿。 隨著前臺代碼的越來越龐大，各部分代碼各司其職的作用就越來越重要了。 眾所周知，前臺代碼是有HTML + CSS + JS來實現的。他們對應的就是負責“結構-表現-行為”。 HTML負責結構。 結構是什麼？簡單理解，結構就是HTML節點的層次、嵌套關係等。舉個例子來說
<header>
<h1></h1>
</header>
<section></section>
<footer></footer>
上面的代碼展示了該文檔結構為 header、section、footer是同級的。然後h1是header的直接子節點，換句話說就是他們之間也就一層的嵌套。
但是，有個問題，看下麵的代碼
<div>
<span style="font-size:16px;font-weight:bold;"></span>
</div>
<div></div>
<div></div>
這段代碼不也展現出了結構嗎？而且顯示效果而上面的沒有區別（這裡我假設H1預設是16px,bold的樣式）,那上面的代碼和這段比起來的優勢是什麼呢？
優勢，其實就在語義化。
第一段代碼不僅展示了結構，而且告訴了我們，是頭部、區域塊、尾部同級，頭部中有個大標題。而第二段代碼，能體現出這些嗎？
所以，給個結論就是 — 語義化就是讓標簽和其所包裹的內容的意思想吻合
二、為什麼要語義化？
我歸納了3點，分開來說把
1.方便機器理解代碼,利於SEO
還拿上面兩段代碼舉例子，第二段代碼，別說機器了，就是人也看不出它表達的意思啊。而第一段代碼無論是人還是機器，都是可以去理解的。
搜索引擎爬蟲理解了你的代碼，你的網站排名自然有加分了。
2.代碼更簡潔，復用性更高。使用合適的標簽，可以少些很多css或者js。
代碼更簡潔：這個顯而易見了。第二段代碼多了樣式的定義，而第一段沒有。
復用性更高：假如這段HTML結構有很多地方用，那麼第一段的適用場景更多。比如第二段代碼固定了16像素加粗，而第一段代碼只是指明這是個h1，你不重寫那麼就用h1樣式，你若重寫了h1，那就用你的。
少寫css：在代碼簡潔那裡說了，就不重覆了。
少寫js：這個可以說說，比如看如下代碼
<!-- 語義化的form -->
<form>
<input type="submit" />
</form>
<!-- 非語義化的form -->
<form>
<a href="javascript:document.forms[0].submit()" >submit</a>
</form>
非語義化form代碼裡面，用a標簽和js實現提交功能。但是呢，一來多寫了js代碼。二來，在語義化的form裡面可以回車提交，用a標簽實現的無法回車提交。當然，你可以再多寫很多js來實現完美模擬，但是這又有什麼意思呢。
3.訪問性更好
這個主要就是針對讀屏器或者其他一些對CSS理解不好的瀏覽器。語義化的HTML可以做到脫離CSS還能看，而非語義化的就難了。
三、如何讓自己代碼語義化？
w3c的驗證並不能驗證你代碼是否語義化，而且也沒有任何工具可以測試你代碼是否語義化。
這說明什麼？這說明你無法通過像學習一門語言一樣解決代碼語義化的問題。
關於如何讓自己代碼語義化，我覺得有個方法可行
首先，你需要掌握常用的標簽，包括標簽代表的含義。可以參考這裡
其次，在你寫html的時候，常常去想想，這麼寫是否滿足了語義化的要求。
最後，經常看一些大公司的網站（特別是新站）、開源項目代碼，我知道大家都會這麼做，但每當你看他們css如何寫的，js如何寫的時候，請抽出一點點時間，看看他們html是如何寫的，思考下為什麼這麼寫。
這樣，我相信慢慢的你的HTML代碼語義化會越來越好。
總之，語義化HTML代碼不是一個可以從不會到會的問題，而是一個不斷改進的問題，不值得一次花大量精力去學習，但是需要每天積累一點來提高的技能。
最後，我相信很多人看完這篇文章的第一反應就是——“哦，原來我一直使用的HTML寫法叫做語義化啊！”
