今天在珞珈山水BBS看到一個帖子,有同學建議學校宣傳部門對武漢大學官網首頁進行重構。這不禁讓人感慨不已,前端技術一直都在不斷向前發展,幾年前流行的table框架現在已經被div+css所取代,web2.0時代的到來更是令javascript技術得到廣泛應用,而當下HTML5、CSS3則正風起雲湧一片蓬勃。語義化標籤是HTML5引入的一個重要概念,目前現代瀏覽器都已經支持了這個特性,可惜的是IE系列9.0以下版本無法識別語義化標籤,導致頁面在這些版本IE下顯示錯亂。

語義化!

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

HTML5網頁的典型結構

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文件不能在其他位置調用,否則失效。

查看演示Demo

參考鏈接:
http://lefter.net/blog/ie_html5/
http://remysharp.com/2009/01/07/html5-enabling-script/