Question

这是使用<section>代码的正确方法吗？

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

我正在尝试弄清楚我是否应该只使用一个部分ID，并将其他两部分保留为div？

Answer 1

如果你只是使用这些元素将东西放在某些位置/样式的东西中，那么你应该使用div。

部分实际上是用于对属于一起的内容进行分组 - 你不应该有一个没有标题（H1或类似）元素的部分描述该部分包含的内容...我认为过去有些人犯了类似的错误：

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

来自规范：

注意： section元素不是通用容器元素。当一个元素是出于样式目的或方便的需要脚本，鼓励作者使用div元素。一个一般规则是，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>

Answer 2

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

答案很长：

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>

Answer 3

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/

Answer 4

更新的方法（据我所知）可能是这样的：

<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/。

Answer 5

我个人的建议是在创建HTML5布局时尽可能多地利用语义结构。 正如其他海报所示，嵌套部分元素是完全可以接受的，但是你需要确保这样做是有道理的。

我个人使用了一些基于我在过去一年左右的研究中所做的研究。使用嵌套节元素的最常见情况是为文档的主要内容提供ARIA角色（请参阅＆＃34;网站布局＆＃34;下面的示例）

注意：假设存在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范围）。

<强>参考

角色=＆＃34;文件＆＃34; https://www.w3.org/TR/wai-aria/roles#document

包含声明为文档内容的相关信息的区域，而不是Web应用程序。
＆＃34;为什么<main>元素不需要角色属性＆＃34;：https://www.w3.org/TR/2012/WD-html-main-element-20121217/

主要元素规定了使用诸如“内容”等内容值来识别文档主要内容部分的常见做法。和＆＃39; main＆＃39;。它还定义了一个HTML元素，它体现了WAI-ARIA地标角色= main的语义和功能。
＆＃34; W3.org/Wiki解释嵌套<section>元素＆＃34; - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

section元素是具有相关主题的文档内容的容器，表示围绕一般概念分组的文档部分。 section元素中的所有内容都是相关的。 如果需要，也可以嵌套部分元素。 section元素是通用语义元素，可用于将文档的各部分组合成以某种方式相关的离散单元。例如，section元素可以在文档的轮廓内创建项目，或者将页面内容划分为相关的部分（如简介），然后是关于该主题的一些背景信息。

Answer 6

思考这个问题的一个有用方法是考虑屏幕阅读器如何看待您的网站。想象一下（实际上您应该自己测试）屏幕阅读器在阅读您的 <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 仅用于将另外两个部分组合在一起，但没有作为“部分”的真正含义。

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

嵌套HTML5节标签

6 个答案: