[TEAP] HTML5之外的語義標準

什麼是TEAP？ TEAP，Turingbook Early Access Program，即圖靈在譯新書的試讀樣章。一本書的翻譯週期約為3到6個月，在這麼長時間內，譯者與讀者沒有溝通和交流是一件不可想象的事兒。TEAP 模仿的是 Manning 的 MEAP，事先公開未經編輯的內容，讀者可以提前閱讀將來才能出版的內容，同時譯者也能收穫寶貴的反饋意見，以便改進翻譯，提高質量。本文節選自《HTML5祕籍》第3章3.2節。

通過標記巧妙地表達語義並不是什麼新點子。事實上，早在HTML5還是一個幻想，存在於WHATWG編輯Ian Hickson的大腦中的時候，就有非常多的Web開發人員大聲疾呼，要求為他們提供有意義的標記。他們的目標也不盡相同，有些人希望提高無障礙性，有些人打算要進行資料探勘，而還有一些人僅僅是希望自己的簡歷多一個閃光點。不過，所有這些人在標準HTML語言中都找不到自己的想要的標記。由此，一些新標準的應運而生也就不足為奇了。

接下來幾節，我們介紹4種這樣的標準。首先，就是ARIA，它致力於提升螢幕閱讀器中的無障礙性。其次，我們要看一下另外三種並存的手段，它們用於描述不同的內容，比如聯絡人、地址、企業名錄，或其他各種HTML頁面可能出現的內容。

3.2.1 ARIA

ARIA（Accessible Rich Internet Applications，無障礙富因特網應用）是一個還在制定中的標準，它規定了在任意HTML元素上使用的屬性，而通過這些屬性可以為螢幕閱讀器提供額外的資訊。例如，ARIA中規定了一個role屬性，表示所在元素的用途。下面就以一個表示頁首的

<div class="header">

通過為其指定值為banner的role屬性，可以告訴螢幕閱讀器它的用途是儲存橫幅圖片。

<div class="header" role="banner">

當然，我們上一章剛剛學過，HTML5為標註頁首提供了一個語義元素。因此，這時候最合適的方式莫過於：

<header role="banner">

這個例子說明了兩方面問題：首先，ARIA規定了一些推薦的角色名。（要了解所有角色名，請參考規範中相應的部分：http://www.w3.org/TR/wai-aria/roles#landmark_roles。）其次，部分ARIA與新HTML5語義元素重複——這是合情合理的，因為ARIA早於HTML5。不過，重複也不是完全重複。比如，有些角色名在HTML5中確實也出現了（像“banner”和“article”），而有些則可能在將來才會出現（如“toolbar”和“search”）。

ARIA還針對HTML表單定義了屬性。文字框的aria-required屬性表示使用者必須輸入值。而文字框的aria-invalid屬性表示當前值不正確。這些屬性可以讓螢幕閱讀器使用者，特別是的視力不好的使用者，不會因為看不到提示資訊（比如必填欄位旁的星號，或閃爍的紅色錯誤圖示）而受影響。

為了恰當地採用ARIA，需要學習標準，也要花時間評審自己的標記。對於是否值得為此投入，Web開發人員的看法各一。因為這個標準尚未制定完成，而HTML5又提供了一些類似的語義元素，且用起來省事兒不少。不過，假如你真的想建立一個可以無障礙訪問的網站，必須既考慮ARIA，又要考慮HTML5。因為螢幕閱讀器支援ARIA，不支援HTML5。

注意 要了解有關ARIA（全名是WAI-ARIA，因為它是由Web Accessibility Initiative工作組負責制定的）的更多資訊，請參考其規範：http://www.w3.org/TR/wai-aria/。

3.2.2 RDFa

RDFa（Resouce Description Framework，資源描述框架 ）也是一種使用屬性向網頁中嵌入詳細資訊的標準。與本章討論的其他方式不同，RDFa有一個明顯的優點：它是一個穩定、不變的標準。RDFa也有兩個明顯的缺點：一是複雜，二是針對XHTML而非HTML5。換句話說，嵌入RDFa後設資料後的網頁比最初要長得多，而且顯得很笨重。目前，不少極為聰明的網站開發人員也想出了一些好辦法，讓我們能夠在HTML5中使用RDFa。可是，畢竟它植根於更嚴格的語法和無法變通的XML規則，所以也有可能不會對HTML5產生太大影響。

