文章列表的語義 HTML

Question

在典型的文章索引（如沒有摘錄的博客）中，像這樣的圖片：

這些項目應該是一個列表（ <ul><li> ）還是只是 div？

而且，它們應該是數字/無花果？ 因為有一定的道理，而且...圖片是文章的一部分而不是主要內容，所以標題/描述可能不是圖像的標題，而是文章的標題。

你怎么看？

編輯：一個活生生的例子 - https://news.google.com/?hl=en

Answer 1

我會為每個片段使用一篇article （即新聞預告片）。

每篇article的標題包含一個h1元素，圖像包含一個img元素，文本包含一個p元素。

由於您可能想要鏈接到完整版本，您可以將所有元素包含在一個a元素中（HTML5 中允許），或者僅包含標題等。

所以它可能看起來像：

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

如果此圖像本身應具有單獨的標題，則僅使用figure 。 新聞描述（此處包含在p ）通常不是該圖像的標題。

您可以更改article子項的順序。 由於分段元素的工作方式，標題不必是第一個元素。

您可以使用ul ，但這不是必需的。 但是，只有當順序對於理解內容確實有意義時才應該使用ol （即不同的順序會改變文檔的含義）。 典型示例：如果項目按相關性排序（例如最相關的預告片在頂部），您應該使用ol 。

---

關於你的問題，如果預告片應該是一篇article ：

不要將article （HTML5 元素）與術語“文章”（英語）混淆。 article有一個單獨的定義，不一定與對“文章”一詞的理解有關。

Teaser 也應該是article ——teaser article和全文article是不同的article ，盡管它們指的是同一個實體。

Answer 2

這里的答案還有很多不足之處。 HTML 規范有一個帶有注釋的博客文章標記示例。

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

雖然接受的答案復制/粘貼了如何使用<article>元素的描述，但它根本沒有回答所提出的問題。

這是來自 W3.ORG 的答案

如果您可以使用原生 HTML 元素 [HTML51] 或已內置您需要的語義和行為的屬性，而不是重新利用元素並添加 ARIA 角色、狀態或屬性以使其可訪問，那么就這樣做。

這是我在研究后繼續進行的邏輯：我有一個評論列表。 每條評論都按有用的投票排序。 因此，第一級將是一個有序列表，因為評論將按其有用的投票排序。 否則，無序列表就足夠了，例如嵌套注釋：

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

@Terrill Thompson 的一個有見地的回答解釋說，語義列表標記有助於屏幕閱讀器。 所以是的， <article>的列表確實有意義。 隨着事情變得復雜，他提到了它是多么令人困惑。 這是絕對應該添加和測試 ARIA、 role和tabindex屬性的地方。

該答案有一條評論，將用戶引導至W3.ORG上的對話。 根據定義， <article>似乎不會成為它應該是“獨立內容”的列表的一部分。 然而，這里的問題，我自己，也許你正在閱讀這篇article需要更深入的答案，其中article適用於真實的文章列表。

比如：

• 帶摘錄的博客文章列表
• 搜索結果
• 評論
• 評論

Answer 3

這是一個意見問題，因此歸結為偏好。 根據您的圖像，我會使用<ul> <li>雖然我可以使用 div 獲得相同的結果。

Answer 4

如果每個項目代表一篇文章，那么每個項目都應該使用<article>元素來表示。

如果你覺得這是一個有序或無序列表的文章，那么你可以分別使用<ol>或<ul>元素。

我建議保持標記盡可能簡單，並在必要時盡可能復雜，因此請遵循以下原則：

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>

Answer 5

正如其他人所說，我認為每篇文章都應該標上article標簽。

我還建議用aside標簽包圍整個列表。 因此，如果頁面中有一篇主條目（用main包圍），則不會受到其他條目的影響。

這是一篇關於aside的好文章。