Article 元素的正确用法是什么？

Question

我想改变

<section>
  <header>...</header>
  <p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>

进入

<section>
  <header>...</header>
  <article class="tweet">
    <p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
  </article>
</section>

但是在阅读了一些 关于 <article> 标签的文章后，我不确定这是最好的一步。什么是更好的做法？

原文由 Wex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

了解文章和部分的重要一点是它们是分段元素。每个都遵循一个共同的模式：

 <sectioning_element>
    <heading_or_header>
    ... the body text and markup of the section
    <footer>
</sectioning_element>

页脚是可选的。分节元素应该有一个“自然”的标题。也就是说，在节/文章的开头写一个 <h?> 元素应该很容易，它描述和总结了节/文章的全部内容，这样页面上的其他内容不在节/文章不会由标题描述。

没有必要在页面上明确包含自然标题，例如，如果标题是什么是不言而喻的，并且出于风格原因您不想显示它，但您应该能够轻松地说出它会是什么如果您选择包含它。*

例如，一个部分可能有一个自然标题“待售汽车”。极有可能从该部分中包含的内容来看，该部分显然是关于待售汽车的，并且包括标题将是多余的信息。

<section> 往往用于对事物进行分组。它们的自然标头通常是复数。例如“待售汽车”

<article> 用于内容单元。它们的自然标题通常是后面整个文本的标题。例如“我的新车”

因此，如果您不对某些内容进行分组，那么就没有必要在节的页眉和页脚之间使用另一个节元素，而且您的正确标记是

<article class="tweet">
  <header>...</header>
  <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>

假设您可以找到一个自然标题进入 <header> 元素。如果不能，那么正确的标记就是

<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>

要么

<div class="tweet">
     <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>

---

\* 无论如何都包含自然标题，并将其设置为“display:none”。这样做将使文档大纲清楚地引用该部分/文章。

原文由 Alohci 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<article> 内容

表示文档、页面、应用程序或站点中的自包含组合，原则上可以独立分发或重用，例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、 交互式小部件或小工具，或任何其他独立的内容项。

（ 来自 html5 工作规范）

事实上，其中一个示例说明了嵌套的 <article> 元素，其中内部 <article> 位于 <section>

原文由 MikeM 发布，翻译遵循 CC BY-SA 3.0 许可协议