使用Dojo的Ajax應用開發進階教程，第2部分: 富含語義的HTML

相關文章：使用Dojo的Ajax應用開發進階教程，第1部分

HTML 是開發 Web 應用程式的基礎。目前已經有數以千億的使用 HTML 語言編寫的網頁。HTML 語言的規範也不斷在演化和更新。HTML 語言雖然上手比較簡單，但是如何開發出組織良好、結構清晰和可維護性高的 HTML 文檔，對很多Web開發人員來說，也是一個值得探討的話題。隨著 Ajax 應用的流行，一種稱為“富含語義的 HTML（Semantic HTML）”的最佳實務，逐漸被廣大 Web開發人員所推崇。這種實踐的主要思想是還 HTML 以本來面目，只使用 HTML 來描述文檔的結構，而把與展示相關的部分從 HTML 文檔中剝離出去，交給 CSS 來處理。本文將詳細介紹這一最佳實務，涉及的內容包括 HTML 規範的演化曆史、推薦使用的 HTML 元素和屬性、一系列具體的最佳實務和微格式。

下面從富含語義的 HTML 的簡要介紹開始，所涉及的內容包括 HTML 規範曆史以及它與 CSS 和 JavaScript 的關係。

富含語義的 HTML 介紹

富含語義的 HTML（Semantic HTML）指的是編寫 HTML 文檔的一種很好的實踐。這種實踐要求在編寫 HTML 文檔時，儘可能的使用 HTML 規範中定義的與文檔結構相關的富含語義的元素，而避免使用與展示相關的元素，將展示相關的內容交給 CSS 去處理。通過應用這種實踐，可以將 HTML 文檔的結構與展示分離，使兩者達到鬆散耦合。這種鬆散耦合帶來的好處是使得結構和展示可以分別獨立變化，不會雜糅在一起。當只需要修改 Web 應用程式的外觀時，理想情況下，Web 應用程式的 HTML 文檔都不需要修改，只需要修改 CSS 檔案即可。

Ajax 應用的流行，從一個方面推動了這種實踐的流行。目前的 Web 2.0 應用都要求快速上線，並且以漸進的方式不斷推出新功能，即所謂的“永遠 beta 版（perpetual beta）”。這種需求對於 Web 應用程式的架構有比較高的要求。只有在各個部分鬆散耦合的情況下，快速添加新功能或改進已有功能才是可能的。富含語義的 HTML 的實踐促進了 Web 應用程式的鬆散耦合，因此越來越被廣大 Web 開發人員所接受。另外，HTML 語言自身的演化發展，也從一個側面反映出了這個趨勢。下面將從簡要介紹 HTML 語言的曆史開始，並介紹富含語義的 HTML 與 CSS 和 Ajax 應用的關係。

HTML 的曆史

HTML 語言從誕生之日起一直在不斷演化，其規範的版本也有很多。HTML 的發展曆史可以簡要地概括如下。

