Question

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

这是official definition和wiki page，并且有more documentation，但如果没有以非常简单的示例或以不同的方式解释它们的正确用法

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

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

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

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

怀疑

如果这些句子正确（或部分正确），则意味着<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>

用这种方式？我发现is possible以反向方式使用：

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

但我无法找到我在下面写的方式的答案。

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

N.B。我正在寻找使用授权来源记录的回复

Answer 1

http://www.w3.org/wiki/HTML/Elements/section 不 section的官方定义。 section是defined in the HTML5 specification，目前是候选推荐标准（Editor’s Draft的快照）。

在CR中，section为defined为：

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

section是sectioning content元素（与article，aside和nav一起使用。这些切片元素和标题（h1 - h6）会创建outline。

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

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

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

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

因此，您可以使用section whenever (*)使用h1 - h6。如果您需要在大纲中单独输入但不能（或不想）使用标题，则使用section。

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

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

两个完全不同的用例

这两个用例完全不同。在“容器”案例中，您可以说section代表文档的一个章节，而在“章节”案例中section代表文章/内容的一个章节（当然，ouf当然是文件的一部分）。

以同样的方式，一些标题用于标题网页部分（如“导航”，“用户菜单”，“评论”等），并且一些标题用于标题内容（“我的第一天”），“我最喜欢的书”等。）。

Answer 2

好的，这就是我从授权来源收集到的内容。

MDN：

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

使用说明：

如果单独联合元素的内容是有意义的，请改用元素。不要将该元素用作通用容器;这是为了什么，特别是当切片仅用于造型目的时。根据经验，一个部分应该在逻辑上出现在文档的轮廓中。

Shay Howe's guide：

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

确定何时使用部分与div相比的最佳方法是查看手头的实际内容。如果内容块可以作为数据库中的记录存在，并且不明确需要作为CSS样式挂钩，则section元素最适用。应该使用章节打破页面，提供自然的层次结构，最常见的是具有正确的标题。

dev.opera.com

基本上，article元素用于在当前页面的上下文之外有意义的独立内容，并且可以很好地进行联合。这些内容包括博客文章，视频及其成绩单，新闻报道或连续故事的单个部分。

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

Answer 3

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

HTML Living Standard, 4.4.11：

... 切片内容元素始终被视为其最近的祖先切片根的子部分或切片内容的最近祖先元素，以最接近的为准，无论其他标题可能创建的隐含部分如何。 ...

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

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

Answer 4

以下是w3c官方部分：

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

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

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

HTML5部分标签含义？

怀疑

4 个答案: