嵌套HTML5 section标签

Question

嵌套HTML5 section标签

41

这是使用 <section> 标签的正确方式吗？

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

我正在考虑是否应该只使用一个部分ID，而将另外两个部分作为div来处理？

- styler

3

HTML5规范关于section元素的说明： - zzzzBov

6个回答

11

注意：

我的回答严重过时，由于HTML在过去十年中的变化，不再包含可靠的建议。我将保留这个回答以作为历史记录，但请注意，所建议的结构并非最佳实践——特别是关于使用已过时的文档大纲。

简短回答：您提供的代码在语义上无效。

长篇回答：

section元素用于标记内容的各个部分。每个部分(例如介绍、摘要、内容、结论)都可以有子部分。

如果您正在使用这些元素进行结构目的，则应改用div元素。它们在语义上没有意义。

以下代码更具语义：

<section id="introduction">
  <div id="outer">
    <div id="inner">
      Some content
    </div>
  </div>
</section>

这将是一种标记嵌套部分的语义化方式：

<section id="content">
  <h1>Fizz Buzz</h1>
  <section id="chapter-1">
    <h1>Foo bar baz</h1>
    ...
  </section>
  <section id="chapter-2">
    <h1>Lorem ipsum dolor</h1>
    ...
  </section>
  ....
</section>

- zzzzBov

4

第一个标签没问题，它不仅是用于样式的容器。但我在这里看到了另一个问题：在 SEO 上，使用多个 h1 标签不是好主意，而且嵌套部分的标题应使用下一个 "h" 标签。例如，内容应使用 h2，章节应使用 h3。 - jazzgot

@jazzgot，请阅读HTML5规范（http://www.w3.org/TR/html5/single-page.html#headings-and-sections）。 - zzzzBov

@zzzzBov 好的，你说得对，使用多个<h1>标签是可以的（但是标题的嵌套仍应从h1到h6）。但是你不能用更有用的方式写吗？如果有人看了你的评论，他可能找不到我的思维错误在哪里。这里有一篇关于在页面上使用多个<h1>标签的有用文章。 - jazzgot

@jazzgot，如果你觉得我的回答不够充分，请随意添加你自己的。评论区不是进行长时间讨论的地方。 - zzzzBov

1

这很公平 - 考虑到如果人们搜索“嵌套部分”，他们仍然会在Google中找到它，这是一个值得的编辑。 - Mike 'Pomax' Kamermans

显示剩余4条评论

3

我的个人建议是在创建HTML5布局时尽可能利用语义结构。正如其他帖子所指出的，嵌套section元素是完全可以接受的，但您需要确保这样做是有意义的。

我个人使用了一些模式，这些模式是基于我在过去一年左右的研究整理出来的。使用嵌套section元素的最常见情况是为文档的主要内容提供ARIA角色（请参见下面的“站点布局”示例）

注意：假设body/html元素已存在等等。

站点布局

<header class="header" role="banner">
  ....
</header>

<!-- used once per page, implies role="main" -->   
<main> 
  <!-- declares page content to be a document and not a web app -->
  <section id="wrapper" role="document"> 

   <section class="hero">
      ....
   </section>
      ....
   <section class="content">

   </section>

  </section>
</main>

<footer class="footer" role="footer">

      ....

</footer>

单页内容布局

注：此布局适用于具有单一/主题/对象的页面，并不适用于所有情况。

<article>
  <header>
    <h1>Page Headline/Title</h1>
  </header>
  <section class="page-content">
      ....
  </section>
  <!-- if this is a post or something with metadata/authorship info... -->
  <footer>
    ....
  </footer>
</article>

我在shell头部/尾部元素上使用类名标记以及地标角色，以确保我始终可以将它们与页面中的其他头部/尾部元素区分开来（例如，易于CSS范围限定）。 参考资料

role="document" https://www.w3.org/TR/wai-aria/roles#document

