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>标签的文章后，我不确定这是最好的做法。什么是更好的实践?

Answer 1

关于文章和节，重要的是要理解它们是节元素。每个都遵循一个共同的模式:

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

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

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

例如，一个部分可能有一个自然的标题"cars For sale"。极有可能的是，从该部分包含的内容中，可以明显看出该部分是关于出售汽车的，而包含标题将是多余的信息。

<section>倾向于用于分组。它们的标题通常是复数的。如。"汽车出售"

<article>表示内容单位。它们的自然标题通常是其后整个文本的标题。如。《我的新车》

所以，如果你没有对某些东西进行分组，那么就没有必要，也不正确，在section的页眉和页脚之间使用另一个section元素你的正确标记应该是

<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"。这样做将允许章节/文章被文档大纲清晰地引用。

Answer 2

<article> content

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

(来自html5工作规范)

实际上其中一个例子说明了嵌套的<article>元素内部的<article>在<section>

Answer 3

你为什么不认为这是一个很好的举动?在我看来，Tweet完全符合W3C关于文章内容的规范。这很可能取决于您的示例代码所在的上下文(我们无法从您提供的内容中判断)。

也可以这样写

Answer 4

语义并不那么重要。如果你愿意的话，你完全可以这么做，而且会很好。article与section的使用之争在某种程度上是完全主观的。我不建议您在第二个版本中这样做，因为它似乎只会使代码更加混乱。您可以做的就是将section标签替换为article标签。

Answer 5

我花了很多时间才理解它，因为它似乎让很多人感到困惑，但它确实应该从字面上看。下面是查看它的简单方法:

Sections可以包含来自不同主题的元素。文章应该包含来自同一主题的元素。

例如:

<section>
    <section>
        <article id="article_ONE">
            <header>...</header>
            <p>Not directly related to article_TWO</p>
            <footer>...</footer>
        </article>
    </section>
    <section>
        <article id="article_TWO">
            <article>
                <header>...</header>
                <p>Part 1 of article TWO</p>
                <footer>...</footer>
            </article>
            <article>
                <header>...</header>
                <p>Part 2 of article TWO</p>
                <footer>...</footer>
            </article>
        </article>
    </section>
</section>