部分与文章HTML5 - 薇晓朵文档中心

问题描述

我有一个由各种”sections” 喜欢的视频，新闻源等组成的页面。我有点困惑如何用 HTML5 代表这些。目前我将它们作为 HTML5 <section>，但是在进一步的检查中，它看起来更正确的标签是<article> 。有没有人可以为我这样做？

这些东西都不是博客帖子或”documents” 在真正的意义上，所以很难看到要应用哪个元素。

干杯

编辑：我选择使用 article 标签，因为它似乎是不相关元素的容器标签，我猜我的”sections” 是。然而，实际的标记名文章似乎是相当误导性的，尽管他们认为 HTML5 已经开发出更多的 web 应用程序，我发现很多标签要更多的是 blog-centric /文档。

无论如何感谢您的答案，似乎是相当主观的。

最佳解决方案

听起来你应该在<article> 标签和<section> 标签中文章中的条目中包装”sections”(您称之为) 。

HTML5 spec 说 (部分)：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. […]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

和 Article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

我认为你所说的”sections” 在 OP 中符合文章的定义，因为我可以看到它们是独立可分发的或可重用的。

更新：latest editors draft for HTML 5.1 中的 article 的一些小的文字更改 (斜体更改)：

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

另外，关于 2013 年 January 中的 article 和 February 的公共 HTML 邮件列表的讨论。

次佳解决方案

在 W3 wiki page about structuring HTML5 中，它说：

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

然后显示我清理的 an image：

它还描述了如何使用<article> 标签 (来自上面的 W3 链接)：

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way – if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

第三种解决方案

我将使用<article> 作为与页面上其他块完全无关的文本块。另一方面，<section> 将是分隔开彼此相关的文档的分隔符。

现在，我不知道你在你的视频，新闻源等方面有什么，但这里是一个例子 (没有真正的对错，只是我使用这些标签的指南)：

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

正如你所看到的，这些部分仍然是相互关联的，但是只要它们在一个对其进行分组的块中。文章 DONT 必须在内。它们可以在文档的正文中，但是当整个文档是一篇文章时，我会使用正文中的部分。

例如

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

希望这是有道理的。

第四种方案

我喜欢坚持使用词语的标准含义：article 将适用于文章。我将定义博客文章，文档和新闻文章为 articles 。另一方面，部分将参考布局/ux 项目：侧边栏，页眉，页脚将是部分。然而，这是我自己的个人解释 – 正如你所指出的，这些元素的规范没有明确定义。

支持这一点，w3c 将 article 元素定义为可以独立自主的内容部分。博客文章可以自己作为一个有价值和可消耗的内容项目。但是，标题不会。

Here 是一篇有趣的文章，关于一个人的疯狂，试图区分两个新元素。文章的基本点，我也觉得是正确的，是尝试使用你觉得最好的元素实际上代表它包含什么元素。

What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.

Here 对于 SO 上同样的问题是非常好的答案

参考文献

Section vs Article HTML5

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

部分与文章 HTML5