嵌套HTML5节标签

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>