本章不會詳細討論RDFa，不過假如你希望瞭解更多資訊，可以在Wikipedia上看到完整的介紹：http://en.wikipedia.org/wiki/RDFa。或者，也可以參考3.1節介紹的Google Rich Snippets，其中所有示例都有對應的RDFa版本。

3.2.3 Microformats

Microformats是一種在網頁中嵌入後設資料的簡單而又比較合理的方式。Microformats並沒有想成為任何官方標準。相反，它只是對一組統一的約定進行了寬鬆地描述，這些約定有助於網頁之間共享結構化資訊，但又不會導致像採用RDFa那樣複雜。Microformats因此獲得了巨大的成功，谷歌最近的一次調查顯示，在包含後設資料的頁面中，有94%都基於Microformats。

注意 讀者可能會想，既然Microformats如此受歡迎，那麼語義Web之戰似乎已經分出勝負了。但事實上並沒有這麼快，且聽我細說緣由。首先，絕大多數網頁根本沒有包含任何語義資料。其次，那些使用Microformats網頁，大多數都只將其用於兩個用途：聯絡資訊和活動列表。第三，Microformats的簡單有可能阻礙它在更先進任務中的應用，特別是HTML5流行起來之後。不過，雖然Microformats不會很快就無處不在，但顯然是不能忽略它的。

在標記資料之前，首先要選擇要使用的微格式。最常用的微格式不過幾個十而已，且其中大部分還在調整和修訂中。要了解可以使用哪些微格式以及相關的用法說明，請參考這裡：http://microformats.org/wiki。不過，下面我們還是要介紹兩個最常見的微格式：hCard和hCalendar。

1. 使用hCard標註聯絡資訊

hCard是一種針對聯絡資訊而設計的通用微格式，可用於人、公司、組織或某一地點的聯絡資訊。根據最新統計，W eb上包含20多億的hCard，因而它當之無愧地成為迄今為止最流行的微格式。

Microformats的應用方式比較新穎，它們附加在通常用於新增樣式的class屬性上。你可以根據資料的型別，使用某些標準的樣式名來標註資料。然後，其他程式可以讀取你的標記，提取資料並通過檢查class屬性來確定資料的含義。要建立hCard，需要找一個根元素，為其class屬性指定vcard值。在這個元素內部，至少要包含一個格式化的名字，這外名字必須包含在另一個元素中。內部的這個元素的class屬性值必須是fn。比如下面就是按要求寫的一段標記：

<div class="vcard">
    <div class="fn">Mike Rowe Formatte</div>
</div>

在通過class屬性來應用微格式的時候，不用考慮為該類名建立匹配的樣式。（事實上，這樣做只會帶來麻煩。）相反，此時的類名完全用於不同的用途，即告知外界你標註的資料具有良好的格式和特定的含義。

儘管hCard只需要一個名字，但多數情況下它要包含更多細節，比如郵政編碼、電子郵件、網站URL、電話號碼、生日、頭銜、組織名稱，等等。只要使用的類名正確，就可以在vcard元素中以任意順序包含這些資訊。請看下面的例子，其中重要的類名都加粗了。

<div class="vcard">
    <div class="fn">Mike Rowe Formatte</div>
    <img class="photo" src="face.jpg" alt="Mike's Face">
    <div class="title">Web Developer</div>
    <div class="org">The Magic Semantic Company</div>
    <a class="url" href="http://www.magicsemantics.com">www.magicsemantics.com</a>
    <div class="tel">641-545-0234</div>
</div>

提示 要了解所有受支援hCard屬性，請參考http://microformats.org/wiki/hcard。

好了，前面的例子展示了怎麼從頭開始建立與hCard微格式匹配的標記。不過，更常見的情況可能是改進已有的網頁，為其新增微格式。比如，有一個頁面中包含聯絡資訊，你想把其中的資訊標註起來，以便理解hCard微格式的程式能夠訪問這些資訊。這個任務相當簡單，只要按照下列提示做即可：

