html - HTML5部分标签的含义？

Question

我知道关于这个话题有很多问题，但我找不到答案的权威来源。

这是官方定义和wiki页面，还有更多文档，但如果不是非常简单的示例或不同的方式，它们并没有解释正确的用法。

到目前为止我“理解”的是：

<section>定义页面的一部分（部分），如 blogrolls、头条新闻、博客条目列表、评论列表以及所有可能与共同主题相关的内容。

<article>定义了一个内容，它与页面的其余部分 (?) 有疏离感，并且只有一个主题（博客条目、评论、文章等）。

但是，在内部<article>，我们可以使用将它的部分分割成多个部分<section>，在这种情况下，它具有容器的功能，可以标记更大文本的章节。

疑问

如果这些句子是正确的（或部分正确），则意味着<section>有两个完全不同的用例。

我们可以这样写一个页面：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>Fruits</title>
    </head>

    <body>

        <h1>Fruits war blog</h1>

        <section id="headlineNews"> <!-- USED AS CONTAINER -->

            <h1>What's new about fruits?</h1>   
            <article><h1>Apples are the best</h1>Apples are better than bananas</article>
            <article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>

        </section>

        <section id="blogEntries"> <!-- USED AS CONTAINER -->

            <h1>Articles about fruits</h1>

            <article>
                <h1>Apples vs Bananas</h1>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>Introduction:</h2>
                    Bananas have always leaded the world but...
                </section>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>The question:</h2>
                    Who is the best? We don't know so much about apples...
                </section>
            </article>

        </section>

    </body>
</html>

这就是大纲的外观：

1. Fruits war blog
   1. What's new about fruits?
      1. Apples are the best
      2. Apple's cakes
   2. Articles about fruits
      1. Apples vs Bananas
         1. Introduction:
         2. The question:

那么<section>是不是具有两个完全不同且不相关的语义含义的思想呢？

是否正确使用：

<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>

以这种嵌套的方式？
我发现可以以相反的方式使用：

<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>

但是我找不到我在下面写的方式的答案。

我想阅读 W3C 小组编写<section>标签基础的讨论可能很有用，但我找不到它。

注意我正在寻找有权威来源记录的回复

score 4 · Accepted Answer

http://www.w3.org/wiki/HTML/Elements/section不是. _ _ 在 HTML5 规范中定义，目前是候选推荐（是编辑草案的快照）。sectionsection

在 CR 中，section定义为：

该section元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组，通常带有标题。

section是一个分段内容元素（与article,aside和一起nav）。这些分段元素和标题 ( h1- h6) 创建了一个大纲。

以下三个示例在语义上是等价的（含义相同，轮廓相同）：

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…&lt;/p>
<h2>Waking up</h2>
<p>…&lt;/p>
<h2>The big moment!</h2>
<p>…&lt;/p>
<h2>Going to bed</h2>
<p>…&lt;/p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…&lt;/p>
  <section>
    <h2>Waking up</h2>
    <p>…&lt;/p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…&lt;/p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…&lt;/p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…&lt;/p>
  <section>
    <h1>Waking up</h1>
    <p>…&lt;/p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…&lt;/p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…&lt;/p>
  </section>
</section>

所以你可以section 在任何时候使用 (*)你使用h1- h6。当您section需要在大纲中单独输入但不能（或不想）使用标题时，您可以使用。

另请注意，headerandfooter始终属于其最近的祖先分段内容（或分段根，如body，如果没有分段元素）元素。换句话说：每个section// article/元素都可以有自己的aside/ 。navheaderfooter

article，aside并且nav可以说是元素的更具体的变体section。

两个完全不同的用例

这两个用例根本没有什么不同。在“容器”案例中，您可以说它section代表文档的一章，而在“章节”案例中，section代表文章/内容的一章（当然，它是文档的一部分）。

同理，有些标题用于给网页部分命名（如“导航”、“用户菜单”、“评论”等），有些标题用于标题内容（“我的第一天”、“我的最喜欢的书”等）。

score 2 · Accepted Answer

<article>并且<section>都是切片内容。您可以将一个切片元素嵌套在另一个元素中，以将外部元素分割成多个部分。

HTML 生活标准，4.4.11：

... 分段内容元素始终被视为其最近祖先分段根或分段内容的最近祖先元素的子部分，以最近者为准，无论其他标题可能创建了哪些隐含部分。...

您可以将 a<section>视为通用切片元素。它就像 a<div>在其最近的切片父级（或最近的切片根，可能是<body>）中定义一个部分。

An<article>也是一个部分，但它确实有一些语义。也就是说，它表示自包含的内容（也就是说，它可能是它自己的页面，并且仍然有意义）。

score 2 · Accepted Answer

好的，这是我从权威来源收集的内容。

MDN：

HTML Section Element () 表示文档的通用部分，即内容的主题分组，通常带有标题。

使用说明：

如果单独联合一个元素的内容是有意义的，请改用一个元素。不要将元素用作通用容器；这就是目的，特别是当切片仅用于样式目的时。一个经验法则是，一个部分应该在逻辑上出现在文档的大纲中。

谢豪的指南：

与文章相比，部分更容易与 div 混淆。作为块级元素，section 被定义为代表一个通用文档或应用程序部分。

确定何时使用 section 和 div 的最佳方法是查看手头的实际内容。如果内容块可以作为记录存在于数据库中并且没有明确需要作为 CSS 样式挂钩，那么 section 元素最适用。部分应该用于分解页面，提供自然的层次结构，并且最常见的是有一个适当的标题。

dev.opera.com

基本上，article 元素用于在当前页面上下文之外有意义的独立内容片段，并且可以很好地联合。此类内容包括博客文章、视频及其文字记录、新闻故事或连载故事的单个部分。

另一方面，section 元素用于将页面内容分解为不同的功能或主题区域，或者将文章或故事分解为不同的部分。

score 1 · Accepted Answer

这是官方的 w3c 部分：

http://www.w3.org/wiki/HTML/Elements/section

引用：“[section] 元素表示文档或应用程序的通用部分。”

我想，理论上，如果您在一篇文章中有一篇文章，那么您的嵌套选择示例可能会起作用。但是，你为什么要在一篇文章中有一篇文章？几乎没有语义意义。

html - HTML5部分标签的含义？

疑问

4 回答 4

Related

Reference