HTML 最初的草案 HTML 最早使用在歐洲核子能研究機構中，用來方便研究人員使用和共用文檔。在 1991 年出現的關於 HTML 的最早的說明中，HTML 中共包含 22 個元素，其中的 13 個保留到了 HTML 4 中。由於 HTML 最初是用來描述科學文檔的，這 22 個元素基本都是用來描述文檔的結構的。比如 <a> 用來表示文檔之間的超連結；<p> 表示文檔中的段落；<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 用來表示不同層級的標題。 HTML 2.0HTML 2.0 規範在 1995 年 11 月發布為 RFC 1866。2.0 規範中增加了 <img> 和與表單提交相關的 <form>、<input> 和 <select> 等元素。HTML 3.2HTML 3.2 規範在 1997 年 1 月作為 W3C 的推薦規範發布。正是在這個版本中，由 Netscape 和微軟的 Internet Explorer 引入的很多與展示相關的元素被正常化。這些元素包括 <font>、<basefont>、<strong>、<strike>、<u>、<b> 和 <center> 等。這些元素使得 HTML 頁面的結構與展示被雜糅在一起。HTML 4.01HTML 4.01 規範在 1999 年 12 月作為 W3C 的推薦規範發布，並於 2000 年 5 月成為國際標準。HTML 4.01 規範試圖解決 HTML 3.2 規範中引入的與展示相關的元素的問題，與此同時，又需要考慮規範的向後相容性。HTML 4.01 規範把許多與表示相關的元素標記為廢棄的，不推薦使用。同時引入了三種“風格（flavor）”。在“嚴格（Strict）”風格中，廢棄的元素是不能使用的；在“過渡性（Transitional）”風格中，廢棄的元素是可以使用的；在“架構（Frameset）”風格中，只允許使用與架構相關的元素。HTML 5作為 HTML 規範的下一個版本，HTML 5 引入了更多富含語義的元素，如 <nav> 表示網站的導覽列，<section> 表示文檔中的章節；與此同時，在 HTML 4.01 中被廢棄的一些元素，如 <center> 和 <font> 等被移除了。

從上面列出的 HTML 規範的曆史中可以看出，HTML 從僅包含表示文檔結構的元素，到後來引入了與展示相關的元素，再到目前兩者並存，以及下一個版本中展示相關的元素部分被移除。HTML 規範的發展趨勢是與展示相關的元素將逐步消失。HTML 文檔應該描述文檔本身，而不應該描述文檔如何展示給使用者。HTML 規範的發展以一種螺旋式上升的方式實踐著這個最初的目標。

富含語義的 HTML 與 CSS

在 HTML 中，與展示相關的元素的引入，主要是由於當時並沒有好的方式來指明 HTML 文檔中元素的樣式。比如將一段文本用加粗或傾斜的字型來顯示。在 CSS 廣泛應用之前，只能通過 HTML 元素或屬性來實現。由此引入了 <b> 和 <i> 這樣的元素。隨著 CSS 規範在瀏覽器中得到廣泛的支援，Web 開發人員有了更好的方式來指明 HTML 文檔中元素的樣式。比如將一段文本加粗顯示可以使用 CSS 文法 {font-weight : bold;} 來實現。正是由於 CSS 的出現與流行，富含語義的 HTML 實踐才成為可能。

富含語義的 HTML 與 Ajax 應用

目前 Ajax 應用非常流行，越來越多的應用採用 Ajax 技術來提高自身的使用者體驗。Ajax 雖然是基於原有的 HTML、JavaScript 和 CSS 等技術，但是它重新定義了這三種技術在 Web 應用程式開發中的定位。一個典型的 Ajax 應用的結構如 圖 1 所示。

圖 1. Ajax 應用的典型結構圖

在 圖 1 中可以看到，Ajax 應用由三個部分組成，分別是結構、展示和行為。結構指的是應用的基本內容結構，由 HTML 來描述；展示指的是應用的外觀，包括顏色、字型大小等樣式，由 CSS 來描述；行為指的是應用與使用者的互動，包括介面的部分重新整理、處理與伺服器端的互動等，由 JavaScript 來描述。在這三個部分中，由 HTML 描述的文檔結構是整個 Ajax 應用的基礎，CSS 通過各種選取器為文檔應用樣式，而 JavaScript 則通過 DOM 操作來修改文檔結構。

富含語義的 HTML 為 Ajax 應用提供了描述結構的最佳方式。在開發 Ajax 應用時，從一系列富含語義的 HTML 文檔出發，將為後面的開發打下良好的基礎。HTML 規範中元素和屬性眾多，而富含語義的 HTML 的實踐則推薦使用 HTML 規範中表示文檔結構和富含語義的元素和屬性。下面將詳細介紹這些推薦使用的元素和屬性，同時也會討論那些不建議使用的與展示相關的元素和屬性，並說明如何用 CSS 替換它們。