語義化！

HTML5中新加入了更加具有語義的標籤，比如 header, section, footer, figure等。為什麼要進行語義化？最重要的可能還是為搜尋引擎優化，讓爬蟲能更好地理解網頁結構。前端工程師需要做的就是選擇適合的標籤，將內容轉換成瀏覽器認識的語言。

HTML5網頁的典型結構

而在當下，做語義化還存在障礙：

• 除了專業的人外，沒人會關注標籤是否使用得有語義
• HTML的標籤還不足以表達所有可能的語義
• 語義化會需要增加一些額外的程式碼

鬼（CSS森林）曾經說過，外行看熱鬧，內行看門道，我們寫的頁面並不是所有人都會去看原始碼的，為什麼還要注意那麼多東西呢？使用者只是看到了一小部分，我們是內容的傳播者，我們儘可能的讓更多的使用者更容易的從網際網路獲取資訊，同時這裡還是給懂得點右鍵“檢視原始檔”的人佈道。從自身發展來說，如果想在這個行業內有所建樹，專業化是必須的。

解決方案

扯了那麼多，還是回到我們的問題，IE9以下舊版本瀏覽器不支援新的語義化標籤。一種解決方案就是用js將HTML5增加的標籤創建出來，就像下面這樣。

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
</script>

實際上已經有人這麼做了並分享在Google code project上方便大家直接呼叫。於是，我們可以使用IE條件註釋來呼叫這個js檔案，這樣像FireFox等非IE瀏覽器就會忽視這段程式碼，也就不會有無謂的http請求了。

<!--[if lte IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上程式碼一定要放在head部分，因為IE必須在元素解析前知道這個元素，所以這個js檔案不能在其他位置呼叫，否則失效。