11

第 1 章

介紹 HTML5

倘若 HTML 是一部電影，HTML5 必然是劇中驚喜的轉折。

H T M L 註定無法在 2 1 世紀生存。網路的官方標準機構，叫做 W3C（World Wide Web Consortium），在1998年時就準備讓 HTML 死去。W3C 將未來的計劃寄託於一個時髦的 HTML 繼承者，叫 XHTML。一群被剝奪的反抗者花了很大力氣，才讓 HTML 重新回來，並且為新功能打下了基礎。而我們會在本書探討這些功能。[Page-11]

在這個章節，你將會了解 HTML 為何死去，而它又是如何復活。你將會學到 HTML5 的原理與功能，還有考慮棘手的瀏覽器支援問題。你也會看到第一個友善的 HTML5 文件，並且以兩種方式呈現 — 一種是最簡形式，而另一種則是更為實用的模版，可以用來作為任何網站的起始點。

HTML5 的故事如你所知，HTML 是用來寫網頁的語言。HTML 最基本的概念 — 也就是利用元素（element）來組織你的內容 — 從有網路以來就沒改變過。事實上，即使是最古老的網頁仍然能在最現代的瀏覽器上運行無礙（包括一些

在那時還未出現的瀏覽器，如 Firefox 與 Chrome）。

既老又成功就代表有些風險存在 — 也就是說，每個人都想取代你。在1998 年，W3C 停止開發 HTML，並且嘗試用具有 XML 概念的繼承者來取代它，也就是 XHTML 1.0。

12 HTML5: THE MISSING MANUAL

HTML5 的故事

XHTML 1.0：更為嚴謹X H T M L 與 H T M L 有著相同的語法傳統，不過它強制執行更嚴謹的規則。有著馬虎標記的傳統 HTML，在 XHTML 是不能接受的。[Page-12]

舉例來說，假如你想要將一個標題裡的最後一個字改成斜體，如下所示：

<h1>The Life of a <i>Duck</i></h1>

但是你意外的將最後兩個標籤弄反了：

<h1>The Life of a <i>Duck</h1></i>

當瀏覽器遇到像這樣有點混亂的標記時，它會揣測你真正要的是什麼。

一開始，XHTML 還蠻成功的。專業的網頁開發者常常對瀏覽器的怪癖感到挫折，因此，由於 XHTML 是更先進的網頁設計，於是便蜂擁而至。一路上他們被迫採用更好的習慣，和放棄一些在 HTML 裡只是半成品的格式功能。然而，許多 XHTML 想像中的好處 — 如與 XML 工具的互通性，更容易使用程式來處理頁面，對移動平台的可攜性，還有 XHTML 語言的的延伸性 — 從來沒實現過。

XHTML 對認真的網頁開發者來說，仍然是個標準。當每個人覺得還不錯的時候，其實有個骯髒的秘密：瀏覽器能理解 XHTML 語言，但是不會強迫執行錯誤處理，而這是標準所要求的。這代表頁面某處可能違反

了 XHTML 的規則，不過瀏覽器並不會因此顯示空白。事實上，根本沒辦法阻止網頁開發者將一堆馬虎的標記與過氣的 HTML 內容丟在一起，並且硬將它稱為 XHTML 頁面。沒有一個在地球上的瀏覽器會抱怨這個。而這讓負責 XHTML 標準的人深感不安。

XHTML 2：無法預料的失敗解決的方案應該是 XHTML 2。它對於錯誤處理更為嚴謹，強迫瀏覽器拒絕不合法的 XHTML 2 頁面。XHTML 2 同時也丟掉許多由 HTML 繼承而來的怪癖與包袱。例如說，數字化的標頭系統（<h1>、<h2>、<h3>等）被新的 <h> 元素代替，而它的意義則依賴它在網頁上的位置。同樣的，<a> 元素也因為一個能讓開發者將所有元素轉換成連結的功能出現，而黯然失色。另外，<img> 元素失去用來提供另外內容的 alt 屬性了。

