語義化這個詞我想大家都看到了無數次，特別是在一些招聘廣告上。
其實我自己也是，不過每次看到都覺得是那些招聘公司復制的，其實他們根本說不清語義化是什么，而且也根本不看重。
所以我一直也沒把這東西當回事過。
然而最近當我再次看到這個詞時，我想我應該好好思考下這問題了。就寫篇博客記錄下。
一、什么是語義化?
在解釋這個概念之前，應該先解釋下“結構-表現-行為”。
如果說解耦合是代碼的高境界，那么“結構-表現-行為”的原則就是前台的標桿。
隨着前台代碼的越來越龐大，各部分代碼各司其職的作用就越來越重要了。
眾所周知，前台代碼是有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寫法叫做語義化啊！”
轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途