HTML5 - 正确使用文章标签？

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?>在部分/文章的开头编写一个元素应该很容易,它描述和总结了部分/文章的整个内容,这样就不会在页面/文章内部的页面上的其他内容进行描述按标题.

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

例如,一个部分可能有一个自然标题"汽车待售".从该部分中包含的内容来看,很明显该部分是关于待售汽车的,并且包括标题在内的将是多余的信息.

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

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

(来自html5工作规范)

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