關於HTML語義化的一些理解

語義化這個詞我想你們都看到了無數次，特別是在一些招聘廣告上。

其實我本身也是，不過每次看到都以爲是那些招聘公司複製的，其實他們根本說不清語義化是什麼，並且也根本不看重。

因此我一直也沒把這東西當回事過。

然而最近當我再次看到這個詞時，我想我應該好好思考下這問題了。就寫篇博客記錄下。

 

 

1、什麼是語義化?

在解釋這個概念以前，應該先解釋下「結構-表現-行爲」。

若是說解耦合是代碼的高境界，那麼「結構-表現-行爲」的原則就是前臺的標杆。

隨着前臺代碼的愈來愈龐大，各部分代碼各司其職的做用就愈來愈重要了。

衆所周知，前臺代碼是有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的樣式）,那上面的代碼和這段比起來的優點是什麼呢？

 

優點，其實就在語義化。

第一段代碼不只展現告終構，並且告訴了咱們，是頭部、區域塊、尾部同級，頭部中有個大標題。而第二段代碼，能體現出這些嗎？

 

因此，給個結論就是 — 語義化就是讓標籤和其所包裹的內容的意思想吻合

 

 

 

2、爲何要語義化？

我概括了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還能看，而非語義化的就難了。

 

 

3、如何讓本身代碼語義化？

w3c的驗證並不能驗證你代碼是否語義化，並且也沒有任何工具能夠測試你代碼是否語義化。

這說明什麼？這說明你沒法經過像學習一門語言同樣解決代碼語義化的問題。

關於如何讓本身代碼語義化，我以爲有個方法可行

首先，你須要掌握經常使用的標籤，包括標籤表明的含義。 能夠參考這裏

其次，在你寫html的時候，經常去想一想，這麼寫是否知足了語義化的要求。

最後，常常看一些大公司的網站（特別是新站）、開源項目代碼，我知道你們都會這麼作，但每當你看他們css如何寫的，js如何寫的時候，請抽出一點點時間，看看他們html是如何寫的，思考下爲何這麼寫。

這樣，我相信慢慢的你的HTML代碼語義化會愈來愈好。

總之，語義化HTML代碼不是一個能夠從不會到會的問題，而是一個不斷改進的問題，不值得一次花大量精力去學習，可是須要天天積累一點來提升的技能。

 

 

最後，我相信不少人看完這篇文章的第一反應就是——「哦，原來我一直使用的HTML寫法叫作語義化啊！」

 

 

 

轉載本站文章請註明做者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途