這樣的改變在 XHTML 2 是很典型的。從理論的觀點來說，它們更為俐落而且合理。從實用的觀點來說，它們強迫每個人改變寫網頁的方式，

但這些額外工作卻沒有新增加功能。而且，XHTML 2 丟掉了一些陳腐的元素，不過有些網頁設計師仍然很喜愛它們，如 <b>（粗體文字）、<i> （斜體文字）、還有 <iframe> （將一個頁面嵌入至另一個）。

13 第一章：介紹 HTML5

The Story of HTML5HTML5 的故事

不過，也許最糟的問題是這樣的改變如冰河般緩慢。XHTML 2 的開發拖了五年，而開發者的熱情慢慢流失了。[Page-13]

HTML5：死灰復燃差不多同一時間（2004 開始），一小群人由不同的角度來看網路的未來。並不嘗試去分別什麼在 HTML 是錯的（或哲理上的“不純”），他們專注在還缺少什麼，也就是網頁開發者想要讓工作完成的東西。

畢竟，HTML 始於一個展示文件的工具。有了 JavaScript 的加持，它蛻變成一個開發網路應用程式的系統，如搜尋引擎、e-commerce 商店、地圖軟體、郵件閱讀器等等。雖然一個精巧的網路應用程式可以作很多令人

驚艷的事，開發一個這樣的東西卻不簡單。很多時候是依賴一大堆手寫的

代碼，一種或多種廣泛的 JavaScript 工具套件，還有在網路伺服器上運作的網路應用程式。即使最後你將它跑起來，你還是需要管理好這些將所有

事情綁在一起的膠帶與釘書針。

創造瀏覽器的人非常在意這種情形，一群具有前瞻性思維的人從 Opera Software（創造 Opera browser 的人）還有 Mozil la Foundation（創造 Firefox 的人）聚在一起，商討如何讓 XHTML 引進更多開發者導向的功能。當他們失敗後，Opera，Mozil la，與 Apple 形成了一個鬆散的組織 WHATWG （Web Hypertext Application Technology Working Group）來思索新的解決方案。

WHATWG 並不想要將 HTML 取代掉，而是延伸它，以一種無縫的，向後相容的方式。事實上，在它早期的成品上有兩個額外的規格，叫 Web Application 1.0 與 Web Forms 2.0。最後，這些都演化成 HTML5。

註：HTML5 規格名稱裡的 5 這個數字，應該是代表這個標準是沿續 HTML 4.01

（在 XHTML 之前）。當然，也許並不準確，因為 HTML5 支援 HTML 4.01 發

表之後的任何頁面，包括嚴謹的 X H T M L - st y l e 語法（可選擇使用它）還有一

些 JavaScript 的創新。不過，這個名字仍然清楚的表達這個要點：HTML5 可能支

援 XHTML 的傳統，不過它會強力執行 HTML 的規則。

在 2007 年時，WHATWG 陣營有了所有的驚喜。在許多人發出痛苦的回應後，W3C 決定將 XHTML 2 解散，並且轉而進行 HTML5 標準化的工作。在此同時，原先的 HTML5 被切成數個可處理的部分，而許多原先叫 HTML5 的功能變成了不同的標準（請見下面的方塊）。

14 HTML5: THE MISSING MANUAL

The Story of HTML5HTML5 的故事

提示：在 www.w3.org/TR/html5 可閱讀 W3C 官方版的 HTML5 標準。

加速

HTML5 包含什麼並沒有那種“支援”HTML5 的瀏覽器。相反

的，所有的瀏覽器都是漸進式支援 HTML5 功

能。這可以說是好壞參半。好的理由是瀏覽

器可以快速實作已成熟的部分。不好的部分

是對於網頁寫作者來說，他們必須擔心瀏覽

