首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >HTML5 -文章标签的恰当使用?

HTML5 -文章标签的恰当使用?
EN

Stack Overflow用户
提问于 2011-08-05 03:32:39
回答 5查看 25.4K关注 0票数 30

我想改变

代码语言:javascript
复制
<section>
  <header>...</header>
  <p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>

转到

代码语言:javascript
复制
<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之后,我不确定这是不是最好的做法。什么是更好的实践?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-08-05 05:42:33

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

代码语言:javascript
复制
<sectioning_element>
    <heading_or_header>
    ... the body text and markup of the section
    <footer>
</sectioning_element>

页脚是可选的。截面图元应该有一个“自然”的标题。也就是说,在小节/文章的开头编写一个描述和总结小节/文章的整个内容的<h?>元素应该很容易,这样页面上不在小节/文章内的其他内容就不会被标题描述。

没有必要在页面上明确地包含自然的标题,例如,如果标题是不言而喻的,并且出于样式原因,你不想显示它,但你应该能够很容易地说出如果你选择包括它,它会是什么。

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

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

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

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

代码语言:javascript
复制
<article class="tweet">
  <header>...</header>
  <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>

假设您可以在<header>元素中找到一个自然的标题。如果不能,那么正确的标记只是简单地

代码语言:javascript
复制
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>

代码语言:javascript
复制
<div class="tweet">
     <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>

*无论如何都有理由包含自然标题,并将其设置为"display:none“。这样做将允许文档大纲清晰地引用小节/文章。

票数 35
EN

Stack Overflow用户

发布于 2011-08-05 03:44:25

<article>内容

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

(from the html5 working spec)

实际上,其中一个示例演示了嵌套的<article>元素,其中内部<article>位于<section>内部

票数 10
EN

Stack Overflow用户

发布于 2011-08-05 03:39:44

你为什么不认为这是个好举动呢?在我看来,Tweet完全符合W3C规范,即文章中应该包含的内容。这很可能取决于您的示例代码所处的上下文(我们无法从您提供的内容中区分出来)。

It could also be put this way.

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6947489

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档