論HTML5—part1：HTML5概論 @ 劉逸的留意世界

好久沒有提一系列的IT技術了，我想該收收心回歸技術介紹的時間到了，就談談HTML5吧。HTML5算是個老議題了，但總是一直發酵，主要的原因是他在未來的行動紀元中，網頁開發的技術將是不可或缺的一員。最近對於HTML5有好消息也有些壞消息，好消息是：gartner研究調查機構發部的2013年十大科技中HTML5排名第二；壞消息是：fb跳出來說明採用HTML5是錯誤的決定。那麼多的大廠跟研究機構爭相討論之，背後代表他具備了『不可抹煞的價值』，否則沒有人會正視之。接下來幾篇中，將針對HTML5做些介紹，有興趣的可以參考參考～

HTML4只是網頁資料呈現的標記語言，僅此而已。之前瀏覽器主要採用的超文字標記語言(簡單來講就是瀏覽器看的懂得標籤語言)，為HTML4格式。HTML4會利用標籤也就是”tag”，將要呈現的內容用tag包含住，以利瀏覽器可以解譯並呈現之。舉例而言：<h4>價格：500元</h4>，上述的<h4>是呈現的字型大小的標籤，裡面的內容為”價格：500元”，但試想『價格：500元』這是需要人才看的懂。所以之後開始有人要求需要有語意的概念在其中，否則企業間一直想做到的EDI(也就是自動化的電子資料交換)，只要電腦無法解讀內容，那整個服務勢必要加入人的要素，為了避免人的參與，XML開始衍生而來。

XML賦予內容意義的『延伸標記語言』。這種標記語言並非用來取代HTML4，而是用來跟他加以互補，針對上述的內容<h4>價格：500元</h4>，如果利用XML的自訂標籤的方式可以這樣定義<price unit=”NT”>500</price>，這樣的定義開始可以被電腦來解譯，當看到price可以知道是價格，另外單位是台幣(NT)，而金額是500。試想，若這是一筆訂單，那電腦可以直接接單並轉拋到資料庫中，之後就直接往下一個流程走了，過程中人不再介入，從此人為疏失的機會瞬間為零。這就是XML為電腦內容傳輸，賦予內容內涵後，帶來得巨大轉變。

若XML為內容帶來語意，那HTML5將為網頁的版面賦予意義。在HTML4中如果有頁首、頁尾、功能列、內容、標題…等等。我們往往只能用<div>的標籤來切割，注意就電腦來說，不管看到的內容處於哪一個區塊，電腦將不得而知，畢竟都屬於在div之內。有人會問，這樣哪裡不好？以下就兩個層面回答：1.在資訊爆炸的世代，搜尋往往不夠精準，因為無法區隔你是要針對標題、內文、頁首、頁尾或其它區塊做特定搜尋，這對搜尋者是一大困擾。2.多元裝置的世代來臨，每個顯示器的大小差異越來越多，從3、3.3、3.5、4、4.3、4.7、4.8、5、5.3、5.5、7吋…等等(其餘省略)，這麼多種大小裝置都可上網，面臨的是頁面的取捨，哪些要，哪些不要，哪些的格式要變成什麼等等，如果區塊有具備語意，那日後的裝置將可以自動辨識，便且自己給予預設的最佳化顯示方式，如此對開發者也是一大福音。為此，HTML5中開始增加了<header>、<footer>、<aside>、<selection>、<nav>…等等，對於往後的網頁版面配置，只要看到這些標籤就可以知道他座落的區塊於何處，將來你可以特別針對內文有”iPhone5 function list”做搜尋，或針對忽略<header>、<footer>區塊…等各式各樣更精準的搜尋跟選擇性的呈現方式。