HTML标题标签的重要性：结构、可访问性与SEO优化指南

为什么HTML中的标题很重要：结构、可访问性和SEO

当人们想到网站上的标题时，他们通常想到的是它们的外观：吸引眼球的大号、粗体文字。

在HTML中，标题的作用远不止为页面添加视觉样式。误用或未使用HTML标题会损害可用性、可访问性和搜索性能。

标题是语义化的，这意味着HTML标题（<h1>到<h6>）传达了页面内容的层次结构。

HTML有6个标题级别。

<h1>是页面的顶级主题。在实践中，一个页面应该只使用一个H1。技术上HTML5允许多个H1，但这可能会让辅助技术感到困惑（因为这会使其更难识别页面的实际标题是什么）。
<h2>标题用于表示该主要H1主题下的主要部分。
<h3>标题表示该<h2>部分内的子部分，依此类推。

标题创建了页面的逻辑大纲。一个结构良好的页面就像一本结构良好的书。例如，假设我们有一本书名为“什么是Web可访问性”，包含2章：“为什么可访问性重要”和“如何设计可访问界面”。

再假设第一章“为什么可访问性重要”有一个名为“对用户的影响”和“法律要求”的小节。第二章“如何设计可访问界面”有一个名为“颜色对比”的小节。

用项目符号，我们可以像这样组织“什么是Web可访问性”这本书的目录：

与用项目符号组织想法相同，我们可以在HTML中使用标题来组织这本书。

1
2
3
4
5
6


<h1>什么是Web可访问性？</h1>
    <h2>为什么可访问性重要</h2>
        <h3>对用户的影响</h3>
        <h3>法律要求</h3>
    <h2>如何设计可访问界面</h2>
        <h3>颜色对比</h3>

在我们的书籍示例中，只有一个H1，即书名。我们不可能让一本书有两个标题，对吧？

然后，每一章都用H2标签标记，表明它比标题/主标题“低”一个级别。之后，我们使用H3标签作为下一个级别，表示每章内的小节。

请注意，不应直接从H1跳到H3（除非你有明确的结构性原因）。这就像打开一本书直接跳到一个小节，跳过了章节的开头。这很可能没有意义。

标题大纲使得使用辅助技术的人（以及任何其他人）能够轻松浏览内容，并从逻辑上理解页面的层次结构。

开发人员常犯的一个错误是仅仅因为标题标签看起来很大，为了匹配设计期望就使用它。误用标题级别可能会造成可访问性问题，因为页面将具有错误的结构。

重要的是要记住，不要根据样式选择标题级别，而要根据结构选择标题级别。然后使用CSS来控制视觉样式。

在网页上使用正确的标题结构对可访问性至关重要。屏幕阅读器用户可以使用快捷键从一个标题跳转到下一个标题。使用屏幕阅读器，他们可以跳转到特定部分并从那里开始收听内容。

正如使用标题标签进行样式化是个坏主意一样，完全不使用标题标签也是。如果你只使用CSS使文本加粗或变大，但从未将其标记为适当的标题，屏幕阅读器将不知道内容存在中断或变化。这会阻止用户根据需要浏览或跳转页面。

例如，假设我们有一个产品页面：

1
2
3


<p style="font-weight: bold;">产品页面</p>
<p>价格</p>
<p>功能</p>

我们的产品页面没有标题意味着内容变成了一大段文本墙，屏幕阅读器必须按顺序收听，增加了用户阅读内容所需的时间。

在这个简单的例子中，我们用CSS类样式化了页面标题，但没有使用标题。屏幕阅读器用户无法确切知道“产品页面”是页面的标题。他们无法从CSS样式中获得关于内容的线索。

创建产品页面的更好方法是使用这样的标题：

1
2
3


<h1>产品页面</h1>
  <h2>价格</h2>
  <h2>功能</h2>

使用正确的标题标签允许屏幕阅读器用户通过标题进行导航，更快地获取页面上的信息。

谷歌和其他搜索引擎读取你的标题以获取关于内容的重要洞察。它们可以通过H1标签判断主要主题是什么（页面是关于什么的），关键子主题是什么（用H2表示），以及每个子主题下的支持细节是什么（H3，等等）。

结构良好的标题使你的内容更易于索引，并且通常在搜索中表现得更好。例如，谷歌会使用标题来构建页面大纲，就像目录一样。然后它可以将该大纲/主要主题与正确的搜索查询相匹配。

虽然现代搜索引擎可以很好地处理具有多个H1标题的页面——而不会有效损害SEO——但为了清晰起见，使用一个清晰单一的主要<h1>是一个很好的惯例。

标题在HTML中不是样式工具——它们是语义工具。你应该使用标题来定义页面内容的层次结构，帮助用户导航，使内容可访问，并改善SEO。正确的标题使你的HTML对人类和机器都有意义。