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

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

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

在 Web 语义化与无障碍实践中，

并非“页面唯一”的硬性限制，而是代表一个独立内容区块的最高层级标题。HTML5 的大纲算法（尽管主流浏览器未完全实现）明确支持基于

、

、

、

等语义容器的标题作用域隔离——这意味着，只要结构合理，多个

不仅合法，而且更准确。

以你提供的 Lightbox 示例为例：

<h1>My Lightbox Demo</h1>
<h2>Thank you for trying this</h2>
<div>
  <button aria-controls="lightbox" type="button">Click me!</button>
</div>

<div id="lightbox" role="dialog" aria-modal="true" aria-labelledby="lightbox-title" style="display: none;">
  <h1 id="lightbox-title">The Lightbox</h1>
  <p>It worked!</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
													<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <button aria-label="Close lightbox">✕</button>
</div>

✅ 这是语义正确且无障碍友好的写法，原因如下：

• role="dialog" + aria-modal="true" 明确告知辅助技术：该区域是一个模态对话框，具有独立的上下文；
• aria-labelledby="lightbox-title" 将对话框的可访问名称绑定到内部

  ，确保屏幕阅读器进入时能自然播报“对话框：The Lightbox”；

• 内部

  在逻辑上是 Lightbox 这一独立内容单元的主标题，与主文档的

  并不冲突——二者分属不同语义作用域；

无需将第二个

改为

：人为降级标题层级反而会破坏语义结构，误导用户对内容重要性的判断。

⚠️ 注意事项：

• 避免在普通流式内容中无节制堆砌

  （例如连续多个

  无语义分隔），这会削弱标题的权威性并干扰大纲生成；

• 动态显示的 Lightbox 必须确保：显示时 aria-modal="true" 生效、焦点受控（首次打开应聚焦到标题或首个可交互元素）、关闭后焦点回归触发按钮；
• 不推荐仅用 aria-visible="false"（该属性不存在），应使用 aria-hidden="true" 控制隐藏状态，并在显示时同步切换。

总结：多个

不是反模式，而是 HTML5 语义演进的重要体现。关键不在“能否用”，而在“为何而用”。只要每个

真正承担起其所处内容块的主标题职责，并辅以恰当的 ARIA 角色与属性，它就是清晰、健壮且无障碍合规的最佳实践。