• 通常，有些重要的資料會混在一些不需要標註的內容裡。此時，可以為這些重要的資料分別新增新元素。如果想用塊級元素，就使用<div>；如果想用行級元素，就使用<span>。
• 不用擔心其他帶有不同類名的元素。在讀取微格式時，程式會忽略所有帶非標準類名的內容。
• 如果要在微格式中新增照片，可以使用<img>元素；如果要新增連結，可以使用<a>元素。剩下的工作，無非就是為一些普通文字新增標記而已了。

下面就來看一個典型的例子。想象一下，你開啟了一個“About Me”頁面（如圖3-3所示），其中包含如下內容：

<h1>About Me</h1>

<img src="face.jpg" alt="Mike's Face">
<p>This website is the work of <b>Mike Rowe Formatte</b>.
His friends know him as <b>The Big M</b>.</p>

<p>You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike).</p>

<p>Or, visit him there at:<br>
42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a href="http://www.magicsemantics.com">www.magicsemantics.com</a>

圖3-3：包含作者資訊的“About Me”頁面

以下就是使用微格式之後的標記：

<h1>About Me</h1>

<div class="vcard">
    <img class="photo" src="face.jpg" alt="Mike's Face">
    <p>This website is the work of
    <span class="title" style="display:none">Web Developer</span>
    <b class="fn">Mike Rowe Formatte</b>.
    His friends know him as <b class="nickname">The Big M</b>.</p>

    <p>You can contact him where he works, at
    <span class="org">The Magic Semantic Company</span> (phone
    <span class="tel">641-545-0234</span> and ask for Mike).</p>

    <p>Or, visit him there at:<br>
    <span class="street-address">42 Jordan Gordon Street, 6th Floor</span><br>
    <span class="locality">San Francisco</span>,
    <span class="region">CA</span>
    <span class="postal-code">94105</span><br>
    <span class="country-name">USA</span><br>
    <a class="url" href="http://www.magicsemantics.com">www.magicsemantics.com
    </a>
</div>

這個例子涉及了幾個技巧。

• 為新增vcard而新增了<span>元素；
• 在合適的元素上新增了class屬性。比如，既然有了包含名字資訊的<b>元素，就沒有必要再新增多餘的<span>元素了。（當然，你可以這樣做。比如，如果你既想應用格式又想標註名字，同時又想讓樣式表與微格式保持分離，那可能會寫成這樣：<b class="KeywordEmphasis"><span class="fn">Mike Rowe Formatte</span></b>。）
• 使用隱藏的內容指出了人的頭銜（是一位Web開發人員）。這個資訊沒有必要顯示在頁面上，因為通過這句話就能看出來了：“This website is the work of….”（本網站由……開發）。不過，這個技巧還是有爭議的，因為某些工具（如谷歌）會忽略頁面中不顯示的資訊。

既然都費勁地做了這麼多，下面就該看一看這樣做有什麼好處了。儘管沒有瀏覽器能識別微格式（至少在本書寫作時還沒有），但有很多外掛和指令碼可以賦予瀏覽器這種能力。如何利用這些微格式？不難想象。比如，瀏覽器可以檢測頁面中的hCard，將其中的資訊列在一個皮膚中，同時給你一個命令，讓你能像收藏頁面一樣把某個人的聯絡資訊新增到地址簿中。在這裡可以找到支援微格式的瀏覽器外掛：http://microformats.org/wiki/browsers。

Oomph（http://oomph.codeplex.com/）就是這樣一個工具，可以將它作為一個外掛安裝到Internet Explorer中。然後，Oomph就會從你訪問的頁面中搜尋三個微格式：hCard（聯絡人資訊）、hCalendar（活動列表）和hMedia（影像、音訊和視訊）。如果它找到某個微格式，就會在視窗左上解新增一個小圖示（見圖3-4）。單擊這個圖示，就能看到它找到的聯絡人、活動和媒體檔案，以及相應的連結。