器是否支援他們想要使用的部分。（你將會

本書學到很痛或比較不痛的技巧來處理這件

事。）

這裡列出了 HTML5 主要的功能類別：

‧ Core HTML5。這個部分的 HTML5 組成

了官方的 W3C 規格。它包含了新的語

義元素（第二與第三章），新的，而且

加強的 web form widgets（第四章），

音頻與視頻支援（第五章）還有利用

JavaScript 的畫布（第六與第七章）。

這個類別包含了得到瀏覽器最大支援的

功能。

‧ 曾經是 H T M L 5 的功能。這些功能

是源自原來的 H T M L 5 規格，也就是

WHATWG 所籌備的功能。很多都需要

JavaScript 和 rich web application 的支

援。最主要的功能包括本地端儲存（第

九章），離線應用程式（第十章），還

有訊息（第十一章），不過在本書你還

會學到更多。

‧ 有時也稱作 HTML5 的功能。這些次世

代的功能跟 HTML5 參在一起，即使它

們根本不是 HTML5 的一份子。這個類

別包括 CSS3（第八章）與地理資訊（第

十二章）。

奇怪的是，不只是沒頭緒的管理者與科技

寫作者造成這種困惑，即使是 W3C 都模糊

了“真正”的 HTML5（根據標準）與“市

場”版本（所有新加入的東西）。例如說，

在 W3C 的官方標誌網站上（www.w3.org/

html/logo）鼓勵你產生 HTML5 標誌來推

廣 CSS3 與 SVG — 兩種曾經在 HTML5 出現

已前就在開發的標準。

HTML：活生生的語言從 W3C 到 WHATWG，再從 WHATWG 回到 W3C 已經導致很不尋常的安排。技術上而言，W3C 負責決定什麼能成為 HTML5 的官方標準。不過，在此同時，WHATWG 持續它的工作，想像著未來的 HTML 功能。不過，它們已經不再將自己的工作稱為 HTML5。它們叫它 HTML，並且為此解釋程 HTML 將會持續成為活生生的語言。[Page-14]

因為 HTML 是個活生生的語言，一個 HTML 頁面永遠也不會過時或停止運作。HTML 頁面永遠不需要版本號碼（即使是在 doctype），而網頁開發者永遠不需“升級”它們的標記，以讓它能在新的瀏覽器上運作。

15 第一章：介紹 HTML5

Three Key Principles of HTML5

HTML5 的 三個原則

因為 HTML 是個活生生的語言，新功能（還有新元素）可以在任何時間被加進 HTML 標準。有些網頁選擇從這些新功能得到好處，而一些瀏覽器可以選擇支援它們。不過功能與特別的版號並不互相綁定。

當網頁開發者聽到這項計劃，他們的反應通常是感到十足的恐怖。畢竟，

有誰想處理一個非常不一致的標準的世界，而開發者還得看這些功能被支

援的機率，來選擇功能？不過，許多開發者逐漸了解一個事實：不管好

壞，這就是今日瀏覽器運作的方式，而這也是自網路以降一直運作的模式。

如之前所解釋的，今日的瀏覽器對各種混雜的功能，支援的還蠻開心的。

你可以拿一個最先進的 X H T M L 頁面，然後加入一些醜陋過時的元素如 <marquee> 等（用來建立捲動文字），而且沒有任何瀏覽器會抱怨。同時，瀏覽器對於最舊的標準也有一些著名的窟窿。例如說，瀏覽器製造

商在對 CSS2 的支援完成前，就開始實作 CSS3，而很多 CSS2 的功能就被丟棄了。真正唯一的差別，就是 HTML5 讓“活生生的語言”狀態成為正式。對於 HTML 正在走上創新的章節時，回到它的根其實一點兒也不諷刺。[Page-15]

提示：想看目前正在演化的 HTML 草案，也就是包含我們所稱為 HTML5 的東

