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>标签上阅读了一些articles之后，我不确定这是最好的举措。什么是更好的做法？

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”。这样做将允许文档大纲干净地引用部分/文章。

Answer 2

<article>内容

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

（from the html5 working spec）

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

内

Answer 3

为什么你认为这不是一个好的举动？在我看来，Tweet完全符合W3C规范应该在文章中的内容。它很可能取决于您的示例代码所处的背景（我们无法从您提供的内容中得知）。

It could also be put this way.

Answer 4

语义并不重要。你可以很好地做到这一点，如果你想，它会没事的。 article与section使用辩论的问题在于，这一切都是主观的。我会建议你不要在第二个版本中使用它，因为它似乎只会使代码更混乱。您可以做的只是将section标记替换为article标记。

Answer 5

我经历了相当多的努力去理解它，因为它似乎让很多人感到困惑，但它确实应该更加真实地看待它。这是一个简单的方法来看待它：

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

例如：

<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>

HTML5 - 正确使用文章标签？

5 个答案: