it-swarm.cn

如何在HTML5中正确使用h1

以下哪一项是构建页面的正确方法:

1)h1仅在header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

如果我在header中专门使用h1作为网站的标题,则每个页面都将具有h1标记的相同内容。这似乎没有很多信息。


2)headersection中的h1,用于站点和页面标题

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

我还看到了在headersection标签中多次使用h1的示例。但是,同一页面有两个标题是不是错了?此示例显示了多个标头和h1标签 http://orderedlist.com/resources/html-css/structural-tags-in-html5/


3)h1仅在section中,强调页面标题

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

最后,W3似乎建议在主section元素中使用h1,这是否意味着我不应该在header元素中使用它?

章节可能包含任何等级的标题,但强烈建议作者仅使用h1元素,或者使用适当等级的元素作为该部分的嵌套级别。

75
deb

正如我在评论中所说,你在W3C中引用,h1是标题,而不是标题。每个切片元素都可以有自己的标题元素。您不能将h1视为页面的标题,而是将其视为页面特定部分的标题。就像报纸的头版一样,每篇文章都有自己的标题(或标题)。

这是一篇很好的文章。

57
Rob

我建议在整个过程中使用h1。通过h2忘掉h6

回到HTML4,6个标题级别用于隐式定义部分。例如,

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

现在使用section元素,您可以显式定义这些部分,而不必依赖浏览器创建的隐式部分来读取不同的标题级别。配备HTML5的浏览器知道section元素中的所有内容都在doc大纲中被“降级”了一级。因此,例如section > h1在语义上被视为h2section > section > h1就像h3等。

令人困惑的是,浏览器STILL基于h2-h6标题级别创建隐式部分,但h2-h6元素不会更改其样式。这意味着h2,无论它嵌入多少部分,仍然会像h2(至少在Webkit中)一样。如果您的h2应该是一个4级标题,那将会令人困惑。

h2-h6section混合会导致非常意外的结果。只需坚持h1,并使用section创建显式部分。

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

Further ,你可以使用 <main>元素 。此元素仅包含特定于页面的信息,不应包含在站点范围内重复的内容,例如导航链接,站点页眉/页脚等。可能存在仅一个<main>元素<body>。所以你的解决方案可能就像这样简单:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>
13
chharvey

但是,不要忘记可访问性问题。根据 _ mdn _ ,“目前还没有已知的 outline算法的实现 在图形浏览器或辅助技术用户代理中。”这意味着屏幕阅读器可能无法确定仅具有<h1>的节的相对重要性。它可能需要更多的标题级别,例如<h2><h3>

4
Michael McGinnis