西，還有一些還在演化的新功能（仍未被支持），請前往 http://whatwg.org/

html。要跟上最新但較不正式的 HTML 新聞，請參考 WHATWG 在 http://blog.

whatwg.org 的部落格。

HTML5 的三個原則現在，你可能非常想要看 HTML5 頁面的廬山真面目了。不過，首先，還是值得爬進 HTML5 的創造者的腦袋，看他們到底在想什麼。一旦了解這個語言背後的哲理，那些本書裡面的怪癖，複雜度，還有偶爾的麻煩份子

對你來說就合理多了。

1. Don’t break the Web“Don ’t break the Web”代表的就是一個新的標準訂定時，不能延伸出讓其它網頁不能運作的改變。這很少發生。

“Don’t break the Web”也代表一個標準不能順便改變規則，而且認為目前完美的網頁是過時的（即使它們仍然可以運作）。

16 HTML5: THE MISSING MANUAL

Three Key Principles of HTML5

HTML5 的 三個原則

舉例來說，XHTML 2 打破網路規則，因為它要求頁面寫作方式進行立即且劇烈的改變。是的，舊頁面仍然可以運作 — 感謝瀏覽器所內建的向後相容性。不過假如你想準備未來的頁面，而且讓目前的頁面跟得上時代，

就必須花上無數時間來更正這些 XHTML 2 所禁止的錯誤。[Page-16]

HTML5 則有不同觀點。任何在 HTML5 之前有效的頁面，在 HTML5 仍然有效。事實上，任何在 HTML 4.01 有效的頁面，在 HTML5 裡也同樣有效。

註：與之前的標準不同，HTML5 不只告訴瀏覽器製造商該支援什麼。同時，它也

記錄和正規化已經可以運作的東西。因為 HTML5 文件只記錄真實的東西，而非

只是設定一堆理想中的規則，它反而成為支援度最好的標準。

加速

HTML5 如何處理過時的元素因為 H T M L 5 支援 H T M L，因此也同時支

援許多過時的功能。這包括了格式元素如

< fo nt >，令人不齒使用的特殊效果元素如

<blink> 或 <marquee>，還有 HTML 奇怪的

frames 系統。

這種開放性讓許多新的 HTML5 學徒產生了困

惑。往某個方面來想，HTML5 應該禁止這些

過時的元素，尤其是它們已經好幾年都不在

官方規格中了（有的甚至從來沒有）。另一

方面來說，新的瀏覽器仍然悄悄的支援這些

元素，而 HTML5 應該要反映瀏覽器實際運作

的情況。因此，這時候標準該如何訂定？

要解決這個問題，HTML5 有兩個分開的部

分。第一部份-也就是本書所考慮的部分-將

目標對準網頁開發者。他們需要避掉這些

壞習慣，並且扔掉這些過時的元素。你可

以利用 HTML5 驗證器來確保你有跟隨這個

HTML5 標準。

第二較大的部分，針對瀏覽器製造商。他

們必須支援所有曾經存在於 HTML 之上的東

西，為的就是向後相容性。

理想中，HTML5 標準應該有足夠訊息來讓人

們可以從頭建造一個瀏覽器，而且讓它能完

全相容於今日的瀏覽器，不管是針對舊的或

新的標記。這個部份的標準告訴瀏覽器如何

去應付過時，但仍舊被支援的元素。

無獨有偶的，HTML5 規格也將如何處理各

種錯誤給正規化（例如說，遺失的或配合錯

誤的標籤）。這點很重要，因為它確保了一

個有問題的頁面在各個瀏覽器會以同樣方式

運作。對於一些細微的議題，像是頁面要

如何建造 DOM（Document Object Model）

的模型。要建立像這樣冗長又麻煩的標

準，HTML5 的創造者針對今日的瀏覽器進行

了全面的測試，來找出它們沒有官方文件記

錄的錯誤處理行為。最後，他們將這些東西

寫下來。