2011-08-04 63 views
19

對HTML5的<article>標籤讀取an article正確的用法,我真的覺得我最大的困惑是在本節的第一個問題:HTML5 - 的<article>標籤

使用<article>提供了更多的語義的內容。相比之下<section>只是相關內容塊,並<div>僅僅是內容的塊...要決定這三個要素是合適的,選擇第一個合適的選擇:

  1. 會內容將使意義在飼料讀者自己?如果是這樣,請使用<article>
  2. 內容是否相關?如果是這樣,請使用<section>
  3. 最後,如果沒有語義關係,使用<div>

所以我想我的問題是真的:在Feed閱讀器屬於什麼類型的內容?

回答

6

W3C規範留下了很多開放的解釋,最終歸結於作者的意見。下面是一個簡短的問題形式答案:

什麼是你想要在頁面上分享的主要重要內容?

這裏有幾個例子:

  • 在這個非常頁面,每個答案可能的文章。
  • 在flickr 每個照片顯示在照片流中可以被視爲一篇文章。
  • 在運球在頁面上顯示的每個鏡頭可能是一篇文章。
  • 在谷歌列出的每個搜索結果可能是一篇文章。
  • 在博客上的每篇文章..以及每篇文章可能是一篇文章。
  • 在包含文章和一系列評論的博客頁面上,您可能有兩個主要部分。一篇文章和另一篇文章的評論每個評論可以被視爲一篇文章。

這是作者的判斷,他們想要走多遠。大多數博客作者都爲他們的文章提供RSS源,但其他博客作者可能也會提供評論和共享鏈接。

很多人都寫過這個話題。欲瞭解更多信息,我強烈建議閱讀:

17

該規範回答了這個很清楚:

文章元素表示 文檔,頁面,應用程序或網站自包含的成分,那就是,在原則上, 獨立分發或重複使用,例如在聯合。這 可能是一個論壇的帖子,一本雜誌或報紙上的文章,博客條目, 用戶提交的評論,一個互動的小部件或小工具,或中的任意內容 其他獨立項目。

見:http://dev.w3.org/html5/spec/Overview.html#the-article-element

+1

即您認爲是您網頁上的獨立內容項目 – Maple

+1

問題出在「獨立」一詞。例如,用戶提交的博客文章評論可以只是說「是的,我也是」。被認爲是獨立的?我相信它可以,並且使用文章元素是合適的,但不難看出其他人可能會得出結論,認爲它不是獨立的。 – Alohci

+1

同意。我認爲像這些微妙的標記決定是您作爲開發人員在個案基礎上作出的選擇。人們對標準的解釋總是會有所不同,根據你對標準的理解,你應該選擇你認爲最好的。 – Maple

7

你提出了一個很好的理由,是的規範也相當明確界定<article>作爲內容的聚合,值得收藏。我看到它的方式,您的文章將成爲撰寫的博客文章 - 您作爲網站的內容編寫者產生的內容。雖然對該部分的評論與文章有關,但實際上並不屬於文章的範圍,應該將其放入<section>中的另一個區塊,可以是非語義<div>或簡單地<p>,也可以是display:block。這是設計師的一個決定,取決於他們如何在語義上評估評論的價值。

別忘了,你有<aside>標籤,這幾乎是解說量身定做,無論是從作者或讀者。

4

大多數訂閱用戶可以使用多種類型的內容,它可以用於包括複製,圖像,視頻等飼料您將包括在您的網站是不斷重複或包括多種版本的內容。問答網站將提供新問題。視頻分享網站會提供新視頻。軟件評論網站將提供新軟件或新評論。

我建議您考慮一下您的內容的典型用戶想要在其閱讀器中輕鬆找到哪些內容。您可以定義供稿閱讀器中包含哪些類型的內容。

2

Feed閱讀器,在一般情況下,應該包含新聞的列表。看看http://google.com/elections/ - 這是一個feed閱讀器可能包含的東西的一個很好的例子。重要的部分是所有的故事都是獨立的,理論上根本不需要關聯。

0

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

該文檔可能看起來像的標記如下:

<body> 
    <header>...</header> 
    <nav>...</nav> 
    <article> 
      <section> 
       ... 
      </section> 
    </article> 
    <aside>...</aside> 
    <footer>...</footer> 
</body> 

你可能在this article on A List Apart找到更多的信息。