嵌套HTML5节标记

这是使用

标记的正确方法吗

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

---

我正在尝试确定是否应该只使用一个节id，而将其他两个节保留为div？

如果您只是使用这些元素将内容放置在某些位置/样式中，那么您可能应该使用div

节实际上是用于将属于一起的内容分组的-您不应该在没有标题（H1或类似）元素的节中描述该节包含的内容。。。过去有一些人犯过类似的错误，我认为：

根据规范：

注意：节元素不是通用容器元素。当 元素用于样式设置或方便 在编写脚本时，建议作者改用div元素。A. 一般规则是，只有当 元素的内容将在文档的 大纲

话虽如此，嵌套截面元素是完全可以接受的。可能是这样的：

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

门廊
波蒂谢德是来自布里斯托尔的一支很酷的乐队

虚拟（相册）
一些信息

波蒂谢德（专辑）
其他一些信息

注意：

我的答案已经严重过时，并且不再包含合理的建议，因为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>

嘶嘶作响
福吧巴兹酒店
...
同侧阴唇
...
....

HTML5还允许设置，例如：

<section>

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

</section>

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

<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;
}


章节标题
...
章节标题
...
主要{
宽度：100%；
...
...
}
#内包装{
最大宽度：80%；
保证金：0自动；
}

请参阅：，或获取更多信息。
我个人的建议是，在创建HTML5布局时，尽可能多地利用语义结构如其他海报所示，嵌套节元素是完全可以接受的，但是您需要确保这样做是合理的

我个人使用了一些模式，这些模式是基于我在过去一年左右所做的一些研究而组合起来的。使用嵌套节元素最常见的情况是为文档的主要内容提供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>


....
....
....
....

单页内容布局

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

注意：此布局适用于具有单个/主题/对象的页面，并不适用于所有用例


包含声明为文档内容的相关信息的区域，与web应用程序相反


“为什么
元素不需要角色属性：”

main元素将使用id值（如“content”和“main”）标识文档的主要内容部分的常见做法正式化。它还定义了一个HTML元素，该元素体现了WAI-ARIA landmark role=main的语义和功能


“W3.org/Wiki嵌套
元素解释”——

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


上的HTML5规范。您介意将w3c的引用链接起来吗？通常，“页眉”和“页脚”分别用
页眉
和
页脚
元素标记。@zzzzBov-没问题（考虑到页眉/页脚标记，似乎有点奇怪，嗯？）正如我所怀疑的那样。w3c学校与w3c没有任何关联。请通读。如果你只有h1而没有p，你还会使用一个部分作为家长吗。这是我的难题。这个例子并不是很好，因为它误用了嵌套的
，而实际上应该使用
。这会更好：
portishead>传记…discography
..
。虽然这只是一个简单的例子，但它看起来确实像第一个节标签被用作容器，如果直接子项是节，肯定会使用div。@Neil，我想我没有在
#content
中添加标题。第一个标记是OK的，它不仅仅是用于样式设置的容器。但我在这里看到了另一个问题：这不是一个好主意（尤其是在SEO环境下）