一个包含相关信息的区域，被声明为文档内容，而非Web应用程序。
"为什么 <main> 元素不需要 role 属性": https://www.w3.org/TR/2012/WD-html-main-element-20121217/

主要元素通过使用 id 值（例如“content”和“main”）来标识文档中的主要内容部分，规范了通常的做法。它还定义了一个HTML元素，其中体现了WAI-ARIA里程碑角色= main的语义和功能。
"W3.org/Wiki解释嵌套 <section> 元素" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

section元素是一个容器，包含具有相关主题的文档内容，并表示围绕一般概念分组的文档部分。 section元素内的所有内容都相关。如果需要，还可以嵌套节元素。节元素是一种通用的语义元素，可用于将文档的部分组合成相关的离散单元。例如，section元素可能会在文档的大纲中创建项目，或将页面内容分成相关部分（如介绍），然后是有关主题的一些背景信息。

- Ian Svoboda

这个问题太老了。不管怎样，我希望我提供的信息对其他搜索这个主题的人有所帮助。 - Ian Svoboda

请注意，<main><section role="document">...</section></main> 没有什么实际意义：该 <section> 元素在语义上并无作用，因此应该改为 <main>。另外，role="document" 比本答案声称的更具体，在这种情况下不起任何作用，因为页面默认就是文档，只有在需要退出非文档模式时才使用 role="document":https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role - Mike 'Pomax' Kamermans

2

一种有用的思考方式是考虑屏幕阅读器如何查看您的网站。想象一下（实际上，您应该为自己测试一下），屏幕阅读器在阅读<section>标签内的内容之前宣布单词“section”。

如果这不合乎逻辑，那么可能您的项目顺序有误。

请查看aria region role。

我不知道屏幕阅读器如何读取嵌套部分，但是如果页面上的逻辑部分没有层次结构，则HTML也不应该有。

例如。（这表示HTML结构）好

section aria-label="dogs"
   section aria-label="labradors"
   section aria-labels="terriers"

section aria-label="cats"
   section aria-label="sphynx"
   section aria-label="persian"

不好的

该部分仅用于将两个其他部分组合在一起，但本身没有作为“部分”的真正意义。

section style="display: flex; flex-direction: row"
   section aria-label="news"
   section aria-labels="sport"

- Simon_Weaver

0

HTML5还允许设置如下：

<section>

<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>

</section>

在同一页中多次出现，所以您不只有一个标题，它涉及的内容比这更深入，但检查一下是值得的。

请查看http://gsnedders.html5.org/outliner/

- Jerry Schrader

6

这并不是aside元素的用途。 - zzzzBov

0

一个更新的方法（就我理解而言）可能是这样的：

<main id="content">
  <div id="inner-wrapper">
    <section>
      <h1>Section Title</h1>
      ...
    </section>
    <section>
      <h1>Section Title</h1>
      ...
    </section>
  </div>
</main>

main {
  width: 100%;
  ...
  ...
}

#inner_wrapper {
  max-width: 80%;
  margin: 0 auto;
}

请参考以下链接获取更多信息：http://www.w3.org/TR/html-main-element/，http://www.sitepoint.com/html5-main-element/或http://html5doctor.com/the-main-element/

- cornishninja

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

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

- Paul · Accepted Answer

如果您只是使用这些元素来定位元素/样式化元素，那么您应该使用div。

Section元素主要用于分组属于一起的内容，如果没有标题（H1或类似元素）描述Section所包含的内容，则不应该使用Section... 我认为过去有一些人犯过类似的错误:

http://html5doctor.com/the-section-element/

从规范中可以看到:

注意: Section元素并不是通用的容器元素。当需要元素进行样式设置或出于方便脚本编写时，作者应该使用div元素。一般规则是：只有当元素的内容在文档大纲中被明确列出时，才适用section元素。

尽管如此，在嵌套section元素方面是完全可以接受的。也许类似以下的方式:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="..." />
    </section>
</section>