HTML5中<article>和<section>有什么区别？

Question

在HTML5中何时应使用<article>和<section>标签？

- happenask

---

您有什么特别的编程问题？ - jogo

你需要一种类似备忘录的东西。在这里或其他地方查找，以便在下次困惑时使用：http://www.w3.org/TR/html-markup/elements.html - lordkain

希望这个链接能够满足您的需求：http://www.hongkiat.com/blog/html5-section-article-elements/ - soorapadman

从什么时候开始，问题不能涉及导致混淆的语言/标记特性了呢？ - QuentinUK

Answer 1

<section>标签：

<section>标签定义文档中的章节，例如章节、标题、页脚或其他任何文档部分。

<article>标签：

<article>标签指定独立的、自包含的内容。

一篇文章应该自成一体，并且可以独立于站点的其余部分进行分发。

文章元素的潜在来源：

• 论坛帖子
• 博客文章
• 新闻故事
• 评论

基本上，这些标签是语义元素，它们之间唯一的真正区别在于可读性和设计喜好。

如果您愿意，可以在此处阅读更多有关它们的信息：

• http://www.w3schools.com/html/html5_semantic_elements.asp
• http://www.w3schools.com/tags/tag_article.asp
• http://www.w3schools.com/tags/tag_section.asp

- Nick Zuber

---

这与React组件有何关联？您认为“组件”一词在含义上更接近于“文章”还是“部分”？ - Alex McMillan

@AlexMcMillan，我认为React组件的概念只是不同数据的容器。这些HTML5标记只是语义化描述数据的方式，因此它们与React组件有点无关，更多地与内容相关。 - Nick Zuber

哦，我明白了；这只是一个思考练习。当构建与文档/博客（或“文章”）没有多少共同之处的应用程序时，很难选择语义上正确的HTML5标签。 - Alex McMillan

你对section标签的定义是循环的。并没有确切地定义文档的部分是什么，以及它不是什么。 - Jan Turoň

Answer 2

文章标签

文章标签用于包装页面上的自主内容。如果可以将内容从页面中删除并放置在其他页面上，则该内容是自主的。

节标签

节标签类似于div标签，但它更有意义，因为它包装了相关内容的逻辑组（例如文章的章节）。

关于语义标签的更多信息 - https://www.pluralsight.com/guides/semantic-html

- vijayscode

---

@vijayscode - 你的解释太棒了。 - Abolfazl Roshanzamir

很好的回答，我只是在section标签中添加了一些缺失的标题信息，请看我的回答。 - Jan Turoň

Answer 3

@vijayscode的答案非常清晰，我只是添加了标准的引用和一个真实世界的例子。

节

section元素表示文档或应用程序的通用部分。在此上下文中，部分是具有标题的内容的主题分组。 一般规则是，如果元素的内容将在文档大纲中明确列出，则section元素是适当的。

MDN更加强调需要有标题：

除极少数情况外，部分应始终具有标题。

文章

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

那么它们之间有什么区别呢？

看看BBC新闻上的“必看”、“最受欢迎”、“完整故事”等部分-它们可能是“部分”（尽管在源中它们当前使用更通用的divs），它们包含标题和照片&链接块，这些块指向其他地方的主要内容，因此它们的含义取决于站点的其他部分。当您单击其中一些时，您会进入一个页面，在该页面的主要内容中包含一篇文章。它可以独立存在于站点的其余部分之外。

复杂的文章可以包含章节（如Perex、Conclusion或Sources）。而章节可以包含多个短文章。

- Jan Turoň

Answer 4

除了上述内容之外：让我们以电影为例。电影本身将是文章，而每个场景都将成为一节。

- MakMao

Answer 5

如果你以这个页面为例， 问题可以放在一个section标签中，答案放在另一个section标签中，而撰写新答案则放在另一个section标签中。 在答案部分，每个答案可以放在一个article标签中。 因此，section用于定义页面的不同部分，而article通常用于包装类似的内容，比如在博客文章列表中的每篇博文。 希望这样能解释清楚。

- 1N4N0

Answer 6

section标签

当您只想装饰页面上的任何内容，即您想添加一些功能时，可以使用 section 标签，该标签也可以被 tag 替换。当网页的内容适合内容大纲且浏览器不会关注大纲时，section 标签将非常有用。

article标签

article 标签是一个自我完成的标签，可用于任何需要 article 标签的情况，此外，article 标签独立放置内容。Article 标签可用于放置任何社交帖子、杂志文章、博客、相关内容列表、任何独立内容。

如果您的内容包含日期、价格、作者、描述等，则使用 article 标签。基本上，使用 article 标签来包含可共享的内容，显然是针对实际文章的。将您的博客文章放在其中。

如果您的内容包含制作或创建某些依赖于某些东西的过程，则使用 section 标签，例如 div，当它描述您的文档大纲时。

- Abolfazl Roshanzamir