如何在 HTML5 中正确使用 h1
Posted
技术标签:
【中文标题】如何在 HTML5 中正确使用 h1【英文标题】：How to properly use h1 in HTML5 【发布时间】：2011-11-16 08:15:46 【问题描述】：以下哪项是构建页面的正确方法：
1) h1 仅在 header
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
如果我只在header 内使用h1 作为网站标题，则每个页面都将具有相同的h1 标记内容。这似乎信息量不大。
2) h1 in header 和 section，用于网站和页面标题
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
我还看到了在header 和section 标记中多次使用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 元素，要么使用 该部分的嵌套级别的适当排名。
【问题讨论】：
一个有趣的话题阅读：iheni.com/html-5-to-the-h1-debate-rescue 【参考方案1】：正如我在评论中所说并且您在 W3C 中引用的那样，h1 是标题而不是标题。每个分段元素都可以有自己的标题元素。您不能将 h1 仅视为页面的标题，而应将其视为页面特定部分的标题。就像报纸的头版一样，每篇文章都可以有自己的标题（或标题）。
Here is a good article on this.
【讨论】：
知道了。所以在 HTML5 中多次使用 h1 是可以的。从文章“在 HTML 5 中，您可以专门标记页面上的所有“次要”内容，例如导航、品牌、版权声明”，品牌的正确标记（徽标 + 网站标题）是什么？ 最合乎逻辑的是标题元素，正如您选择的那样。这是对任何部分的介绍，在您的情况下，是整个页面的介绍。在里面你可以用 divs、navs、hgroups 等对事物进行分组，或者只是让图像保持原样，成为自己的一个元素。 @Rob：我的问题是，“什么定义了‘分段元素’？它必须是实际的<section>、<article> 或其他 html5 元素，还是类似于<div> 与 section 或 callout 类？”。
@tenub 文章，aside、nav 和 section 是唯一可以划分元素的元素。您可以在这里阅读所有相关信息：developers.whatwg.org/content-models.html#sectioning-content-0【参考方案2】：
我建议始终使用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 元素内的所有内容在文档大纲中都会“降级”一级。例如，section > h1 在语义上被视为h2，section > section > h1 就像h3，等等。
令人困惑的是，浏览器STILL会根据h2–h6 标题级别创建隐式部分，但h2–h6 元素不会改变它们的样式。这意味着h2，无论它嵌套在多少个部分中，仍然看起来像h2（至少在Webkit 中）。如果您的 h2 应该是 4 级标题，这将是令人困惑的。
将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>
此外，您可以使用the <main> element。此元素仅包含特定于页面的信息，不应包含在站点范围内重复的内容，例如导航链接、站点页眉/页脚等。可能只有一个 <main> 元素存在于<body>。所以你的解决方案可能就这么简单：
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>
【讨论】：
我改变了主意。重读你写的东西后，我理解你试图表达的观点，但觉得你的写作令人困惑；例如关于 hx 元素降级的观点，如果从字面上理解，这是错误的，但在大纲的上下文中，我可以看到你来自哪里。 请注意，您不能嵌套