嵌套<article>和<h1>标签?

Nic*_*egg 9 html css tags html5 nested

题:

以下哪一种是嵌套<h1><article>标记的正确方法,你的理由是什么?

选择A:

<article>
    <h1>Some Title</h1>
    <p>Here's some text and whatnot.</p>
    <p>Here's another paragraph filled with other text and other whatnots.</p>
</article>
Run Code Online (Sandbox Code Playgroud)

选择B:

<div class="post">
    <h1>Here's a Really Awesome Title</h1>
    <article>
        <p>Here's a paragraph with text and whatnot.</p>
        <p>And here's another paragraph. I think this one is pretty awesome too.</p>
    </article>
</div>
Run Code Online (Sandbox Code Playgroud)

关于这一点的看法似乎好坏参半,我不是100%,这是正确的答案.

zzz*_*Bov 15

两者都很好

@David Dorward有一个很好的答案,我将发表评论以扩展它,但当我意识到我的评论太长时,我决定我只是添加我自己的答案.

这些h#元素在语义上属于他们的父母.

h1页面的主标题

<body>
  <h1>Some text</h1>
</body>
Run Code Online (Sandbox Code Playgroud)

虽然这h1是针对主标题的文章

<body>
  <article>
    <h1>Some text</h1>
  </article>
</body>
Run Code Online (Sandbox Code Playgroud)

这允许我们以h#有意义的方式扩展元素的使用,如下所示:

<body>
  <h1>Blag Tottle</h1>
  <article>
    <h1>Article 1 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <h1>Article 2 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
</body>
Run Code Online (Sandbox Code Playgroud)

现在你可能想要将你的文章标题分开一些,这是header元素的完美应用:

<body>
  <h1>Blag Tottle</h1>
  <article>
    <header>
      <h1>Article 1 Title</h1>
      <span class="author">And not a mouse</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <header>
      <h1>Article 2 Title</h1>
      <span class="author">Somebody</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
</body>
Run Code Online (Sandbox Code Playgroud)

  • @KoutaNakano,是的,这就是我在 4 年前的评论中提到的内容。我已经对此答案添加了警告,因为我没有时间重写它,而且我无法删除它,因为它是已接受的答案。 (2认同)

Que*_*tin 7

标题的范围是文章元素(和其他分节元素).标题应该在它适用的文章内.

切片内容元素中标题内容的第一个元素表示该部分的标题

- http://www.w3.org/TR/html5/sections.html#headings-and-sections

选项A是更好,如果它为标题文章.

如果它是跟随它的所有文章的标题,那么选择B会更好.