Html 如何在 HTML5 中正确使用 h1
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7405282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly use h1 in HTML5
提问by deb
Which of the following is the correct way to structure a page:
以下哪项是构建页面的正确方法：
1) h1only in header
1)h1仅在header
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
If I use h1exclusively inside headeras the site's title, every page will have the same content for the h1tag. That doesn't seem very informative.
如果我只使用h1insideheader作为站点的标题，则每个页面都将具有相同的h1标签内容。这似乎不是很有信息性。
2) h1in headerand section, for both site and page title
2) h1inheader和section，对于站点和页面标题
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
I've also seen examples of using h1more than once, in both headerand sectiontags. However, isn't it wrong to have two titles for the same page? This example shows multiple header and h1tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/
我还看到了h1在header和section标签中多次使用的示例。但是，同一个页面有两个标题不是错吗？此示例显示多个标题和h1标签http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3) h1only in section, emphasizing the page title
3) h1only in section，强调页面标题
<header>
<p>Site title</p>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
Lastly, W3 seems to recommend using h1within the main sectionelement, does that mean I shouldn't use it in the headerelement?
最后，W3 似乎建议h1在主section元素中使用，这是否意味着我不应该在header元素中使用它？
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
章节可以包含任何级别的标题，但强烈建议作者仅使用 h1 元素，或者使用适合章节嵌套级别的适当级别的元素。
采纳答案by Rob
As I state in my comment and you quote in the W3C, h1 is a heading and not a title. Each sectioning element can have its own heading element(s). You cannot think of h1 as being the title of a page only but as the heading of that particular section of the page. Just like the front page of a newspaper, each article can have its own heading (or title).
正如我在评论中所述并且您在 W3C 中引用的那样，h1 是标题而不是标题。每个分节元素都可以有自己的标题元素。您不能仅将 h1 视为页面的标题，而是将其视为页面特定部分的标题。就像报纸的头版一样，每篇文章都可以有自己的标题（或标题）。
回答by chharvey
I would recommend using h1throughout. Forget about h2through h6.
我建议h1全程使用。忘记h2通过h6。
Back in HTML4, the 6 heading levels were used to implicitly define the sections. For example,
回到 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>
Now with the sectionelement, you can explicitly define the sections rather than having to rely on the implicit sections created by your browser reading the different heading levels. A browser equipped with HTML5 knows that everything inside a sectionelement gets "demoted" by one level in the doc outline. So for example a section > h1is semantically treated like an h2, a section > section > h1is like an h3, etc.
现在使用该section元素，您可以明确定义部分，而不必依赖浏览器读取不同标题级别所创建的隐式部分。配备 HTML5 的浏览器知道section元素内的所有内容都在文档大纲中“降级”了一个级别。因此，例如 asection > h1在语义上被视为 an h2， asection > section > h1就像 an h3，等等。
What's confusing is that browsers STILLcreate implicit sections based on the h2–h6heading levels, yet the h2–h6elements don't change their styles. That means that an h2, no matter how many sections it is nested in, will still appear like an h2(at least in Webkit). This would be confusing if your h2was supposed to be, say, a level-4 heading.
令人困惑的是，浏览器仍然基于h2–h6标题级别创建隐式部分，但h2–h6元素不会改变它们的样式。这意味着 an h2，无论它嵌套了多少个部分，仍然会看起来像 an h2（至少在 Webkit 中）。如果你h2应该是一个 4 级标题，这会令人困惑。
Mixing h2–h6with sectionleads to very unexpected results. Just stick with h1only, and use sectionto create explicit sections.
混合h2-h6与section导致非常意外的结果。只需坚持使用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>
Furthermore, you may use the <main>element. This element contains only information specific to the page, and should not include content that is repeated site-wide, such as navigation links, site headers/footers, etc. There may be only one<main>element present in the <body>. So your solution may be as simple as this:
此外，你可以使用的<main>元素。该元素仅包含特定信息的网页，并且不应当包括被重复的位点范围的内容，诸如导航链接，网站页眉/页脚等有可能只有一个<main>存在于所述元件<body>。所以你的解决方案可能像这样简单：
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>
回答by Michael McGinnis
However, don't forget accessibility concerns. According to MDN, "there are currently no known implementations of the outline algorithmin graphical browsers or assistive technology user agents." That means that a screen reader might not be able to figure out the relative importance of sections with only <h1>. It might need more heading levels, such as <h2>and <h3>.
但是，不要忘记可访问性问题。根据MDN 的说法，“目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现。” 这意味着屏幕阅读器可能无法确定仅包含<h1>. 它可能需要更多的标题级别，例如<h2>和<h3>。
