Nic*_*egg 9 html css tags html5 nested
以下哪一种是嵌套<h1>和<article>标记的正确方法,你的理由是什么?
<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)
<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)
标题的范围是文章元素(和其他分节元素).标题应该在它适用的文章内.
切片内容元素中标题内容的第一个元素表示该部分的标题
- http://www.w3.org/TR/html5/sections.html#headings-and-sections
选项A是更好,如果它为标题是文章.
如果它是跟随它的所有文章的标题,那么选择B会更好.