圖3-4：上：圖示表明Oomph至少找到了一種微格式；下：單擊圖示，可以看到完整的資訊，包括顯示相應地理位置的地圖和一個將聯絡人資訊快速轉移到電子郵件地址簿中的選項。如果頁面中包含多個微格式，也可以看到讓你檢視hCard、hCalendar和hMedia的連結。

不過，Oomph真正有意思的地方在於，還有另一種方式使用它，即通過JavaScript庫。在這種情況下，你所要做的就是在頁面中引用相應的指令碼：

<head>
    <meta charset="utf-8">
    <title>hCard Example</title>
    <script src="jquery-1.3.2.min.js"></script>
    <script src="oomph.min.js"></script>
<style>

這樣，所有訪問你頁面的人，無論使用什麼瀏覽器，都可以通過彈出的微格式按鈕來增強體驗。實際上，圖3-4中的谷歌Chrome就是這樣來利用微格式的。有興趣的讀者可以到http://www.prosetech.com/html5試一試。

注意 我們應該把Oomph看作一個概念驗證，它展示了可以利用微格式能做什麼，但不能把它當成真正的工具來用。微格式將來最好是能整合到瀏覽器中，就像IE、Firefox、Safari中的RSS一樣。比如，在通過Firefox訪問某個部落格時，它會自動檢測RSS源，並允許你建立一個“活的”書籤。類似這樣的功能，正是可以利用微格式的最佳途徑。

2. 使用hCalendar標註活動

流行程度僅次於hCard的是hCalendar，它是標註活動的一種簡單方式。比如，可以使用hCalendar標註約會、會議、假日、產品釋出時間、商店開業時間等。目前，Web上有數千萬的網頁中有hCalendar活動。圖3-5展示了一個例子。

圖3-5：Facebook的所有活動頁面都使用hCalendar微格式標註活動，使用hCard微格式標註地點。這樣，使用者就可以通過Operator（https://addons.mozilla.org/zh-CN/firefox/addon/operator）等瀏覽器外掛從頁面中提取詳細資訊。

在建立了第一個hCard之後，理解hCalendar就沒有什麼困難了。首先，需要把活動列表包裝在一個元素中，將這個元素的class屬性值設定為vevent。在這個元素內部，至少要包含兩段資訊：開始日期（使用類名dtstart）和說明（使用類名summary）。此外，也可以選擇http://microformats.org/wiki/hcalendar中列出的其他可選的屬性，包括結束日期工持續時間、地點，以及包含更詳細資訊的頁面URL。下面來看一個例子：

<div class="vevent">
    <h2 class="summary">Web Developer Clam Bake</h2>
    <p>I'm hosting a party!</p>
    <p>It's
    <span class="dtstart" title="2011-10-25T13:30">Tuesday, October 25,
    1:30PM</span>
    at the <span class="location">Deep Sea Hotel, San Francisco, CA</span>
    </p>
</div>

在格式化日期時，必須使用3.1.1節介紹的通用日期格式。不過，也有一個折中的方案，即通過title屬性提供計算機可以理解的日期資訊，然後在頁面中顯示任何格式的日期。遺憾的是，目前微格式還不能自動使用HTML5 元素的datetime屬性中的資訊（稍後就會介紹到，微資料標準解決了這個問題）。

3.2.4 Microdata

Microdata（微資料）是嘗試解決語義標記問題的另一種選擇。它最早是HTML5規範的一部分，後來分離出來成為一個獨立的標準：http://dev.w3.org/html5/md/。微資料採用的方法與RDFa類似，但簡化了一些。另外，與微格式不同，它使用自己的屬性，因而不存在與樣式表規則衝突的風險（也不會讓Web開發人員感到困惑）。這種設計意味著微資料更講究邏輯性，而且更容易改編為適合你網頁的語言。不過這一切是以犧牲簡潔性為代價的，採用微資料的網頁要比採用微格式的網頁大很多。

注意 作為最新的語義標準，在HTML5興起的這一波浪潮中，微資料是可以乘勢而上，還是為其他既定的標準讓路（比如以簡潔見長的微格式和以滿足複雜需求為目標的各種RDFa應用形式），目前還不明朗。但無論如何，學習微資料還是值得的。下一節我們將會介紹，谷歌已經支援微資料，而且讓它看起來很像RDFa。這樣，無論將來哪個標準流行，你都可以順暢地切換過去。

