HTML5開發系列(1-1)
近年來由於Web 2.0網站的興起，使得瀏覽器的開發技術再度成為兵家必爭之地，其中最為關鍵的HTML技術由於經年已久，使得各家瀏覽器大廠亟欲使用更為新穎的技術豐富網頁內容，因此發展出了HTML5這項技術，在HTML5中包含了多媒體內容的支援、互動功能、更為智慧型的表單標籤、以及更佳的語意標籤等支援，本文將會探討HTML5的發展歷史及基本功能，並說明HTML5最主要的變更以及XHTML目前的狀態，最後則會說明目前可用來開發HTML5的工具。
首先必須先解釋HTML的全名，所謂的HTML即為Hypertext Markup Language，而HTML5想當然耳就是[第五代]的Hypertext Markup Language，就字面上的意義來說沒錯，但HTML5包含的內容遠勝於[第五代]這個版本所代表的意義，其不僅是目前HTML相關規格最新發展的技術，同時也是目前豐富的網頁功能所需要的各種最新技術的集合。
在2005年出現了AJAX一詞之後，許多標榜Web 2.0的網站也如雨後春筍般的出現在世人的眼前，Web 2.0與過去只能唯讀內容的網站最大的差別在於其允許群眾主動參與其內容的編輯和互動，然而這樣的特性卻是傳統HTML技術所無法滿足的，而這也是許多網頁開發人員在發展Web 2.0網站遇到的最大瓶頸之一。
若查看目前在W3C網站上關於HTML的規格將可發現，自從1999年發行HTML 4.01之後再也沒有更新版本釋出，而在若干年之後，W3C將重點轉移至XHTML 1.0/2.0上，主要目的是要提供一個以XML為基礎的HTML規格，使得其在實作上會更加嚴謹並達到更為一致的編碼規範，由於以XML為基礎為強制網頁開發人員必須要編寫出完全符合規範的網頁，否則瀏覽器在驗證網頁成功之前將不會顯示網頁的內容，整體而言W3C的立意良好，若這個目標能夠成功實現未來所有的網頁內容將會是符合規範並具有語意的，但實際上這些規格並沒有被廣泛地採用，主要原因在於瀏覽器廠商、網頁開發人員和一般使用者的使用習慣無法被加以限制，最終結果使得這些規格只能曲高和寡。
因此在Web 2.0一詞被發明出來且有越來越多的網站開始透過各種技術來發展其中的功能的過程，XHTML規格開始遭遇到各種的批評，由於為了要讓某些不支援XHTML網頁的瀏覽器也能夠正常顯示網頁內容，網頁開發人員會將使用XHTML編寫的網頁以MIME type “text/html”來顯示，如此一來瀏覽器將會把這些網頁視為普通的HTML內容來加以顯示，而不會以XML的語法去驗證判斷網頁內容是否全部符合標準，這種方式可以讓大部分的網頁內容都能讓各種瀏覽器來顯示，但實際上其實已經喪失了XHTML的本質。
在2004年的時候一個由各家瀏覽器廠商代表成立了WHATWG團體，其目標與W3C組織類似，主要是發展HTML相關規格，但其採取了與W3C完全不同的方向，過去W3C希望HTML的規格能夠以非常嚴謹的方式進行開發，但WHATWG認為現實生活中多數瀏覽器和網頁是以鬆散的方式在運作，因此網頁標準應該是以循序漸進的方式逐步改進，且最重要的是要維持與過去HTML版本的向前相容性。直到2007年三家瀏覽器廠商，分別是Mozilla Foundation、Apple和Opera要求W3C採用WHATWG對於HTML發展的成果，在W3C接受了該成果之後最後發表了HTML 5這項規格，此外W3C也在相同時間決定不再繼續發展XHTML 2，並將資源改為投入在發展HTML5上，圖 1即為1990至2009年間HTML規格發展的歷史。


▲ 1990至2009年間HTML規格發展的歷史

