HTML5

於 2004 年，WHATWG 提出了 HTML5 的草案，Web Application 1.0，然後又在 2007 年獲得 W3C 所採納，從此，HTML5 開始展現它的威力。愈來愈多的瀏覽器支 援 HTML5，它已經開始成為一個全新的標準。HTML5 透過將工作轉移的方式，有 效的減輕了網頁程式設計師在製作網頁時的負擔，。可以想見，在未來會有愈來 愈多網頁程式設計師選擇使用 HTML5 來製作網頁。

2.1.1 HTML5 的各種新興結構標籤

在 HTML5 當中定義了許多的新標籤，這些標籤的出現，是為了要更清楚的定義 許多標籤在網頁中的角色，比如說<nav>標籤，網頁中常常會有一行的 navigation 行，比如說在圖 2.1 中，某個個人網誌的右邊欄，裡面包含了許多的連結，這些 連結可以帶你到各個頁面去，在圖 2.1 的範例當中，這些連結可以帶你到各篇文 章去。

圖2.1  <nav>結構標籤  

在以往，要區分這樣的區塊可能必須是使用<div>標籤，然後以<div id=”nav”></div>的方式來定義這樣的 navigation 區塊，因為<div>標籤是一 個意義不明的標籤，它需要被定義角色，當然<div>的功用就在這裡，但在 HTML5 當中，就把這些常用的標籤角色，把它們確實的區分獨立出來，形成新的標籤，

這不只是讓網頁程式設計師更能一目了然的知道這些區塊的角色和功用，也實在 地提供了瀏覽器和網路爬蟲機器人一個公訂的標準，讓程式了解，我現在讀取到 的這個標籤大概會是有什麼樣的功用，因為在網頁中同樣都是 navigation 的區 塊，也許有的設計師不會去定義它，有的設計師可能會定義它是<div id=”nav”>，

有人可能會定義它是<div id=”navigation”>，但這些不同的定義方式都代表 著同一個類型的區塊，就是 navigation 區塊，既然如此，HTML5 就把它定義得清 清楚楚的，瀏覽器或是爬蟲機器人就能夠更了解那些區塊會是有什麼屬性的，以 便能做出相應的動作。

類似的新定義標籤還有：

1. <header>

2. <footer>

3. <article>

4. <section>

5. <aside>

這些都屬於結構型的新標籤，這都是為了標籤的語意能夠更好的被發揮及使用。

2.1.2 互動式標籤

在 HTML5 當中也新增了許多好用的互動式標籤，比如說重要的影音處理。在 HTML5 中增加了<video>以及<audio>標籤，這是一個很重要的革新，這兩個標籤 的出現，代表了程式設計師負擔的轉移。以往程式設計師必須要費神尋找可用的 video 或是 audio 的網頁播放工具來嵌入 HTML 程式碼當中，這時會使用到<embed>

標籤，然後在標籤中描述此段影片許多的屬性。

但如今，製作 video 撥放器以及 audio 撥放器的工作都交給瀏覽器來做，瀏 覽器負責確保此類工具的功能完善，並且 HTML5 提供了一套可以控制這些工具的 API，讓程式設計師可以不用額外擔心工具的選擇與使用，只要在<video>及

<audio>標籤當中放入適當的影片路徑，還有需要的屬性，比如說 poster 屬性，

可以讓影片顯示某一個影格的影像；loop 屬性，可以讓影片循環撥放；preload 屬性，可以建議瀏覽器在載入頁面的時候預先載入影片，不過當然，這些都取決 於瀏覽器是怎麼來實作這些功能的。

2.1.3 新的輸入類型標籤及表單驗證

輸入類型標籤也就是<input>標籤，在 HTML5 當中定義了許多新的 input 類 型：

1. email 2. url 3. date

4. time 5. month 6. number 7. range

以往在輸入日期的 input 當中，網頁程式設計師必須費神去製作一個小日曆 UI，

或是尋找小日曆的 javascript 套件，這是為了讓使用者可以方便的選擇日期，

不過現在這類的標籤已經被定義了，所以這個部分的負擔就交給了瀏覽器，目前 HTML5 標籤的支援能力不一，比如只有 Opera 實作了小日曆的功能，而<input type=range />目前也只有 google chrome 有將它實做出來，所以使用者在面對 一些使用 HTML5 建立的網頁時，有可能會面臨有些功能可以作用，但是有些功能 無法作用的景況。

在這樣的過渡時期，還是需要網頁程式設計師的幫忙，在製作 HTML5 網頁時，

就必須加入一些 javascript 的方式來檢查此功能是不是能夠在使用者的瀏覽器 上完整作用，若不能，就必須提供一些備用的資訊讓使用者讀取。

上述不支援功能的瀏覽器包含了老舊的瀏覽器，老舊的瀏覽器沒有更新很可 能完全不支援 HTML5 的任何一個標籤。在過渡時期當中我們可以使用 WAI-ARIA 來輔助，WAI-ARIA 可以在標籤中加入此標籤的角色(role)，讓舊版瀏覽器知道這 大概是什麼東西，以此來改善過渡時期瀏覽器支援度不足的問題。