由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了。

语意标籤让开发人员在维护时，更容易理解网页的内容

以前在制作网页时，我们常会利用＜div＞或＜table＞标籤来对文件进行排版，在HTML5中则使用了具有意义的语意标籤，例如＜header＞标籤是用来表示网页的标题或主选单。这里的＜header＞跟＜head＞虽然字面上看起来很像，但这二者代表的意思是不一样的，也就是说二者之间并没什么关系。

使用语意标籤制作网页文件，好处有很多，对开发人员而言，只要看到标籤就能了解这部分是标题、内文还是选单；而搜寻引擎在检索寻网页内容时，可以更精确地找到所要的资料；要构成一个具有完整结构化的HTML5网页，主要有＜header＞、＜nav＞、＜section＞、＜article＞、＜aside＞、＜footer＞这6个语意标籤。

＜header＞标籤通常置于文件的顶部，它可以放在网站或文章的开头当作标题使用，主要的功能是用来放置网站的介绍资讯、主选单及网站Logo。在这之中也能使用其它HTML标籤，例如，当作标题时，我们可以使用＜h1＞到＜h6＞标籤，也能使用＜img＞放置图片，而使用＜form＞标籤时，则是为了插入主选单或搜寻视窗。

＜nav＞标籤则是用来放置网站的选单或连结等，它可以放在＜header＞或＜footer＞标籤里，也可以独立使用。如果在网页中需一次使用多个＜nav＞时，只要另外指定不同ID即可，例如＜nav id=”link1”＞。

而＜section＞标籤的功能是定义文件的区段，将具有主题性的内容群组化，例如，我们可以将网页中依照选单、主文、连络资讯，区分为3个区段。当使用＜section＞标籤定义群组之后，我们也能在其中置入＜section＞形成一个巢状的section或者是置入＜article＞标籤。

＜article＞标籤是用来标示本文中的主要内容，在一个＜article＞标籤中，可以包含标题、主文等。而同一个网页中也可以有多个＜article＞标籤。一般来说，部落格文章、论坛发文或网页内容等都可以包含在内。而＜article＞与＜section＞标籤不同的地方在于，＜article＞所包含的通常是一段独立的文章，而＜section＞标籤包含的是文件中的一个章节或段落。

如果要置入本文之外的其他部分，则是使用＜aside＞标籤，通常用于与主要内容相关的部分，例如补充说明等。而＜footer＞标籤是用来标示制作者、着作权等资讯，一般都是摆在文件的下方。

其他新增的标籤功能

在HTML5里新增的标籤还有＜figure＞和＜figcaption＞，以前没有为网页中的图片加上解说文字的方法，但现在利用这二个标籤就可以轻松做到，使用的方法如下：

＜figure＞

＜img src=”档案位置”＞

＜figcaption＞图片解说＜/figcaption＞

＜/figure＞

在＜figure＞标籤里，也可以放入多个＜img＞标籤。如果要强调文件中某一段文字，可以在文字前后加上＜mark＞＜/mark＞。＜mark＞标籤主要的功能是透过CSS的设定，改变所标示文字的背景颜色或文字颜色，藉以强调该段文字。另外HTML5还提供了可以表示日期格式的＜time＞标籤，只要在＜time＞标籤里指定日期，就能在浏览器中辨识日期，而日期的格式为yyyy-mm-dd，例如2011-10-10。＜address＞标籤则是用来标示网页制作者的名称或连络资讯等，用＜address＞所标示的文字会呈现出斜体样式。

支援影音播放，减少外挂程式需求

HTML5里另一个受瞩目的功能，就是新增了用来播放音讯的＜audio＞，以及影片的＜video＞标籤。不过目前各家浏览器所支援的格式并不相同，那是因为HTML5的标准规格还未确定，等正式的标准订立之后，程式码应该会变得更简洁。

＜audio＞标籤的属性包含了用来指定音讯档案位置的src属性，当开启网页时是否自动载入的preload属性，而controls属性则是指定是否显示控制面板，如果指定了，控制面板就会显示在画面上，此时使用者就可以藉由面板进行播放、暂停等动作。

