今天就用 HTML5 的新語意標籤
Emily P. Lewis | 2010 年 11 月 17 日
HTML5，每個人都在談論它。像是我的朋友突然丟來動人的 <audio>drum kit，不然就是愛談八卦的行銷副總裁，不知在哪讀到 Flash 將亡，HTML 才是明日之星的消息。不過每個人都在談論它，不代表每個人都懂它。.
所以，讓我們先來面對它：什麼是 HTML5？
HTML5 簡史
從最基本來說，HTML5 就是最新的網頁語言。我們從 HTML 2.0 開始（沒聽錯，並沒有 1.0 的版本）然後 1999 年後就停在 HTML 4.01 這個穩定版本。之後語法更為嚴謹，立基於 XML 規則之上，XHTML 1.0 登場。
XHTML 2.0 出現過一段短短時間，但以 XML 為基礎的網頁，逐漸偏離了開發人員和設計師的實際工作。之後經過各方力量的混戰和騷動，終於制定出新規格，HTML5 於焉誕生。大概過程就是這樣…目前已經進入草案階段。不過在 2012 年之前，它還不會成為「候選建議版本」。
日期無關緊要
是的，2012 還有一年多。不過沒像聽起來那麼久，不是嗎？時間當然不能當作藉口，可以拿來逃避理解 HTML5 所能提供給你（以及你的網站和客戶）的東西…不論是現在或未來。
而且別忘了，瀏覽器廠商不會依賴標準機構。如果現在所有的瀏覽器都加入或增加 HTML5 支援的話，W3C 制訂官方規格實際日期其實也就無關緊要。也就是說，HTML5 應該列在你的守備範圍了。
混搭的語言
HTML5 比起前幾個版本更具雄心。它在發展時不只把設計師和開發人員考慮在內，甚至把瀏覽器廠商和其他導入方案都納入考量。
它不僅是內容的標記語言。它也是支援多媒體的語言，引入了新的元素像是 <canvas>、<audio> 和 <video> 等。它提供了強化互動性的 <form>，不需要 JavaScript 介入即可運作。它也提供應用程式的 Web 儲存機制。
在此同時，HTML5 擁抱過去。它的語法是相容於之前的 HTML 版本。想要程式鬆散、自由、不受拘束的標籤嵌套、屬性引號用法、和封閉的標籤？儘管去用。如果你像我一樣，偏好 XHTML 1.0 結構的語法，也沒有東西會擋住你。
然而，雖然 HTML5 沒有告訴你該如何寫你的標記，但它的確建議你仔細想想你正在想的是什麼樣的標記。HTML5 比起前版更具語意，對我們這些 POSH 愛好者，給了我們更龐大、精良的彈藥庫。
有些元素已經被視為過時，有些被重新定義，也有些新的語意元素被導入。所有這些都給標記作者們更有力量去描述內容，而且也不限於給人們使用，對那些搜尋引擎、瀏覽器、螢幕閱讀器和行動裝置也一樣適用。
我極愛 Molly Holzschlag 在 Twitter 上的形容：
.jpg)
HTML5 是混搭語言。它匯集了最好的標記，充滿了前瞻思考的野心來構思未來的語意和互動性的網頁。此外，它具備靈活的方法，企圖同時滿足設計師、開發人員和實作語法的人今日所需，以及將來可能要做的事。
從結構開始
最好開始 HTML5 的方法（就我的意見來說，也是最簡單的）就是使用那些描述頁面內容結構的新語意元素：
- <section> 用在可以依主題分組的內容。<section> 可以有一個 <header>，以及一個 <footer>。它的觀念是在 <section> 底下的內容都是相關的。
- <header> 通常包含頁面的標題或是 <section> 分組的標題，雖然它也可以包含其他的補充資訊，像是 logo 和導覽輔助等。注意我提到頁面或 <section>，這意味著頁面中可以有多個 <header>。
- <footer> 放置有關於頁面或 <section> 的資訊，像是作者是誰，連結到相關資訊和版權宣告等。此外，和 <header> 一樣，一個頁面可以有多個 <footer>。
- <nav> 是用來放置頁面的主要導覽連結。它不是必要的，而 <nav> 通常置於 <header> 之中，以定義而言，用來放置導覽資訊。
- <article> 用來放置內容本身，而且是頁面中能獨立運用的一部分，例如像部落格的文章本體。<article> 相似於 <section>，兩者都包含相關的內容。決定你的內容該使用哪個元素的最佳法則，就是這個內容是否適合提供訂閱。如果這個內容可以提供 Atom 或 RSS 來訂閱，那麼可能最適合的元素就是 <article> 。
- <aside> 指的是頁面的部分區塊，依靠在內容旁邊，但和內容是分開的，像是邊欄或是拉出來的引言。決定是否適用 <aside> 的好方法，是檢查它對主要的內容是否為重要成份。如果可以移除而不影響到理解主要內容，那麼就適合使用 <aside> 。
Doctype 變簡單
在你可以使用這些新元素之前，你需要先宣告 HTML5 的 doctype：
<!DOCTYPE html>
沒開玩笑，真的就是這樣。
我不記得上一次我實際打出 DOCTYPE 是什麼時候。這工作總是用剪下、貼上完成。我永遠也記不起來。不過這將不再是問題，HTML5 的語法就是如此簡單。
更好的地方是：這個 doctype 能在所有你需要支援的瀏覽器上運作…是的，即使是 IE6。
簡單的結構
現在你知道了 doctype，讓我們看看那些新的語意元素。不過首先，讓我們來思考一下內容。記住，HTML5 語意元素（以及 POSH，一般而言）的重點是描述內容。為了讓這工作更具效率，在你動手寫標記之前，容我大膽地說，不僅要知道你的內容，更要理解它。
內容
讓我們專注在一個虛擬律師網站的首頁。它將具備：
- Logo
- 律師名稱
- 導覽列
- 歡迎訊息
- 服務特色
- 法律資源列表
- 版權和法律宣告
在 Web 瀏覽器上，這個首頁的結構會像這樣：
.jpg)
HTML5
既然 HTML5 針對內容要更加深思熟慮，在開始寫作標記之前，我喜歡加上一個額外的「規劃」階段。在這裡，我決定哪個 HTML5 的語意元素會對應到我的內容：
| 內容 |
相關的 HTML5 元素 |
| Logo |
<header> |
| 律師名稱 |
<header> |
| 導覽列 |
<nav> |
| 歡迎訊息 |
<section><article> |
| 服務特色 |
<section><article> |
| 法律資源列表 |
<aside> |
| 版權和法律宣告 |
<footer> |
這些大多數都會放在我的腦子裡，不過如果你想寫下來也無妨。重點是花時間想一下。
另外，這個對應也不是最終的結果，不過它提供了我初步採用的初始元素。套用到圖1 的網頁外觀，你可以看到 HTML5 如何協助定義內容結構：
.jpg)
現在，讓我們寫下標記：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Law Office of Jimbob Smith</title>
</head>
<body>
<header>
<a href="http://jimboblegal.com">
<h1>The Law Office of Jimbob Smith</h1>
<img src="logo.png" alt="Jimbob Legal">
</a>
<nav>
<ul>
<li><a href="/News/">News</a></li>
<li><a href="/Services/">Services</a></li>
<li><a href="/Resources/">Resources</a></li>
<li><a href="/About/">About</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</article>
<article>
<h2>Services & Expertise</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<p><a href="/Services/">Learn more</a></p>
</article>
</section>
<aside>
<h2>Legal Links</h2>
<ul>
<li><a href="http://dc.com">District Courthouse</a></li>
<li><a href="http://da.com">District Attorney</a></li>
<li><a href="http://la.com">Legal Advocates</a></li>
</ul>
<p><a href="/Resources/">See all</a></p>
</aside>
<footer>
<p>This is an attorney advertisement, not legal advice. Please do not share information, through this site or otherwise, that you wish to keep confidential.</p>
<p>Copyright &copy; 2010 Jimbob Legal. All rights reserved.</p>
</footer>
</body>
</html>
最後，記得作一下驗證：
<div> 仍有發揮空間
當你擁有這些嶄新的元素可以使用時，不代表非用它們不可。
專注在內容上。
假如你沒有合適的內容來使用 <footer>，就不要只是為了套用樣式而使用它。如果只為了展現效果而使用 <section> 或 <article>，就違背了使用這些語意元素的重點。你仍然可以（也應該）使用 <div> 來處理這些視覺展用途。我只會提醒你小心 div 狂熱。
處理 IE9 以下版本
現在主流瀏覽器的目前版本都允許你使用（以及套用樣式）這些新的語意元素。Firefox、Chrome、Safari、Opera 和 IE 9。但是如果無法和早期版本的 IE 相容，就無法成為我們設計師和開發人員會想了解與喜歡的網頁。
幸運的是，由於有 html5shim 這個外掛就變得容易多了，它提供了向下相容較舊瀏覽器的功能。你所需要的只是將這個腳本程式放在 <head> 區塊，使用條件式註解來鎖定舊版 IE：
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
至於那些痛恨 IE 的人，不要把這件事加到 IE 很爛的清單中。較舊的 Gecko 瀏覽器像是 Firefox 2 和 Camino 1，對於這些新的語意元素也有相同的識別問題。放下你的諷刺，使用這個外掛和解法，並且建議你的使用者和客戶升級，甚至升到IE 9。
此外，就像我說過，HTML5 的 doctype 可以在所有瀏覽器中正常運作，即使是沒有加上外掛的 IE6。
如你所願
現在，也許你還沒準備好完全擁抱這些的語意元素。也許你有許多 IE6 的使用者，而且不能仰賴 JavaScript 相助。也許你只是想要有更多的時間來測試。也許你有一個龐大的網站，不可能去重構標記。無論理由是什麼，你還是可以現在起就使用，無論是新站或是既存的網站。
還記得 HTML5 的向後相容性嗎？你只要簡單地修改 doctype，不用做別的事，就可以獲得好處。只要單單改變成 <!DOCTYPE html>，你的頁面就是 HTML5。
以既有網站來說，這個簡單的改變，可以確保你既有的標記仍然可以正常運作，同時你也可以在需要時加入 HTML5 元素。向 HTML5 前進並不需要翻修整個網站的標記。
另一個擁抱 HTML5 而無需採用新語意元素的方法，是調整你的 class/ID 命名規範來對應新元素。舉例來說，在虛擬律師網站中，取代 <section> 內容的作法，可以是：
<div id=”section>
<div class=”article>
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class=”article”>
<h2>Services & Expertise</h2>
<h3>Criminal Case Evaluation</h3>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<h3>Indigent Defense</h3>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<p><a href="/Services/">Learn more</a></p>
</div>
</div>
使用 HTML5 或不用 HTML5？
儘管它還在草案階段，並且在舊瀏覽器上有些問題，但是過去 6 個月以來，我經手的每一個專案，都已經使用 HTML5。
如果是我有完全自主的專案，我會導入 HTML5 語意標記（應用充當 ARIA 角色以及加上 <form> 的強化機制）。如果是一些較受限制的客戶專案，我會採用較消極的方法來使用 HTML5 的 doctype 和命運規範。
為什麼？因為我大推 HTML5 的方向。語意對我而言相當重要，尤其是語意的標記。而且我也欣賞它提供給作者在語法和相後相容的靈活性。
不過，還有另外一個理由…
強化的連結語法
在 HTML5，你可以將 區塊等級的元素用連結 (<a>) 包起來。在 HTML 4.01 或 XHMTL 1.0，你也許有這樣的語法：
<h1><a href="http://jimboblegal.com">The Law Office of Jimbob Smith</a></h1>
<a href=”http://jimboblegal.com”><img src="logo.png" alt="Jimbob Legal"></a>
但是，就像前面的例子，在 HTML5 可以讓你將連結當成父元素運用：
<a href="http://jimboblegal.com">
<h1>The Law Office of Jimbob Smith</h1>
<img src="logo.png" alt="Jimbob Legal">
</a>
當然，這只是語法上的一個小變化，但是威力強大。而對我而言，這就構成立刻使用 HTML5 的 doctype 的理由。
不再有藉口
在這篇文章中我已完成我的工作，你沒有任何藉口不去試試 HTML5 … 或多或少應該讓你覺得比較容易接受。所以，去試試吧。我還要給你我最愛的一些資源，幫助你繼續前進：
.png "Comments"){kind=small}
.gif "RSS"){kind=spacer}
.png "About the Author"){kind=small}
.jpg)
.png "Related Content"){kind=small}