然而這是否代表著HTML5已經是一個發展完成的規格？實際上到目前為止HTML5仍然持續著被WHATWG和W3C共同發展，而根據HTML5主要編輯Ian Hickson所述(http://tinyurl.com/42y2x3u)，直到2022年前最終版本的HTML5建議規格書都不會被正式發表，但這並不代表瀏覽器廠商和網頁開發人員在這之前無法使用HTML5，在HTML5發展過程已經有越來越多廠商將相關技術整合到瀏覽器中，這些技術會持續地繼續演進並被收錄到HTML5規格，和Web 2.0的精神類似，HTML5將會是以群體的力量來主動發展，而非像過去Web 1.0是以某些團體或廠商來主導的HTML技術。
在概括HTML5的技術之後，接著可以看看在HTML5中究竟涵蓋了什麼內容，首先可以查看如程式1所示的HTML5原始碼，將其儲存為index.html檔案，並使用瀏覽器來加以瀏覽即可發現這就是一個純粹的HTML5網頁，這樣的網頁與過去的HTML比較起來更為簡潔，而在其中可看到組成網頁的三大元件，分別是元素(Element)、屬性(Attribute)、內容(Text)。
程式1

元素
元素其實就是HTML縮寫中所代表的M(Markup)，其作用是指示瀏覽器要如何處理內容，每一個元素都會有一個關鍵字，諸如body、div、br等，這些元素會用來定義內容主體、區塊、換行等功能，不同的元素會定義不同的行為，如建立連結、嵌入影像或聲音等，大部分的元素都可以再包含不限個數的元素，而透過這樣的功能，將能夠組成一個完整的網頁文件。
如程式2所示，我們在一個DIV元素中包含了多個其他HTML元素，諸如P、SPAN、TABLE、TR、TD等，每一個元素都會有開頭和結尾，請注意理論上開頭和結尾的元素應該都是要對稱編寫的，如果開頭和結尾的元素沒有加以對稱將會是不適當的內容，且文件內容更為複雜的時候這些元素的階層關係將會無法清楚的判斷，雖然多數的瀏覽器都還是能夠解析元素沒有對稱的網頁內容，但實務上建議開發人員在設計網頁時盡可能透過工具的輔助，編寫出良好對稱的網頁。
除了以對稱結構顯示的元素內容之外，在HTML規格中也提供了一些空元素，其代表著不包含內容的元素，在編寫十只要以一個元素加上斜線(/)結尾便可成為一個有意義的元素來處理網頁內容，這種空元素還可以加上下文會提及的屬性來加以修飾，使其可以搭配屬性的內容產生不同的動作，常見的空元素如img、br、hr、input等。
程式2

屬性
屬性會出現在開頭元素的標籤區塊中，一個元素中可能會包含多個屬性可供設定，主要是作為變更元素所產生的行為，在設定屬性時使用的語法為key/value，因此一個屬性在一個元素中只能被設定一次，若重複使用相同的屬性值來設定元素將只會使用一個屬性值來作用，在HTML5中同時支援了HTML和XHTML的語法來設定屬性，使用HTML的語法時屬性值不一定要用雙括號來涵蓋，但在XHTML中則規定要使用雙括號來涵蓋，通常建議設定屬性值時以雙括號來涵蓋會較為清楚。
設定屬性值時有下列注意事項：
• 屬性名稱不區分大小寫，但屬性值有區分大小寫。
• 屬性值在元素標籤中可以出現在任意順序。
• 在設定key=value時，等於符號(=)前後可以加上空白符號。
• 屬性值應該以雙括號或者單括號來包含，請注意開頭或者結尾都必須要使用一致的雙括號或者單括號。
• 元素的屬性值可以被設計為擁有預設值，因此如程式3所示的寫法全部都代表相同意義。
程式3

內容
網頁的結構除了上述的元素和屬性之外，最重要的當屬真正要顯示給使用者瀏覽的內容，網頁的內容是以DOM物件模型來呈現(圖 2)，所謂的DOM是一種表示網頁內容的標準化方式，內部使用樹狀資料結構來組成彼此連接的節點，此處所稱的節點表示在網頁中的元素、屬性和文字內容，透過DOM的樹狀結構，DOM可用來描述節點之間是如何進行巢狀結構組成的方式。
在網頁中要處理DOM和節點可以使用JavaScript並以物件的方式來呈現，
如此一來，網頁開發人員便可透過JavaScript來存取網頁上的特定元件，此外也能夠在該節點進行樹狀結構的巡覽來找尋需要的節點，舉例而言，我們可以將整個網頁都以DOM的方式來視為一個物件來處理，由於在網頁中會包含head和body元素，因此在該網頁物件中可以找到一個head和body物件，
若要存取body元件，可以使用語法如JavaScript:document.body。
在取得需要的網頁元素所表示的物件之後，接著便可透過JavaScript的命令來存取與該物件相關聯的節點，舉例而言，若要存取網頁中第一個元素，可以使用document.body.firstElementChild，若要存取該元件的第一個屬性，則可使用document.body.firstElementChild.attributes[0]，請注意在HTML中的陣列索引都是以0作為起始值。 在圖 2可以看到網頁元素最上方是window，該物件表示的是瀏覽器本身，因此我們在存取網頁元素時通常都會先存取根元素window，接著再存取底下所包含的各種元素。
除了使用JavaScript以程式設計的方式來存取網頁元素之外，若要觀察網頁元素的組成可以透過一個線上網站Websites as graphs(http://tinyurl.com/jpo8a)，該網站的作用是將一個網頁的所有元素以圖形化的方式來呈現，並藉此了解網頁整體元素所組成的狀況，如圖 3所示為RUN!PC網站所呈現的結構，在圖中會以各種顏色來表示網頁元素：
• 藍色：超連結(A)
• 紅色：表格(TABLE、TR、TD)
• 綠色：DIV
• 紫色：圖片(IMG)
• 黃色：表單(FORM、INPUT、TEXTAREA、SELECT、OPTION)
• 橘色：換行和區塊(BR、P、BLOCKQUOTE)
• 黑色：HTML根元素
• 灰色：其他

▲ 網頁元素最上方是window，該物件表示的是瀏覽器本身


▲ 在圖中會以各種顏色來表示網頁元素