HTML5多层级标题设计需确保屏幕阅读器准确构建文档大纲，核心是唯一h1、层级连续、语义正确、动态内容同步可访问性状态。

HTML5 中设计多层级标题，核心是让屏幕阅读器能准确构建文档大纲，同时保持视觉结构与语义一致。关键不是“能用几个h几”，而是“怎么用才不打断逻辑流”。

必须只有一个主标题（h1）且放在主内容开头

全页只设一个

，代表整页唯一主题，比如文章标题、产品主名称或页面核心目的。它应紧邻

开始处，不能藏在 header 里当 logo 文字，也不能被 JS 延迟注入。若 CMS 模板中轮播图、卡片模块各自塞一个

，读屏器会无法判断哪一个是真正的页面主题。

层级必须连续，禁止跳级

从

出发，后续只能是

→

→

这样逐级展开。出现

后直接

，无障碍检查工具会报 heading-level-skipped 错误，屏幕阅读器用户按 H 键跳转时会“掉层”，以为章节已结束。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 同级并列可以：
  、
  是合法的
• 降级必须完整：
  下该用
  ，而不是为“看起来小一点”改用

• 真需更细组织？优先用
  、
  或带语义 class 的
  ，而非硬塞

  /

  表格内不能直接放标题，要用 ARIA 明确隶属关系

  在 或 里写

  是非法 HTML5 写法，也会切断与上方标题的语义关联。正确做法是：

  • 给对应 设 id（如 id="sales-q2"）
  • 在 内用
  • 把子标题文字放在
    中，仅作命名源，不重复朗读

  这样屏幕阅读器会读作“Sales Q2 April Target Reached”，清晰传达归属。

  动态内容插入标题时，要同步更新可访问性状态

  用 JS 或 htmx 加载新章节后，如果新增了

  ，不能只加 DOM：
  • 确保新标题紧跟在上一级标题之后，不破坏嵌套路径
  • 调用 document.getElementById('main').focus() 把焦点移到新区块起始
  • 若内容重要，配合 aria-live="polite" 提示变化，避免静默更新
  • 禁用 v-html 或 dangerouslySetInnerHTML 拼接标题——拼错一个字符，整个大纲就失效