為網(wǎng)頁內(nèi)容添加結(jié)構(gòu)和語義的hAtom微格式

我們這次來討論hAtom微格式,這個微格式用來為網(wǎng)頁內(nèi)容添加結(jié)構(gòu)和語義從而使得網(wǎng)頁內(nèi)容或者局部內(nèi)容可以被廣播(syndication),比如博客日志或者新聞文章等。
歷史:Atom
hAtom微格式是建立在Atom XML同步格式基礎(chǔ)之上的。跟之前hCard和hCalendar不同,hCard和hCalendar都和傳統(tǒng)數(shù)據(jù)格式有著1:1的對應(yīng)關(guān)系,但是hAtom同Atom之間卻沒有這種直接的對應(yīng)關(guān)系。Atom是一個很穩(wěn)定的模型,能夠為內(nèi)容廣播提供非常多的功能。而hAtom僅僅是提供必須的元素,因此更像是Atom的子集。由此說來,hAtom具有的屬性和子屬性也都是基于Atom原有的術(shù)語而來的。
微內(nèi)容(并不需要)廣播
盡管hAtom基于Atom,hAtom本身并不是一個廣播格式。hAtom的作者和編輯──David Janes──解釋說:
“… hAtom was never intended to be a “syndication format” nor to compete with Atom or RSS. It’s simply designed to describe the microcontent on webpages, such as blog posts. We used Atom because it provides a well-defined nomenclature for describing such elements.”(譯:hAtom從來都不是為了作為“廣播格式”存在,更不是為了同Atom或者RSS之間競爭。他就是用來描述網(wǎng)頁中的為內(nèi)容,比如博客日志。我們使用Atom是因為他提供了很好的術(shù)語可以描述這樣的元素。)
所以,hAtom不是專門為了那些需要廣播的網(wǎng)頁內(nèi)容的。不過,為了這篇文章的目的,我會在博客日志的基礎(chǔ)上討論,而博客日志通常是需要支持廣播的網(wǎng)頁內(nèi)容。
基礎(chǔ)知識
在討論hAtom細(xì)節(jié)之前,讓我們來看一下基礎(chǔ)的規(guī)則(同hCard和hCalendar類似):
- 屬性和子屬性通過class值來表示
- 因為同Atom的關(guān)系,規(guī)范中的hAtom屬性和子屬性基本對應(yīng)Atom的元素
- 屬性和子屬性名稱大小寫敏感
- “根”屬性不能和其他屬性或子屬性組合,因此<p class="hfeed author">是無效的
還是,對所有微格式適用:包含他們的標(biāo)記元素是什么不重要(雖然應(yīng)該是有效并且具有語義的)。Class的值(屬性或子屬性)決定了hAtom微格式。
Profile
如果您選擇使用hAtom,同樣應(yīng)該在網(wǎng)頁的<head>代碼中加上他的Profile說明:
<head profile=”http://purl.org/uF/hAtom/0.1/”>
對hCard和hCalendar,我提過使用組合Profile,可以覆蓋所有非提案微格式:
<head profile="http://purl.org/uF/2008/03/“>
不過,hAtom是提案規(guī)范,他的Profile沒有涵蓋在組合Profile里面,所以,還是需要明確的指明他。如果您還引用組合Profile,可以簡單的添加hAtom Profile(W3C 允許 多個profile值,使用空格隔開即可):
<head profile="http://purl.org/uF/2008/03/ http://purl.org/uF/hAtom/0.1/“>
示例:單一日志
背景信息差不多了,現(xiàn)在我們來看實際的hAtom,下面的hAtom信息是描述我的博客日志全文的:
- <div class=”hentry”>
- <h3 class=”entry-title”>Web Accessibility Is Important</h3>
- <abbr class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008</abbr>
- <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel=”tag”>Commentaries</a></p>
- <p><a href="#commentForm" title="Post your own comment">Got something to say?</a></p>
- <div class=”entry-content”>
- <p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
- …
- </div>
- <dl>
- <dt>Tags:</dt>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel=”tag”>accessibility</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel=”tag”>standards</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel=”tag”>web design</a></dd>
- </dl>
- </div>
根屬性:hfeed
hAtom的根屬性是hfeed,他可以包含一個或者更多條目(在上面例子上,條目就是博客日志)。這個根屬性是可選的。如果沒有明確包含根屬性,默認(rèn)假設(shè)他已經(jīng)存在于頁面中了,上面的例子中就沒有包含根屬性。如果必要的話,頁面中可以包含多個hfeed。
必要屬性:hentry
每個條目必須包含在hentry屬性中。如之前提過的,可以應(yīng)用一個或多個hentry屬性。上面例子中,只有一個hentry是因為這個實現(xiàn)是應(yīng)用在顯示博客某一日志全文的頁面中。我會在文章后面討論如何使用多個條目。
hentry屬性包括了條目的所有信息。
必要子屬性:entry-title
entry-title是必需的子屬性之一,用來說明條目的題目。在上面例子中,我為<h3>應(yīng)用了entry-title屬性,因為作為題目,把他放在“頭條”結(jié)構(gòu)中是具有一定語義信息的。
必要子屬性:author
author是另一條必需的子屬性,用來說明條目的作者。根據(jù)規(guī)范說米功能,包含在author子屬性中的內(nèi)容必須使用標(biāo)記上hCard的<address>元素。
注意:不要顯示作者名字
但是,也還有很多實際操作的例子中,發(fā)布者并不在意列舉出作者名字,包括我的博客。hAtom的規(guī)范默認(rèn)了這種情況并允許可以不在hentry屬性中包含作者信息,不過是在當(dāng)頁面本身已經(jīng)包括了hCard的信息,并含有指定class="author"子屬性的<address>元素。這個方案也在hAtom 的FAQ中作了解釋。
因為我在我所有頁面的頁腳中都包括了hCard實現(xiàn),所以,我沒有在hAtom信息中包含author子屬性,這樣做是有效的。對于那些多作者協(xié)作的博客,如果他們不希望顯示作者名字,目前還沒有有效的方案。author必須出現(xiàn)在hentry屬性中。我可以想象使用CSS方案來取消顯示(display:none)可能也是可以接受的。
注意:address和hCard
上面的討論涉及到另外一個問題:實現(xiàn)hCard時使用<address>。
在第三部分討論中曾經(jīng)提到過,為hCard使用<address>元素只有在hCard是文檔擁有者時才有效。hCard的FAQ中也強(qiáng)烈建議不要在hCard不是文檔擁有者時候使用<address>。因此,如果hAtom的條目由不是文檔擁有者創(chuàng)作的話,<address>不是合適的語義元素。
這個問題目前還在討論中。目前的建議是取消<address>的限制。
必要子屬性:updated
updated子屬性也是必需的,他表明條目最后被修改和更新的日期/時間。這里也有需要注意的事情:如果updated子屬性沒有被定義,子屬性published將會用來表明日志更新的日期/時間。在上面的例子中,您會注意到我并沒有包含updated子屬性,不過使用了published。
可選子屬性:published
published是可選的子屬性,基本上同updated的語義是一致的,都是表明條目的更新時間。盡有的區(qū)別在于,published更傾向于描述條目第一次發(fā)布的時間,而updated可以是發(fā)布的時間或者是條目后來更新的時間。如果同時包含published和updated來描述條目的日期時間信息也是有效的:
<abbr class="published updated” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008</abbr>
在我的例子中,僅僅使用published就符合我的目的了,所以我選擇只使用他。
日期時間設(shè)計模式
對于updated和published,hAtom推薦使用的時間和日期格式跟我們之前討論的日期時間設(shè)計模式相同:
<abbr class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008</abbr>
該模式定義容器元素為<abbr>,在title屬性中指定機(jī)器可讀的日期/時間信息,而在內(nèi)容中指定人類可讀的日期/時間信息。而且,在title中包含的時間日期信息應(yīng)該遵循ISO 8601格式要求。
可選子屬性:entry-summary
entry-summary是可選的子屬性。他說明條目的摘要信息。這個子屬性可以在hentry中多次使用。在我的博客中,我沒有為文章生成這樣的摘要,所以我沒有提供這個子屬性的實現(xiàn)。
可選子屬性:entry-content
entry-content是另一個可選的子屬性,用來說明條目的全文內(nèi)容。在上面的例子中,所有的文章內(nèi)容都被包含在<div class="entry-content">元素中。同樣,可以在hentry中使用多次entry-content屬性。
可選:rel-bookmark
hAtom還定義了一個rel屬性值來說明條目的永久鏈接:bookmark。在第一部分中,我們討論了很多基于rel-的微格式,用來表明鏈接(<a>)和文檔之間的關(guān)系。rel-bookmark也是用來描述鏈接關(guān)系的,不過不能作為微格式單獨使用。必須作為hAtom的屬性存在,描述文檔內(nèi)容的永久鏈接。
使用hAtom,您可以簡單的在條目的永久鏈接上添加rel="bookmark":
<a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel=”bookmark”>Web Accessibility Is Important</a>
您可能會注意到,在我的例子中沒有提供永久鏈接。這是因為我通常遵循一條規(guī)則:不在頁面中提供本文鏈接(Nielsen’s #10 of the Ten Most Violated Homepage Design Guidelines)。而且因為rel-bookmark是可選的,所以我的實現(xiàn)是有效的。如果hentry沒有指明永久鏈接,那么就會缺省認(rèn)為本頁鏈接為條目永久鏈接。如果hentry中定義了id屬性,該值會被拼接到URL后面來為條目定義唯一值。
組合微格式來定義分類
之前我們在第一部分中討論過rel-tag 微格式。他用來添加到鏈接(<a>)) 說明網(wǎng)頁──或者網(wǎng)頁的局部內(nèi)容──是關(guān)于什么內(nèi)容的?;緛碚f,通過標(biāo)簽來組織/分類已經(jīng)在博客中廣泛使用。hAtom可以充分發(fā)揮rel-tag的作用,只需要在hfeed和hentry中做出實現(xiàn):
- 在hfeed中包含指定rel="tag"的鏈接,但鏈接在hentry之外的,會被認(rèn)為是“feed的分類”
- 在hentry中包含指定rel="tag"的鏈接表明是“條目的分類”
在前面的例子中,我在hentry中使用了rel-tag鏈接:
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/” rel=”tag”>Commentaries</a></p>
<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/” rel=”tag”>web design</a></dd>
注意就是rel-tag規(guī)范中要求鏈接目的地址(href)中必須包括“標(biāo)簽”的值作為URL的最后一段,這被設(shè)計為“標(biāo)簽空間”。
例子:多日志
上面已經(jīng)討論了hAtom的大部分細(xì)節(jié),應(yīng)該給出一個例子說明如何應(yīng)用在多日志的頁面中。在我的博客上,在首頁中添加了hAtom信息,用來描述我最近的三篇日志:
- <div class=”hentry”>
- <h3 class=”entry-title”><a href=”http://www.ablognotlimited.com/articles/web-accessibility-is-important/” rel=”bookmark”>Web Accessibility Is Important</a></h3>
- <abbr class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008</abbr>
- <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel=”tag”>Commentaries</a></p>
- <div class=”entry-content”>
- <p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
- …
- </div>
- <p><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel=”bookmark”>Continue Reading</a></p>
- <dl>
- <dt>Tags:</dt>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel=”tag”>accessibility</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel=”tag”>standards</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel=”tag”>web design</a></dd>
- </dl>
- </div>
- <div class=”hentry”>
- <h3 class=”entry-title”><a href=”http://www.ablognotlimited.com/articles/plateau/” rel=”bookmark”>Plateau</a></h3>
- <abbr class=”published” title=”2008-08-27T13:59:51-07:00″>Aug 27, 2008</abbr>
- <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel=”tag”>Commentaries</a></p>
- <div class=”entry-content”>
- <p>As I posted previously, I'm doing the one hundred push ups challenge: a six-week program designed to get me able to do 100 consecutive push ups. I am now on my seventh week.</p>
- </div>
- <p><a href="http://www.ablognotlimited.com/articles/plateau/" rel=”bookmark”>Continue Reading</a></p>
- <dl>
- <dt>Tags:</dt>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/exercise/" rel=”tag”>exercise</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/fitness/" rel=”tag”>fitness</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/push+ups/" rel=”tag”>push ups</a></dd>
- </dl>
- </div>
- <div class=”hentry”>
- <h3 class=”entry-title”><a href=”http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/” rel=”bookmark”>Getting Semantic With Microformats, Introduction</a></h3>
- <abbr class=”published” title=”2008-09-05T07:05:34-07:00″>Sep 5, 2008</abbr>
- <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel=”tag”>Commentaries</a></p>
- <div class=”entry-content”>
- <p>I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.</p>
- …
- </div>
- <p><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel=”bookmark”>Continue Reading</a></p>
- <dl>
- <dt>Tags:</dt>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/French+translation/" rel=”tag”>French translation</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/hAtom/" rel=”tag”>hAtom</a></dd>
- <dd><a href="http://www.ablognotlimited.com/articles/tag/hCalendar/" rel=”tag”>hCalendar</a></dd>
- …
- </dl>
- </div>
在這個例子中,我使用了多個hentry實例,每一個用來描述一篇日志。并且,我為每一篇日志都指定了永久鏈接,因為他們并沒有指向當(dāng)前頁面。除了上出兩個不同之外,hAtom基本上跟我之前的例子是一樣的。
可能的實現(xiàn)
除了我上面的兩個例子,還有很多可以實現(xiàn)hAtom的頁面:
- 在存檔頁面中的日志列表
- 條目的搜索結(jié)果
- 電子布告欄
- 評論
我正在考慮在存檔和搜索結(jié)果頁面中實現(xiàn)hAtom(還包括評論頁面,因為那里需要hCard實現(xiàn))。
提案狀態(tài)
在這個系列中提及的微格式中,hAtom是最難的一個。我個人覺得這是因為這個微格式還是一個提案狀態(tài)的規(guī)范。不過,我遇到的實現(xiàn)困難還都是很小的,不過也有點小挫?。?/p>
- 關(guān)于hAtom和他的屬性/子屬性只有很少的信息
- 有一系列問題還處于討論階段,比如<address>的使用
- 支持hAtom的工具和資源還相對較少
- 現(xiàn)在已有的hAtom生成器目前還沒有跟上規(guī)范的進(jìn)度,還沒有包括一些上面提到的注意問題,除了author和rel-bookmark
所以,從個人角度,我認(rèn)為畢竟他還處于提案狀態(tài),還需要被修改和討論。但我并不認(rèn)為就不去實現(xiàn)hAtom,最起碼也可以先熟悉熟悉他。只要注意他還在提案狀態(tài)就可以了。
工具和資源
雖然前面提過現(xiàn)在支持hAtom的工具和資源還很少,我們還是可以列舉一些:
- WordPress Sandbox主題是一個可以自定義的框架主題,他支持hAtom
- Frances Berriman寫了一個hAtom PHP WordPress循環(huán)可以被添加到現(xiàn)有的WP主題中
- Michael Kaply為Firefox的附加組件Operator寫了hAtom用戶腳本。該腳本可以為hentry的出現(xiàn)添加書簽功能
- 還有hAtom轉(zhuǎn)換器可以從頁面中提取hAtom信息并自動轉(zhuǎn)化為XML文件,作為廣播的Atom源
- hAtom2Atom使用XSLT把hAtom轉(zhuǎn)換為Atom格式的XML
- Luke Arno寫的使用hAtom2Atom的代理,還有來自Chris Casciano的使用hAtom2Atom的過濾腳本
- Optimus 是支持hAtom的微格式轉(zhuǎn)換器,此外,他還提供支持hAtom的驗證器
- hAtom transcoder是另一個轉(zhuǎn)換器,不僅僅支持輸出Atom 1.0,還支持輸出RSS 2.0
更多實際操作
盡管hAtom是提案規(guī)范,但是還是有很多服務(wù)提供支持:
- Google在Notebook服務(wù)中為hAtom永久鏈接添加功能
- Blogger的新布局引擎系統(tǒng)支持hAtom
- Spinn3r為他的2.1博客索引服務(wù)添加了hAtom的entry-content支持
還有更多實際的hAtom支持。
好處
(X)HTML廣播
我想hAtom最酷的一個好處就是他為XHTML廣播帶來的潛力。在工具和資源列表中,我提到了幾個轉(zhuǎn)換器,他們利用XSLT把帶有hAtom的XHTML轉(zhuǎn)換為XML,從而提供Atom或者RSS的源。這意味著不需要再為了廣播去生成或者維護(hù)單獨的Atom或者RSS的XML文件。簡單的利用hAtom和這些轉(zhuǎn)換器就可以完成廣播XML的自動生成。
自己試試吧。需要做的僅僅是在包含hAtom信息的URL前面拼接這些轉(zhuǎn)換器(http://transformr.co.uk/hatom/):
<a href="http://transformr.co.uk/hatom/http://www.ablognotlimited.com/“>Atom feed for A Blog Not Limited</a>
產(chǎn)生的鏈接會自動生成Atom格式的XML:
我還沒有為我的站點實現(xiàn)這個轉(zhuǎn)換,因為我使用自定義的RSS源。不過這些轉(zhuǎn)換器絕對在我的實驗列表中。
語義
您不會認(rèn)為我忘了這點吧?
借助于已有的標(biāo)準(zhǔn)(XHTML元素和屬性),微格式為網(wǎng)絡(luò)內(nèi)容添加結(jié)構(gòu)和語義。語義能夠同時幫助人類和機(jī)器來處理、搜索和理解互聯(lián)網(wǎng)。微格式鼓勵您使用互聯(lián)網(wǎng)標(biāo)準(zhǔn)……標(biāo)記內(nèi)容的標(biāo)準(zhǔn)化方法,應(yīng)用class信息,還包括開發(fā)的正確流程。
語義很棒。標(biāo)準(zhǔn)很棒。微格式很棒。
譯注:Syndication翻譯為“廣播”不知道合適不合適,以前一直提RSS,但是還真從來沒想過或者查過如何翻譯合適。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性,用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級,本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式;通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26