HTML5中的<section>标签有什么含义?

15

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

这是官方定义维基页面,还有更多文档,但他们没有解释正确的用法,除非在非常简单的例子或以不同的方式。

我目前所理解的:

<section>定义页面的一部分(章节),例如博客列表、头条新闻、博客文章列表、评论列表,以及所有具有共同主题的内容。

<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>标签基础的讨论可能会有用,但我无法找到它。

注:我正在寻找带有权威来源文件的回复。

4个回答

4

http://www.w3.org/wiki/HTML/Elements/section并非官方定义section的来源。 section的定义在HTML5规范中,目前是候选推荐(这是编辑草案的快照)。

在CR中,section定义为

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

section是一个分区内容元素(与articleasidenav一起)。这些分区元素和标题(h1-h6)创建了一个大纲

以下三个示例在语义上是等价的(具有相同的含义和相同的大纲):

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

所以每当您使用 h1-h6 时,都可以使用 section (无论何时)。当您需要一个单独的条目但不能(或不想)使用标题时,可以使用 section
另请注意,headerfooter 始终属于其最近的区段内容(或区段根元素,如 body,如果没有区段元素)元素。换句话说:每个 section/article/aside/nav 元素都可以有自己的 header/footer
"

articleasidenav 可以说是 section 元素的更具体变种。

"

两种完全不同的用法

这两种用例并不那么不同。在“容器”情况下,您可以说section代表文档的一章,而在“章节”情况下section代表文章/内容的一章(当然,这是文档的一部分)。

同样地,有些标题用于为网页部分命名(如“导航”,“用户菜单”,“评论”等),而有些标题用于为内容命名(例如“我的第一天”,“我最喜欢的书籍”等)。


“更具体”是指articlesection的更具体的等价物吗? - Fez Vrasta
@FezVrasta:是的(谢谢,我已经更改了我的回答中的措辞)。原则上,您可以在适当的大纲条目处随处使用“section”,然后开始将这些“section”元素替换为“article”|“aside”|“nav”,如果它们的相应定义与您的内容匹配。 - unor
关于你最后的编辑:现在我们似乎正在浏览旧好的DOM领域,它被认为是文档(就像Writer文档一样),现在用于适配复杂布局网站,而这些网站远非文档。哦,互联网! - Fez Vrasta

2

好的,以下是我从权威来源中收集的信息。

MDN

HTML Section元素(<section>)表示文档的通用部分,即具有主题的内容分组,通常带有标题。

使用说明:

如果将 <section> 元素的内容单独合成一篇文章,则应使用 <article> 元素。 不要将 <section> 元素用作通用容器;这就是 <div> 的用途,特别是当仅为样式目的而分段时。一个经验法则是,一节在文档大纲中应该具有逻辑上的出现。 。

Shay Howe's guide

一个部分更容易被认为是 <div>,而不是 <article>。作为块级元素,<section> 被定义为表示通用文档或应用程序的部分。

确定什么时候使用 <section> 而不是 <div> 的最佳方法是看实际的内容。如果内容块可以作为数据库中的记录存在,并且不需要显式用作CSS样式钩子,则最适合使用 <section> 元素。应使用节来分隔页面,提供自然层次结构,并通常具有适当的标题。

dev.opera.com

基本上,<article> 元素是独立的内容片段,可以在当前页面外部理解并很好地进行综合。这些内容包括博客文章、视频及其转录、新闻报道或连续故事的单个部分。

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


我已更新了页面示例并使用 HTML5 Outliner 进行了检查,看起来没问题,因此也许可以以这种方式使用它们。 - Fez Vrasta
我的回答已经更新,包括了Opera对这个话题的看法。 - Mariyan
W3C也将article用于评论,但我认为在上下文之外它们没有意义。 - Fez Vrasta
我同意你的看法。也许如果评论实际上是信息的核心,而不是在新闻文章下方,那就好了。 - Mariyan

2

<article><section>都是分区内容元素。您可以将一个分区元素嵌套在另一个元素内,以将外部元素切分成多个小节。

HTML Living Standard, 4.4.11

... 分区内容元素始终被视为其最近的祖先分区根元素或分区内容祖先元素的子分区,无论其他标题创建了什么隐含的分区。 ...

您可以将<section>视为通用分区元素。它类似于<div>,定义了最近分区父级(或最近的分区根元素,可能是<body>)内的一个小节。

<article>也是一个分区,但它具有一些语义。即,它表示自包含的内容(也就是说,它可能是自己的页面,而且仍然有意义)。


有道理,但是来源呢? - Fez Vrasta
"Programming is not about what you know, it's about what you can figure out." - cHao

1
这是关于“section”的官方w3c解释:

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

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

我猜,理论上如果你在文章内部嵌套另一篇文章,那么你的嵌套选择示例可能有效。但是,为什么会在文章内部有一篇文章呢?这样做没有多少语义意义。


这篇文章中的文章是W3C提供的一个示例,而我的则是在一个部分内包含另一个部分的文章。 - Fez Vrasta

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接