正确使用 HTML 标题标签答案

【问题标题】：Proper use of HTML heading tags正确使用 HTML 标题标签
【发布时间】：2014-02-08 01:52:53
【问题描述】：

我无法理解 HTML 标题的正确用法。我正在使用书籍和在线资源进行自学，但在使用方法上存在细微差异。

请注意，h1 标签只使用一次，作为页面的主标题。但是，h2 到 h6 可以根据需要尽可能频繁地使用，但它们应始终按预期顺序使用。例如，h4 应该是h3 的子标题，而h3 应该是h2 的子标题。
逻辑标题级别反映了它相对于主要内容的重要性。

所以问题是：

我是否按照h4 必须是h3 的子标题的顺序使用它们，而h3 应该是h2 的子标题等等，或者根据其与主要内容？

虽然，我已经看到这两种方法都在使用。但是，第二种方法与文档大纲混淆。只是想就此获得一些其他意见。

【问题讨论】：

您应该指定引用的来源。 [1] 所说的部分错误：虽然通常每页只有一个 h1，但这不是必需的，例如一个双语页面可能有两个h1 元素。
这主要是基于意见，因为规范是模糊的，有很多方面可以考虑，其相对权重取决于上下文和主观观点。

标签： html semantic-markup html-heading

【解决方案1】：

对于 HTML5：

决定您的文档应该包含哪个outline。
使用heading elements (h1-h6) 和sectioning content elements (section, article, aside, nav) 来实现这个大纲。

你引用的两个陈述都不正确或不完整：

关于 [1]：h1 不必在每个文档中仅使用一次（也不必用于“主标题”）。
关于 [2]：规范定义了标题 rank，不一定是 importance。

当您总是将部分包装在一个分段内容元素中时（规范鼓励这样做），所以每个部分最多有一个标题，then it doesn’t matter which heading rank you choose，但是：

[…] 强烈建议作者要么仅使用 h1 元素，要么使用适合该部分嵌套级别的等级的元素

如果您并不总是在适当的地方使用分段内容元素，因此一个部分有多个标题，跳过标题级别（或使用它们来指定“重要性”）可能会导致不正确的大纲。

【讨论】：

@Reed：请注意，该链接指向旧版本的规范（在撰写答案时还不是标准）。我更新了答案中的链接，它们现在指向当前标准。

【解决方案2】：

如果您不关注order 或有多个h1 标签，您的网页不会崩溃，但它肯定会看起来很丑。

您提到的第 1 点和第 2 点不是强制性的，但主要适用于 search engine optimization(seo)。它是一种白帽 seo 技术，它将在一定程度上帮助搜索引擎爬虫对您的网页进行排名。其次，您的网页将更多 semantically correct 和 better looking outline。

【讨论】：

【解决方案3】：

实际上，您使用它们的顺序并不重要。他们说按顺序使用它们的原因可能是因为如果文档正文中的文本大于标题，它看起来会很奇怪。

这与更改font-size 和font-weight 基本相同，因为这是除了一些padding 之外它所做的。

【讨论】：

【解决方案4】：

经验法则：如果没有任何 CSS 看起来还不错，那就没问题。当然，如果没有样式，丰富的内容将永远无法工作，但要努力使其在没有 CSS 的情况下看起来尽可能好。

字体大小级别之间的主要区别。你应该没问题，不管你对他们做什么，只要你不这样做

<h6>Page heading</h6>
<h5>Section heading</h5>
<h4>Subsection heading</h4>

或者类似的奇怪的东西。 h1 应该是最大和最重要的，而 h6（或其他东西，例如 <bigheading></bigheading>（是的，CSS 将适用于任何标签））如果您正确设置它们可能会起作用，但不推荐使用它们或语义正确。

【讨论】：

【解决方案5】：

关于Lighthouse accessibility audits，标题级别应按顺序降序排列，并使用 CSS 根据需要在视觉上设置标题样式。而不是跳过标题级别来实现所需的视觉风格。

例如：

<h1>Page title</h1>
<section>
  <h2>Section Heading</h2>
  …
    <h3>Sub-section Heading</h3>
</section>

您可以在官方文档中获得有关structured headings的深入信息。

【讨论】：

【解决方案6】：

HTML 标题用<h1> 到<h6> 标签定义。

<h1> 定义了最重要的标题。 <h6> 定义了最不重要的标题。

标题很重要，搜索引擎使用标题来索引您网页的结构和内容。

用户经常通过标题浏览页面。使用标题来显示文档结构很重要。

<h1> 标题应该用于主标题，然后是 <h2> 标题，然后是不太重要的 <h3>，以此类推。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

【讨论】：

这并不能真正回答 OP 的问题。

【解决方案7】：

除非您正在做一些 SEO，否则您无需担心使用 HTML H1.....H6 标题的顺序。但建议首先使用H1 标题，但一般以任何顺序都可以接受。

以下顺序只是以特定顺序显示它们而已。

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

这里是来自 SnoopCode http://www.snoopcode.com/html/html-headings 的一个很好的参考以及如何使用它们。

【讨论】：