语义 HTML 是结构良好的网站的基础。
随着可视化网页构建工具的普及，可以很容易地使用标题来保证结构的显示。
根据万维网联盟 (W3C) 的标准，专注于创建语义和 HTML 均有效的网站和网页是有实际原因的。
我们还将了解适当的 HTML 层次结构如何帮助提高可访问性和用户体验。
页面结构的 HTML 层次结构
根据 WCAG 2.1 第 4.1.1 节 A 级，HTML 标记元素应根据其规范进行嵌套。这意味着标题标签 h1、h2、h3、h4、h5 和 h6 被适当地嵌套在网页中。
H1标题标签
H1 标签用作主标题，并且应该只在页面中出现一次（对于有效的 HTML）。
出于 SEO 的目的，Google 对 h1 标题标签的使用极为宽松，因为页面构建软件和“拖放”程序通常用于显示标题标签以进行展示而不是语义层次结构。
在屏幕阅读浏览器中，h1 标签建立了大纲的概念，层次结构由嵌套的 h2 到 h6 标签进一步建立。段落标签 (p)、有序列表 (ol)、无序列表 (ul)、块引号和其他 HTML 元素嵌套在每个标题标签下。
根据 Mozilla 开发者网络 (MDN) 的说明，使用屏幕阅读器导航的用户通常会从一个标题跳到另一个标题以了解页面的含义。这使得不要跳过自然层次结构中的标题变得很重要。
H2标题标签
H2 标签最常用于标记网页中各个部分的开头。在我们的网站以及我们为客户开发的网站上，h2 标签是最常用的标题标签，表示网页中新部分或想法的开始。
H3标题标签
H3 标签嵌套在 h2 标签下以开始主要部分的小节。
H4、H5、H6标题标签
H4 到 h6 标签用于嵌套在主要部分和更大的小节下作为小节。这些标题表示网页部分的较小组件。
标题标签层次结构的代码示例
以下是网页正文中正确 HTML 结构的代码示例。
<h1>主要标题</h1>
<h2>第一节</h2>
<h3>第一节中的小想法</h3>
<h2>第二节</h2>
<h3>第二节的小节</h3>
<h4>h3小节</h4>
<h2>第三节</h2>
<h3>小节</h3>
<h4>小节</h4>
<h5>深节</h5>
<h6>小节</h6>
<h2>总结</h2>
语义与表示
HTML 层次结构中最常见的错误是使用标题来设计表示而不是层次结构含义。
Web 浏览器仍会呈现页面，而搜索引擎通常不会在层次结构乱序时出现问题。然而，这并不理想。从技术上讲，当 HTML 层次结构乱序时，根据 W3C 标准，HTML 将不是 100% 有效的。由于嵌入式小部件和网页设计的模块化，许多页面在 2020 年代无法完美验证，但网页开发人员应尽可能使用 W3C 标准。
有效、高效的代码被认为更容易被 Googlebot 抓取和解析以编制索引。使用 W3C 标准编码的有效页面通常也更容易让屏幕阅读器浏览。
辅助功能、屏幕阅读器和 HTML 层次结构
屏幕阅读浏览器是为盲人或视障人士使用网络而存在的。这些特殊的浏览器向用户读出页面。两个常用的屏幕阅读器是 JAWS（Job Access with Speech）和 NVDA（NonVisual Desktop Access）。
一些 Web 开发人员和网站所有者错误地认为 Web 可访问性和屏幕阅读器是市场的无限小部分。现实情况是，仅在美国就有超过 810 万人患有视力障碍，约占总人口的 3.3%。
据估计，美国约有 440 万人使用屏幕阅读器。在美国，至少有 1.38% 的互联网用户在使用屏幕阅读器。
人们可能没有使用正确的 HTML 层次结构的其他原因
在 SEO 圈子里，我观察到一些通过视频和论坛传播的关于排名更高的理论。一种这样的理论指出，如果您在 h2、h3、h4、h5 和 h6 标签中按一定比例使用关键字，可能会对您的 SEO 产生积极影响。
这似乎有点简单，而且可能不可持续，因为谷歌每年对其排名算法进行数千次调整。
然而，我可以看到人们接受这个建议并添加随机标题标签以“玩弄系统”并试图获得更高的排名。我的建议是专注于创建内容或网站功能，让人们能够在愉快的体验中实现他们的目标，或找到他们想要获得的信息。
创造更好的网络体验
在逻辑层次结构中使用 HTML 对用户有好处，对视力受损的用户更容易，并且减少了 Googlebot 抓取和呈现页面以便将它们编入索引的摩擦。WebAIM 的 WAVE Web 可访问性评估工具等有用的站点使得通过正确的 HTML 嵌套诊断错误和警告以及其他可访问性问题变得相对简单。
