Html 部分与文章 HTML5

Section vs Article HTML5

提问by James Hay

I have a page made up of various "sections" like videos, a newsfeed etc.. I am a bit confused how to represent these with HTML5. Currently I have them as HTML5 <section>s, but on further inspection it looks they the more correct tag would be <article>. Could anyone shed some light on this for me?

我有一个由各种“部分”组成的页面，如视频、新闻源等。我有点困惑如何用 HTML5 表示这些。目前我将它们作为 HTML5 <section>s，但经过进一步检查，它们看起来更正确的标签是<article>. 有人可以为我解释一下吗？

None of these things are blog posts or "documents" in the true sense of the word so it's kind of hard to see which element to apply.

这些东西都不是真正意义上的博客文章或“文档”，因此很难看出要应用哪个元素。

Cheers

干杯

EDIT: I have opted to use the articletag since it seems to be a container tag for unrelated elements which I guess my "sections" are. The actual tagname article however seems to be rather misleading and although they are saying HTML5 has been developed with greater consideration for web applications, I find a lot of the tags to be more blog-centric / document based.

编辑：我选择使用article标签，因为它似乎是不相关元素的容器标签，我猜我的“部分”是。然而，实际的标记名文章似乎相当具有误导性，尽管他们说 HTML5 的开发已经更多地考虑了 Web应用程序，但我发现很多标记更以博客为中心/基于文档。

Anyway thanks for your answers it appears to be fairly subjective.

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

采纳答案by Justin

In the W3 wiki page about structuring HTML5, it says:

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

<section>：用于将不同的文章分组为不同的目的或主题，或用于定义单个文章的不同部分。

And then displays an imagethat I cleaned up:

然后显示我清理过的图像：

It also describes how to use the <article>tag (from same W3 link above):

它还描述了如何使用<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:

<article>与 相关<section>，但明显不同。而<section>对于分组的内容或功能不同的部分，<article>是包含内容相关的各个独立的部件，如个人博客文章，视频，图片或新闻项目。可以这样想 - 如果您有许多内容项，每个项都适合单独阅读，并且可以在 RSS 提要中将其联合为单独的项目，那么<article>适合标记它们。

在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为 RSS 提要中的一个项目进行联合，并且在脱离上下文单独阅读时是有意义的，因此 <article>非常适合他们：

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

回答by steveax

Sounds like you should wrap each of the "sections" (as you call them) in <article>tags and entries in the article in <section>tags.

听起来您应该将每个“部分”（如您所称）包装在<article>标签中，并将文章中的条目包装在<section>标签中。

The HTML5 specsays (Section):

在HTML5规范说（部分）：

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.

section 元素代表文档或应用程序的通用部分。在此上下文中，节是内容的主题分组，通常带有标题。[...]

部分的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号部分。一个网站的主页可以分成几个部分，分别是介绍、新闻项目和联系信息。

注意：当联合元素的内容有意义时，鼓励作者使用 article 元素而不是 section 元素。

And for 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.

article 元素代表文档、页面、应用程序或站点中的独立组合，也就是说，原则上可以独立分发或重用，例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。

I think what you call "sections" in the OP fit the definition of article as I can see them being independently distributable or reusable.

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

Update:Some minor text changes for articlein the latest editors draft for HTML 5.1(changes in italic):

更新：HTML 5.1article的最新编辑器草案中的一些小的文本更改（斜体更改）：

The article element represents a complete, orself-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.

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

Also, discussion on the Public HTML mailing list about articlein Januaryand Februaryof 2013.

此外，关于公共HTML邮件列表上的讨论article在一月和二月的2013。

回答by mnsr

I'd use <article>for a text block that is totally unrelated to the other blocks on the page. <section>, on the other hand, would be a divider to separate a document which have are related to each other.

我将<article>用于与页面上的其他块完全无关的文本块。 <section>，另一方面，将是分隔相互关联的文档的分隔符。

