HTML5中的Section和Article区别

Question

HTML5中的Section和Article区别

279

我有一个页面，由各种“部分”（如视频、新闻源等）组成。我有点困惑如何用HTML5表示它们。目前，我将它们作为HTML5的<section>，但经过进一步检查，似乎更正确的标签应该是<article>。有人可以为我解释一下吗？这些东西都不是真正意义上的博客文章或“文档”，所以很难看出应该应用哪个元素。

编辑：我选择使用article标签，因为它似乎是一个非相关元素的容器标签，我想我的“部分”也是如此。然而，实际的标签名称“article”似乎是具有误导性的，尽管他们说HTML5已经更加考虑了Web应用程序，但我发现许多标签更偏向于博客/文档。无论如何，感谢您的回答，看起来这相当主观。

- James Hay

5

使用 section 进行翻译。 - Ilia Choly

@illia choly：我同意你的观点，其实并没有真正的对或错。 - Farhan stands with Palestine

2

简洁的解释和示例[MDN]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article） - randominstanceOfLivingThing

9个回答

139

听起来你应该在每个“部分”（你称之为）中使用<article>标签，并在文章中使用<section>标签进行条目划分。 HTML5规范表示（章节）：

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

部分的示例可能是章节，选项卡对话框中的各种选项卡页或论文的编号部分。网站主页可以分成介绍，新闻稿和联系信息等部分。

注意：鼓励作者在有意将元素内容发布时使用

元素代替

元素。

而对于Article

元素表示独立分布或可重复使用的自包含构成部分在文档，页面，应用程序或站点中的组合，例如，在发行中。这可以是论坛帖子，杂志或报纸文章，博客文章，用户提交的评论，交互式小部件或设备，或任何其他独立的内容项目。

我认为你在OP中所说的“部分”符合文章的定义，因为我能看到它们可以被“独立分布或可重复使用”。 更新: HTML 5.1最新编辑草案中article的一些微小文字更改(斜体显示):

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

此外，有关article的讨论在2013年1月和2月的公共HTML邮件列表中进行。

- steveax

17

在网上搜索时，我找到了一份法律文件，其中写着“第1条，第2节，第3款”。我希望这可以帮助我记住这个逻辑。 - commonpike

3

在一定程度上，我不同意，但我也认为根据上下文可以进行切换。阅读规范描述让我觉得，如果“文章”充当“小部件”，那么应该反过来。section表示“主题分组”和“文档部分”，article则表示“独立自成体的”和“小部件”。考虑一个主页示例，如http://codepen.io/anon/pen/iDEwf。 - daleyjem

2

为什么他们说一篇单独的论坛帖子就可以成为一篇文章呢？在我看来，没有其他帖子的支持，一个论坛帖子是不完整的。 - masterxilo

8

这是颠倒的。W3C明确指出section是内容的主题分组，而article是独立的元素（即可归为一个主题组）。可以将其类比为报纸：在每个版块中都可以找到许多文章。例如，在娱乐版块中可以找到电影评论文章。 - Chuck Le Butt

4

同 @Chuck 的观点一致。在我看来，这个答案完全颠倒了。Justin的答案更加合适。但是好吧，我想规范留下了很多解释的余地。不确定这是好事还是坏事。 - maryisdead

显示剩余4条评论

48

如果一个文本块与页面上的其他块完全没有关系，我会使用<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>

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

例如：

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

希望这有意义。

- mnsr

6

“我会使用<article>来表示页面上与其他块毫无关联的文本块。” 我知道您是在2011年写的这句话，但是，这不是<aside>标签的用途吗？ - MyDaftQuestions

@MyDaftQuestions 不是的。<aside> HTML 元素代表文档中内容与主要内容只间接相关的部分。旁注通常呈现为侧边栏或强调框。 - Alex78191

34

以下流程图可以帮助您选择各种语义化HTML5元素：

- Captain Sensible

23

我更倾向于使用单词的标准意义：文章应该指的是文章。我会将博客文章、文档和新闻文章定义为“文章”。而“节”则指布局/用户体验项目：侧边栏、页眉和页脚都可以称作“节”。然而这只是我的个人解释，正如你所指出的，这些元素的规范并没有明确定义。

支持这一观点，w3c 将 article 元素定义为一段可以独立存在的内容。博客文章可以作为有价值和可消费的内容单独存在。但是，页眉不行。这里有一篇有趣的文章讲述了一个人在试图区分这两个新元素时的疯狂之处。文章的基本观点也是我认同的，就是尽可能地使用最符合它所包含内容的元素。

更加棘手的是 article 和 section 如此相似。唯一的区别在于 “自包含” 这个词。如果有一些硬性的规定来决定该使用哪个元素，那么问题就不那么严重了。但现在，这只是一个解释问题。在一个 section 中可以有多个 article，一个 article 中也可以包含多个 section，你可以嵌套 section 和 article。你需要决定在给定情况下哪个元素最符合语义。

这里是一个非常好的回答相同问题的 SO 的帖子。

- Michael Jasper

8

章节

用于定义布局中的一个部分。可以是mid、left、right等。
这表示与其他元素有联系，简单地说，它是依赖性的。

文章

在独立内容中使用此选项，该内容本身就有意义。
文章具有自己的完整含义。

- Anand Singh

4

一个 section 基本上是一个包装器，用于 h1（或其他 h 标签）和与之对应的内容。而 article 实质上是文档内的一个文件，可以重复出现或分页显示...就像你的每篇博客文章都可以成为一个 article，或者你的每条评论都可以成为一个 article。

- Nick Manning

2

我的理解是：我认为YouTube有一个评论区，在评论区内有多篇文章（在这种情况下是评论）。

因此，一个section就像是一个包含文章的div容器。

- userX

2

此外，对于合成内容，“鼓励作者在可以合成元素内容时使用文章元素而不是节元素。”

- albert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin · Accepted Answer

在 W3 HTML5结构化元素的wiki页面中写道：

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

并展示了一张我整理过的图片：

enter image description here

它还介绍了如何使用与其相关的<article>标签（来自同一W3链接）：

<article>与<section>有关，但是明显不同。而<section>是用于分组内容或功能的不同部分，<article>用于包含相关的独立内容片段，例如单个博客帖子、视频、图像或新闻项目。这样想——如果您有许多内容项，每个内容项都适合单独阅读，并且作为独立项在RSS feed中发布时会有意义，则使用<article>进行标记。

在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为RSS feed中的一项进行发布，并且单独阅读时会有意义，因此<article>非常适合它们：

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

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

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

简单吧？但要注意，您还可以在文章中嵌套小节，如果有必要的话。例如，如果这些博客文章的每个部分都具有一致的结构，则可以在文章中放置小节。可能会看起来像这样：

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

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

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