【第159期 December 8, 2010】
 

研發新視界

新一代的HTML-HTML5

作者/林明軒

[發表日期:2010/11/24]



前言

自從網際網路進入人們的生活後,網際網路的發展不曾停止過。新的技術、規範推陳出新,也讓網路世界越來越豐富。從1991年的HTML,到1999年的HTML 4.01,以及XHTML、CSS、JavaScript、Ajax等技術的出現,讓網路使用者從早期只有簡單的文字、圖片、音效,到現在的使用者互動性以及多采多姿的影片。網路的應用層面越來越廣,也越來越注意使用者互動性和豐富的影音體驗。

但是現今網路的應用如此多元豐富,現行的HTML 4.01(1999的技術)早已不敷使用,網站作者常需要使用其他技術(像是Flash。Youtube也是採用Flash Video格式撥放影片)才能創作出令人眩目的網頁特性和互動性。因此W3C和Web Hypertext Application Technology Working Group (WHATWG)也合作開始針對新一代的HTML(即本文介紹的HTML 5)做設計。HTML5的設計雖然還在進行中,但是針對它已經公開的新功能就已經非常令人期待,而且目前市面上許多的網頁瀏覽器也都已經能夠支援。

HTML 5特色介紹

簡單說,HTML5 即是HTML、XHTML和HTML DOM的新標準。完全針對目前網路應用來做設計,因此現在常見的blog、線上影片等網路應用都有更完善的支援。

一、架構性標籤:

HTML 5新增了一些架構性標籤,讓使用者能夠更方便的設計頁面架構,程式碼的可讀性也更高。


《圖一》傳統HTML 4設計下的2欄式頁面


在HTML4下,div標籤搭配上id及class屬性常被用來設計頁面的版型,但是在越來越複雜的網路呈現形式下,原本的使用方式便容易產生混淆。


《圖二》原本的div已經被新的標籤取代


圖二是HTML5中的呈現方式,HTML5新增了header、nav、article、section、aside、footer標籤來表現網頁,因此瀏覽器可以很明確知道頁面的各個部份。這樣的改變讓程式碼可讀性更高,標籤的語意更加明確。

二、Web Form2.0:

在HTML5裡設計表單變得更加輕鬆了,下面的畫面大家應該都非常熟悉,使用者按下確認submit前必須先檢核使用者帳號和地址兩個必填欄位。


《圖三》


在HTML4時,我們必須先寫好下列的程式碼後,搭配上javascript程式才能夠做欄位檢核的功能。



而在HTML5中,只需要寫好下列的程式碼,透過required屬性即可直接完成欄位檢核之功能,不必再透過script程式的撰寫。



此外input標籤也多了date、time、email等常用資料形式的新屬性。

三、Video及audio標籤:

HTML5針對多媒體播放新增了video、audio標籤,讓使用者不需額外安裝其他軟體和plugin即可順利欣賞影片和音樂。而且新標籤的語法也非常簡潔。其中Video標籤還有一些非常方便的屬性,像是controls屬性可以在影片播放時會影片控制項,像是play鍵。



四、Canvas標籤:

可以讓網頁作者透過JavaScript指令在網頁中繪製2D圖形,也可以透過參數的方式,即時的修改網頁上的圖形。



結語

HTML5在為新一代的網頁設計帶來了全新體驗的同時,也因為架構在舊有的HTML基礎上,開發者能夠很快的熟悉上手。此外針對多媒體播放的支援,讓使用者不需額外安裝第3方軟體或plugin即可欣賞多媒體內容,使得目前市面上許多瀏覽器都已經支援HTML5。YouTube更推出了HTML5的測試版,此外APPLE的iPad更是不支援flash,Steve Jobs也選擇了HTML5。現在HTML5還沒有正式推出,但是再過一、二年,我們可以很樂觀的期待它大放異彩。

參考資料

http://www.w3schools.com/html5/
http://www.alistapart.com/articles/previewofhtml5
http://www.adj.idv.tw/html/60/t-18460.html
http://inspire.twgg.org/c/programming/html-css/html-5-top-5-major-improvement-in.html
http://techreport.com/discussions.x/18403