Now, i'm not sure what you have in your videos, newsfeed etc, but here's an example (there's no REAL right or wrong, just a guideline of how I use these tags):

现在，我不确定您的视频、新闻提要等中有什么，但这里有一个示例（没有真正的对或错，只是我如何使用这些标签的指南）：

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

As you can see, the sections are still relevant to each other, but as long as they're inside a block that groups them. Sections DONT have to be inside articles. They can be in the body of a document, but i use sections in the body, when the whole document is one article.

如您所见，这些部分仍然彼此相关，但只要它们位于将它们分组的块内。部分不必在文章内。它们可以在文档的正文中，但是当整个文档是一篇文章时，我会在正文中使用部分。

e.g.

例如

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

Hope this makes sense.

希望这是有道理的。

回答by Michael Jasper

I like to stick with the standard meaning of the words used: An articlewould apply to, well, articles. I would define blog posts, documents, and news articles as articles. Sections on the other hand, would refer to layout/ux items: sidebar, header, footer would be sections. However this is all my own personal interpretation -- as you pointed out, the specification for these elements are not well defined.

我喜欢坚持所用词的标准含义：Anarticle将适用于文章。我会将博客文章、文档和新闻文章定义为articles. 另一方面，部分是指布局/用户体验项目：侧边栏、页眉、页脚是部分。然而，这完全是我个人的解释——正如你所指出的，这些元素的规范没有很好地定义。

Supporting this, the w3cdefines an articleelement as a section of content that can independently stand on its own. A blog post could stand on it's own as a valuable and consumable item of content. However, a header would not.

支持这一点，w3c将article元素定义为可以独立存在的内容部分。一篇博客文章可以作为一种有价值且可消耗的内容独立存在。但是，标题不会。

Hereis an interesting article about one mans madness in trying to differenciate between the two new elements. The basic point of the article, that I also feel is correct, is to try and use what ever element you feel best actually represents what it contains.

这是一篇有趣的文章，内容涉及一个人试图区分这两种新元素的疯狂行为。这篇文章的基本观点，我也认为是正确的，是尝试使用你认为最能代表它所包含的内容的任何元素。

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.

更成问题的是文章和章节非常相似。将它们分开的只是“独立”这个词。如果有一些硬性规定，决定使用哪个元素会很容易。相反，这是一个解释问题。您可以在一个部分中有多个文章，您可以在文章中包含多个部分，您可以在部分中嵌套部分和在部分中嵌套文章。由您决定在任何给定情况下哪个元素在语义上最合适。

Hereis a very good answer to the same question here on SO

这是对 SO 上同一问题的一个很好的答案

回答by Captain Sensible

The flowchart below can be of help when choosing one of the various semantic HTML5 elements:

在选择各种语义 HTML5 元素之一时，下面的流程图可能会有所帮助：

回答by Anand Singh

Section

部分

• Use this for defining a section of your layout. It could be mid,left,right,etc..
• This has a meaning of connection with some other element, put simply, it's DEPENDENT.

• 使用它来定义布局的一部分。这可能是mid，left，right，等。
• 这具有与其他元素连接的含义，简单地说，它是依赖的。

Article

文章

• Use this where you have independent content which make sense on its own .

• Article has its own complete meaning.

• 在您拥有独立内容的地方使用它，这些内容本身就有意义。

• 文章有其完整的含义。

回答by Nick Manning

A section is basically a wrapper for h1(or other htags) and the content that corresponds to this. An articleis essentially a document within your document that is repeated or paginated...like each blog post on your document can be an article, or each comment on your document can be an article.

一个部分基本上是h1（或其他h标签）和与此相对应的内容的包装器。一个article基本上是你的文档中的文件，重复或分页...喜欢上您的文档每篇博客文章可以是文章，或在您的文档的每个评论可以是文章。

回答by albert

also, for syndicated content "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 元素而不是 section 元素。”

回答by userX

My interpretation is: I think of YouTube it has a comment-section, and inside the comment-section there are multiple articles (in this case comments).

我的解释是：我认为 YouTube 有一个评论部分，在评论部分中有多篇文章（在这种情况下是评论）。

So a section is like a div-container that holds articles.

所以一个section就像一个存放文章的div-container。

回答by Avinash Malhotra

Article and Section are both semantic elements of HTML5. Section is block level generic section of a webpage, but relevant to our webpage content. Article is also block level, but article refers to an individual blog post, a comment, of a webpage.

Article 和 Section 都是 HTML5 的语义元素。部分是网页的块级通用部分，但与我们的网页内容相关。文章也是块级别，但文章是指网页的单个博客文章、评论。

Both Article and Section should include an heading elements h2-h6.

Article 和 Section 都应该包含一个标题元素 h2-h6。

For a blog post, use following syntax for article and section.

对于博客文章，文章和部分使用以下语法。

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>