网页中 h1 元素嵌套在 section 内部时如何影响文档结构
网页中 h1 元素嵌套在 section 内部时，浏览器会将其视为文档结构的一部分，但不会自动提升为 h2 级别。
h1 元素嵌套在 section 内部的结构表现
HTML 规范允许 h1 元素嵌套在 sectioning content 元素内部，例如 section、article 或 aside。这种嵌套结构在文档树中是有效的，浏览器会将其解析为独立的层级节点。根据 MDN 文档，h1 到 h6 元素代表六个级别的章节标题，h1 是最高级别。当 h1 出现在 section 内部时，它仍然被视为 h1 级别，而不是自动降级为 h2。这意味着在文档大纲中，它依然占据最高层级，section 元素本身并不会改变其子元素 h1 的级别。
这种结构表现与文档大纲算法有关。文档大纲算法会遍历文档中的 sectioning content 元素，并根据其子元素的标题级别构建层级结构。如果 section 内部包含 h1，大纲会将其视为顶级标题。例如，一个页面包含一个 h1 和一个嵌套在 section 中的 h1，大纲会显示两个顶级标题。这种结构在语义上是清晰的，但可能会让用户感到困惑，因为页面通常期望只有一个 h1。MDN 提示，虽然允许这样做，但这不被视为最佳实践，页面通常应该只有一个描述内容的 h1 元素。
h1 元素嵌套对可访问性的影响
对于使用屏幕阅读器的用户来说，h1 元素嵌套在 section 内部可能会影响导航体验。屏幕阅读器通常会将页面中的所有 h1 元素列出来，以便用户快速跳转。如果页面中有多个 h1，用户可能会迷失方向，不知道哪个是主要标题。MDN 指出，屏幕阅读器可以生成所有标题的有序列表，这有助于用户确定内容层级。如果 h1 被嵌套，列表中会显示多个 h1，这可能会让用户难以理解页面的主要结构。
为了避免混淆，建议页面只使用一个 h1 元素，并将其他标题从 h2 开始。如果必须使用多个 h1，可以通过 aria-label 属性为每个 h1 提供描述性标签，帮助屏幕阅读器用户区分它们。MDN 提供了示例，展示如何使用 aria-labelledby 为 sectioning content 添加标签。这种技术可以帮助用户理解每个 section 的目的，即使其中包含 h1 元素。总之，h1 元素嵌套在 section 内部在技术上是可行的，但对可访问性有潜在影响，需要谨慎处理。
h1 元素嵌套的样式与布局表现
h1 元素嵌套在 section 内部时，其样式和布局表现与普通 h1 元素相同。根据 MDN 文档，默认情况下，所有标题元素都会在布局中创建一个块级框，从新行开始并占据可用宽度。这意味着嵌套在 section 中的 h1 也会占据全宽，并从新行开始显示。如果开发者对 h1 应用了特定的 CSS 样式，这些样式也会应用到嵌套的 h1 上。例如，如果 h1 的字体大小设置为 2rem，嵌套的 h1 也会保持相同的字体大小。
需要注意的是，MDN 提到在 2025 年 5 月之前，HTML 标准规定 section、article、aside 或 nav 元素中的 h1 元素应渲染为 h2（较小的字体大小和调整后的 margin-block）。这一特殊上下文相关的默认样式已被移除。因此，现在所有浏览器中的 h1 元素都会保持其原始级别，无论它是否嵌套在 section 中。开发者需要确保使用 CSS 来统一 h1 的样式，而不是依赖浏览器的默认行为。例如，可以使用 :where(h1) 选择器来设置统一的 margin-block 和 font-size，确保一致性。
h1 元素嵌套的最佳实践与验证方法
为了确保文档结构的清晰和可访问性，建议遵循最佳实践：页面应只使用一个 h1 元素，并从 h2 开始使用其他标题级别。如果必须嵌套 h1，应确保每个 h1 都有明确的语义，并通过 aria-label 提供描述。MDN 强调，不要跳过标题级别，始终从 h1 开始，然后是 h2，依此类推。这种做法有助于屏幕阅读器用户生成清晰的标题列表，并避免混淆。
验证 h1 元素嵌套是否正确的方法是使用浏览器的开发者工具或可访问性检查工具。开发者工具可以显示文档大纲，帮助确认 h1 元素是否被正确解析为顶级标题。可访问性检查工具可以检测页面中是否有多个 h1，并提示是否需要调整。此外，可以使用屏幕阅读器测试页面，检查标题列表是否清晰。如果发现多个 h1 导致导航困难，可以尝试将嵌套的 h1 改为 h2，或为每个 h1 添加 aria-label。通过这些方法，可以确保文档结构既符合 HTML 标准，又具有良好的用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。