HTML标题的重要性：结构、可访问性与SEO

当人们想到网站上的标题时，通常会关注它们的外观：大而粗的文本能够吸引眼球。

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

标题具有语义性，不仅仅是视觉元素

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

HTML有6个标题级别：

<h1>是页面的顶级主题。在实践中，一个页面应该只使用一个H1。技术上HTML5允许多个H1，但这可能会让辅助技术感到困惑（因为很难确定页面的实际标题是什么）。

这个一般规则有例外：例如，如果使用分段元素，每个分段都可以以自己的<h1>开始。

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

假设第一章"为什么可访问性很重要"有一个名为"对用户的影响"和"法律要求"的子部分。第二章"如何设计可访问界面"有一个名为"颜色对比度"的子部分。

我们可以用项目符号组织"什么是网页可访问性"这本书的目录：

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

1
2
3
4
5
6


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

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

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

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

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

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

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

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

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

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

1
2
3


<p style={{ fontWeight: 'bold' }}>产品页面</p>
<p>价格</p>
<p>功能</p>

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

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

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

1
2
3


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

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

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

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

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

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