的文章列表

在文章的典型指標（如無摘錄一個博客）這樣的形象的語義HTML：的文章列表

example

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

而且，他們應該是圖/ figcaption？因爲會有一定意義，但也...圖片是artcile的一部分，而不是主要內容，所以也許標題/描述不是圖像的標題，而是文章的標題。

你覺得呢？

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

2013-10-10 felixjet

我認爲語義標記取決於內容。而你沒有提供任何。 – Alohci

增加了一個生動的例子 – felixjet

像大多數關於「語義HTML」的問題一樣，這是對規範草案中模糊陳述的意見和解釋。 –

我會使用每個片斷的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。

關於your question如果傳情應該是一個article：

不要用術語「製品」（英文）混淆article（HTML5元素）。 article有一個單獨的definition，這不一定與理解術語「文章」有關。

的預告片也應該是一個article - 傳情article和全文article被不同article S，儘管它們指的是同一實體。

2013-10-11 12:15:28 unor

實際上你應該使用'li'來訪問。當您輸入'ul'時，屏幕閱讀器會通知用戶列表中有多少項目，從而有助於導航和整體用戶體驗。 – Cthulhu

這與使用'section'這樣的另一個語義標籤作爲'article'標籤的容器相比如何？ –

@NicolasMcCurdy：你通常會使用一個'section'（或者有時候'aside'代替它）來分組所有這些'article'元素，是的。 – unor

這是一個觀點問題，以便它歸結爲偏好。根據你的圖片，我會使用<ul> <li>，儘管我可以使用div獲得相同的結果。

2013-10-10 23:06:56

如果每個項目代表一篇文章，則應使用<article> elements代表每篇文章。

如果您覺得它是有序或無序的文章列表，則可以分別使用<ol>或<ul>元素。

我會建議保持標記儘可能簡單和複雜的需要，所以事沿着線：

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

2013-10-10 23:18:29 zzzzBov

但即使每個項目代表一篇文章，不是一篇文章，只是一篇文章的鏈接，不？ – felixjet

正如其他人所說，我認爲每篇文章應該標有article標籤。

我還建議用aside標記環繞整個列表。因此，如果您在頁面中有一篇主要文章（包含main），則不會受到其他文章的影響。

這裏是關於aside的nice article。

2016-07-20 07:29:54 gamliela

回答