HTML5有兩大特點：首先，強化了Web網頁的表現性能。其次，追加了本地數據庫等Web應用的功能。

廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對于需要插件的豐富性網絡應用服 務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效增強網絡應用的標準集。

目前HTML5已向開發人員提供了很多新的標簽，如section，nav，article，header和footer等。這些標簽語義化程度高，會被經常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。

一、HTML5標簽在瀏覽器展示存在的問題

對于現階段來說，使用HTML5標簽可能遇到的最大問題就是如何在不支持新標簽的瀏覽器中做恰當的處理。當我們在頁面中使用HTML5元素時，可能會得到三種不同的結果。

結果1：標簽被當作錯誤處理并被忽略。那么DOM構建的時候，就會當作這個標簽不存在。

結果2：標簽會被當作錯誤處理，并在DOM構建的時候依然會按照預期的代碼進行創建，并且HTML標簽會被構造成行內元素（也就是說雖然不能識別，但是代碼里section標簽依然會在dom中創建一個對應section節點，但是屬于行內元素）。

結果3：標簽被識別為HTML5標簽，然后用DOM節點對其進行替換。DOM在構建的時候和預想的一致，并且合適的樣式會應用到標簽上（大部分情況下是塊級元素）。

有一個具體的例子，大家思考一下下面的代碼：

很多瀏覽器（比如Firefox 3.6和Safari4）解析的時候都會將div作為最外層的元素，然后div里面是一個識別不了的元素（section），它會在DOM中創建，并被作 為一個行內元素存在。h1和p元素都是作為section元素的子節點。因為section在DOM中真實存在，所以也可以修改其樣式。這種情況對應結果 2。

IE9之前的版本會認為section標簽是一個錯誤，并直接將其忽略，那么h1和p標簽會被解析，然后成為div標簽的子節點。也會被認為是一個錯誤并直接跳過。在這些瀏覽器中實際有效的代碼是這樣的：

那么，舊版本的IE瀏覽器除了生成的DOM結構和其他瀏覽器不一樣，其對不可識別標簽的容錯能力還是很棒的。因為section節點沒有在DOM樹中構建，所以也就不能給其增加樣式。這種情況對應結果1。

當然，支持HTML5的瀏覽器比如IE9，Firefox4+，Safari5+會創建正確的DOM結構，然后這些標簽會默認附帶HTML5規范中定義的默認樣式。

那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結構，并且含有不同的樣式。

二、如何解決HTML5標簽不兼容

或許會有很多人在質疑：為什么老式的瀏覽器不能識別這些標簽？其實錯不在瀏覽器，因為在那個時代根本不存在這種標簽，所以不能正確識別出來，而這種不尋常 的標簽識別令DOM結構變得異常。對此，人們想出了很多在現階段頁面中使用HTML5元素的解決方案。每一個解決方案為了做到兼容都會遇到一些特定的問題。跟大家分享一下：

1、實現標簽被識別

我曾做個一個測試（以IE8為例），是一個文章標題和藍色字的文章內容，其中文章內容用了article標簽。代碼如下：

還有一些方法，比如嘗試使用和Tanteck方案相反的技術，也就是把HTML5元素放在div元素內部，例如：這個方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個技術的支持者認為他的一致性很好（適用于所有的元素，包括）。但是DOM結構的不同讓這個方案意義變得不大。他的主要優勢是技術上的一致性。