HTML5不僅加強了對多媒體的支援,還新增了canvas畫布,實現了在網頁上繪圖的功能,開發者也能利用HTML5提供的API,開發網頁應用程式
由W3C負責制定的HTML是用來編寫網頁的標記語言,而目前我們所使用的版本為4.01。如果開啟網頁的原始檔查看,會發現到很多類似<html>這樣由<及>符號包含文字的標籤,這就是HTML語言。其實說穿了,網頁就是一堆標籤的組合。
HTML標籤通常都有起始標籤與結束標籤,例如<html>與</html>,而要構成一個網頁,最基本的標籤有<html>、<head>、<title>與<body>。<html>及</html>一定是放在程式的第一行與最後一行,告訴瀏覽器這是一份HTML文件。而<head>則是檔頭宣告,定義這一個網頁的屬性,例如使用何種編碼方式,裡面的內容除了<title>外,不會出現在網頁上。title標籤被包含在head內,主要是顯示網頁標題,裡面的文字會出現在網頁最上方的標題欄。而<body>標籤的內容則是要呈現在網頁上的資訊。
由於HTML 4.01只能傳達文字或圖片等的靜態資訊,於是為了讓網頁能有動態的效果,開始出現了像JavaScript語言這樣的技術,達成與使用者互動的目標,後來還出現像DHTML、XHTML等標準,這些規格的出現都是為了加強與使用者的互動。不過這些技術也都是以HTML 4.01為核心所衍生出來的。隨著寬頻的普及,網路應用愈來愈廣,例如線上觀看影音、網頁遊戲等。但目前我們所使用的4.01版本已經無法應付這些技術,於是才會出現如Flash、Silverlight等外掛程式,實現這些功能。
不過由於這些外掛程式都是由不同公司所開發的,這之中牽涉到專利的問題,因此,開始有瀏覽器業者認為有制定新標準的必要。這些瀏覽器業者組成WHATWG團體,研究新的HTML標準,後來WHATWG與W3C合併,由W3C繼續制定的工作。
由W3C所制定的新一代網頁標準HTML5,雖然目前還在草案階段,預計在2012年3月才會正式發表,但由於許多知名瀏覽器如IE、Chrome、Firefox都已開始支援,而iPhone及Android等智慧型手機更是早就支援了此規格。另外Amazon及Google等公司,也都使用HTML5開發Web App,例如Google Docs、Kindle Cloud Reader等。
網路上也有許多人利用HTML5開發出許多有趣的網頁應用程式,像是線上小畫家、文字雲等,同時由於HTML5具有跨平臺的特性,未來開發人員只需寫一套應用程式,不再需要針對不同平臺開發相對應的程式碼,進而減少開發時間及成本,因此HTML5成為了目前較熱門的話題之一。
為減少外掛程式為目標而誕生的HTML新標準
以往要在網頁上觀賞影音或者玩網頁遊戲,必須要安裝外掛程式才能做到,而HTML5的制定則是為了要減少瀏覽器對外掛程式的需求,因為如此,HTML5新增了許多可以用來製作網頁應用程式的API,同時也增加了canvas標籤,以達成能在網頁上繪圖的功能,要使用這些功能,必須搭配JavaScript語言使用。另外網頁的美化,例如文字大小與顏色等,在以前雖然也可以使用<font>等標籤做出來,但這樣勢必會讓整分文件變得更複雜難懂。因此將美化的工作抽出來,交給CSS負責。而HTML5也廢除了<font>及<center>標籤。因此,廣義來說,HTML5包含了HTML、JavaScript、CSS等三個部分。
在HTML5中主要新增的功能有──首先是使用語意標籤來加強文件的結構化、接著是新增<video>及<audio>標籤強化對聲音及影像等多媒體的播放功能、以及增加可以自由描繪圖形的<canvas>標籤、最後則是提供多種有助於網頁應用程式開發的API。如果要製作HTML5網頁,只要在檔案內容的第一行寫入<!DOCTYPE html>,意思是宣告這文件為HTML5文件,瀏覽器只要讀到這一行,就會將此文件視為HTML5了。
語意標籤讓開發人員在維護時,更容易理解網頁的內容
▲利用section標籤,將標題<header>、內文<article>及版權資訊<footer>,分為三個區塊。