＜audio＞标籤的用法大致如下：

＜audio src=”档案位置”controls＞

未支援此标籤时显示的内容

＜/audio>

要注意的是由于各家浏览器支援的音乐格式都不同，例如，Firefox并不支援MP3，而是支援.OGG格式的音讯档案，所以在使用＜audio＞标籤时，必须考虑到这点，因此可以改成使用＜source src＞标籤的方法。

例如要让Firefox也能播放音乐，可以将程式码改成：

＜audio controls＞

＜source src=”档案名称.mp3＞

＜source src=”档案名称.ogg＞

未支援此标籤时显示的内容 ＜/audio＞

而＜video＞标籤的用法大致与＜audio＞相同。

在使用＜video＞插入影片时，需先指定影片的大小，例如＜video width=”500” height=”400”＞。同样的，由于各家的浏览器所支援的视讯解码器不太相同，因此在置入视讯时，也必须考虑到这点。

目前各家浏览器所支援的视讯格式主要分为OGG（*.ogv）与MPEG4（*.mp4）二种。而在使用＜source src＞标籤时，开发人员还必须指定档案类型（type），例如＜source src=”test.ogv type=”video/ogg”＞及＜source src=”test.mp4 type=”video/mp4”＞。

canvas标籤功能，让网页也能绘出图形

HTML5新增了具有绘图功能的＜canvas＞标籤，利用这项功能可以直接在网页上画出线条、图形及动画，甚至还能做出网页游戏。不过＜canvas＞标籤并不能直接使用，而必须搭配JavaScript来操作。而且，目前＜canvas＞标籤仅能画出2D图形。

要使用canvas的功能，必须先配置＜canvas＞标籤，首先要指定ID名称，接着指定画布的大小，例如＜canvas id=”draw” width=”500” height=”400”＞，记得最后要加上＜/canvas＞作为结尾。

设定好画布之后，接着就可以使用JavaScript进行绘图。首先必须使用document.getElementById（）方法来取得canvas物件，可以写成var canvas= document.getElementById（draw），再使用canvas的getContext（）方法取得绘图函数，例如var ctx=canvas.getContext（2d）；取得绘图方法之后，就要唿叫用来描绘的方法进行绘图。fillRect方法负责描绘矩形，fillStyle则是指定颜色。

＜canvas＞标籤里唯一提供的图形只有矩形，如果要画三角形或圆形等其他图形，必须使用路径方法绘制。

而使用路径绘制图形的方法有beginPath（开始绘制路径）、closePath（关闭路径）、stroke（绘制路径边框）、fill（将图形填色）。另外，moveTo（x, y）方法则是将绘制路径的起点移至（x,y）位置，若没有使用moveTo（），则路径起点预设是在（0,0）。lineTo（x,y）方法则是由目前端点到（x,y）画一直线。

要绘制圆形或圆弧则是使用arc方法，我们可以写成arc（x, y, r, startAngle, endAngle, anticlockwise），意思是从（x,y）为起点画出半径（r）的圆形，其中的startAngle和endAngle参数是以角度标示圆形的起点及终点，而anticlockwise参数则是指定是否由逆时钟顺序来绘制，可以指定true（真）和false（假）。

提供多种API开发网页应用程式

HTML5为了让开发者能开发网页应用程式，提供了多种的API给开发者使用，例如应用程式快取（Application Cache）。

一般来说，网页应用程式必须在网路连线的情况下才能使用，这种API的目的，则是为了让这些应用程式在离线状态下也能使用。

另一个值得介绍的API是Web SQL Database，则是当装置没有连上网路，可以利用此功能存取资料。

如果要使用这些API，你必须对JavaScript有一定程度的理解，同时也要了解DOM（Document Object Model）的相关知识才行。

使用新的的语意标籤，制作具结构化的网页

利用section标籤，将标题＜header＞、内文＜article＞及版权资讯＜footer＞，分为三个区块。

测试浏览器对HTML5的支援

利用HTML5 Test网站，可以实际测试你使用的浏览器，支援那些新的HTML功能。

HTML 5新增为图片加上说明的方法

利用

及