HTML 允许且支持在单页中使用多个

标签，关键在于遵循“每个独立内容区域一个主标题”的语义原则；现代屏幕阅读器能正确解析嵌套或动态展示的 H1（如模态框内），无需降级为 H3，但需配合正确的 ARIA 属性与 DOM 结构。

核心判断：H1 并非页面唯一

先说一个核心观点：在 Web 语义化与无障碍实践中，

从来就不是什么“页面唯一”的硬性限制。它真正代表的是一个独立内容区块的最高层级标题。

HTML5 的大纲算法——尽管主流浏览器还没完全实现——其实已经通过

实际示例：Lightbox 场景分析

以你提到的 Lightbox 场景为例：

My Lightbox Demo
Thank you for trying this
  Click me!
  
The Lightbox
  
It worked!
  

这个写法是完全正确的。原因很明确：

• role="dialog" 加上 aria-modal="true"，就是告诉屏幕阅读器：“注意，这是个独立对话框，语境和外面不一样”；
• 用 aria-labelledby="lightbox-title" 把对话框的名字和内部那个

  绑定起来，屏幕阅读器一进来就会播报“对话框：The Lightbox”；

• 这个内部的

  在逻辑上是 Lightbox 这个独立单元的主标题，和页面主文档的

  各管各的，不存在冲突；

• 把第二个

  人为降级成

  反而会搞乱语义层级，让用户对内容重要性的判断产生偏差。

需要避免的常见问题

当然，有几个坑得特别留意：

• 别在普通流式内容里无节制地堆砌

  ，比如连续好几个

  中间没有任何语义分隔，那标题的权威性就没了，大纲也得乱套；

• Lightbox 动态显示的时候，必须确保 aria-modal="true" 正确生效，焦点要受控——首次打开时聚焦到标题或第一个可交互元素，关闭后焦点得回到触发按钮；
• 不推荐用 aria-visible="false" 来控制隐藏，这个属性压根不存在。应该用 aria-hidden="true"，显示时同步切换回来。

总结：多个 H1 的合理使用

说到底，多个

不是反模式，反而是 HTML5 在语义演进过程中的一个重要体现。关键不在于“能不能用”，而在于“为什么用”。只要每个

都实实在在地承担起它所在内容块的主标题职责，再配上合适的 ARIA 角色和属性，这就是最清晰、最健壮、无障碍合规的最佳实践。