在標註微資料的時候，首先要給相應元素（如果連元素也需要新新增，那

<div itemscope itemtype="http://data-vocabulary.org/Person">
    ...
</div>

標識資料型別時，要使用一個叫XML名稱空間的預定義的、獨一無二的字串。在這個例子中，http://data-vocabulary.org/Person就是XML名稱空間，其中定義了用於編寫聯絡人資訊的資料格式。

XML名稱空間一般是URL形式的。有時候，在瀏覽器中開啟相應的URL，可以看到對相應資料型別的說明（就像你開啟http://data-vocabulary.org/Person一樣）。不過，XML名稱空間不一定非要在網上有對應的頁面，甚至不必是URL形式。換句話說，是什麼形式，完全取決於建立相應格式的人。URL形式的好處是利用個人或公司的域名，從而確保名稱空間的唯一性。這樣，就不應該有其他人使用同一個名稱空間來建立不同的資料格式，也就避免了混淆。

定義完容器元素後，就可以開始下一步了。在容器元素內，使用itemprop屬性來標註重要資訊。這種方式與微格式的基本規則相同——通過公認的itemprop名稱，其他軟體可以從關聯的元素中取得資訊。實際上，微資料與微格式最重要的不同，就是微資料標註元素時使用itemprop屬性，而不是class屬性。

<div itemscope itemtype="http://data-vocabulary.org/Person">
    <span itemprop="name">Mike Rowe Formatte</span>.
    ...
</div>

微資料與微格式相比，結構上可以更復雜一些。例如，微資料的一種資料型別可以巢狀另一種資料型別。就說聯絡人資訊吧，你可以在其中嵌入幾條地址資訊。從技術上講，所有地址資訊都由一個資料型別定義，而這個資料型別則通過一個不同的XML名稱空間來標識。因此，需要另外用一個

<div itemscope itemtype="http://data-vocabulary.org/Person">
    ...
    <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">42 Jordan Gordon Street,
        6th Floor</span><br>
        <span itemprop="locality">San Francisco</span>,
        <span itemprop="region">CA</span>
        </span>
</div>

知道了這個規則，我們可以使用微資料來改進之前的“About Me”頁面（見3.2.3節）。以下是最終的結果，修改的地方都加粗了：

<h1>About Me</h1>

<div itemscope itemtype="http://data-vocabulary.org/Person">
    <img itemprop="photo" src="face.jpg" alt="Mike's Face">
    <p>This website is the work of
    <span itemprop="title" style="display:none">Web Developer</span>
    <b itemprop="name">Mike Rowe Formatte</b>.
    His friends know him as <b itemprop="nickname">The Big M</b>.</p>

    <p>You can contact him where he works, at
    <span itemprop="affiliation">The Magic Semantic Company</span> (phone
    <span itemprop="tel">641-545-0234</span> and ask for Mike).</p>

    <p>Or, visit him there at:<br>
    <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">42 Jordan Gordon Street,
        6th Floor</span><br>
        <span itemprop="locality">San Francisco</span>,
        <span itemprop="region">CA</span>
        <span itemprop="postal-code">94105</span><br>
        <span itemprop="country-name">USA</span><br>
    </span>
    <a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics.
    com</a>
</div>

讀者可能注意到了，這個例子與前面hCard的例子很相似。儘管屬性名從class變成了itemprop，但屬性的值卻幾乎相同（不同的只有fn變成了name，org變成了affiliation）。如果你熟悉RDFa，甚至會發現更多一致之處，因為微資料和RDFa使用的都是http://www.data-vocabulary.org/Person/資料格式。

注意 這三種富語義資料標準——RDFa、微資料和微格式——很多地方都是相似的。雖然它們不完全相容，但使用其中一種標準的技能，多數情況下都適用於其他標準。

微資料有一個明顯的缺陷：還沒有任何瀏覽器外掛或者JavaScript指令碼從頁面中提取這些資料。不過，微資料對於增強網頁搜尋效果還是很有用的，而這正是下一節要介紹的主題。

（完）