html怎么做heading层级结构_html heading h1-h6标题层级结构规范【实用】-html教程-PHP中文网

一个页面必须且只能有一个，且标题须严格连续嵌套（h1→h2→h3…），跳级或重复会破坏屏幕阅读器导航与搜索引擎理解；多h1致读屏器卡在首个h1，忽略后续，因工具默认其为唯一锚点。

html怎么做heading层级结构_html heading h1-h6标题层级结构规范【实用】

一个页面必须且只能有一个

，且所有标题必须严格连续嵌套（→→），跳级或重复会直接破坏屏幕阅读器导航和搜索引擎理解。

为什么多个会让读屏器“卡住”

NVDA、JAWS 等工具在“标题模式”下按 H 键遍历时，遇到第一个

就认为是页面锚点；第二个不会被当作新章节，而是被忽略或误判为结构错误。常见触发场景包括：

Layout 组件里写了 Logo，页面组件又输出一个 文章标题
Next.js 的 _app.tsx 中渲染了里的，而 pages/article.tsx 又塞了一个
SSR 渲染时被 display: none 或 aria-hidden="true" 隐藏，但仍在 DOM 中——读屏器照读不误

怎么安全地让组件支持不同 heading 级别

别写死

或用条件判断切换标签（如

{isSub ?  : 
}

），这会导致 Lighthouse 无法静态分析、SSR 失效。正确做法是透传 level 属性并做边界控制：

const Header = ({ level = 2, children }) => {
  const Tag = `h${Math.min(Math.max(level, 1), 6)}`;
  return <tag>{children}</tag>;
};
// 使用：<header level="{1}">首页主标</header>
//       <header level="{3}">小节说明</header>

关键点：

服务端必须确定 level 值，不能靠客户端 JS 动态算（爬虫看不到）
禁止用 CSS 类名模拟标题，比如 —— 语义为零
富文本编辑器插入的若前面没，得在渲染层自动补一层逻辑占位（哪怕不可见），否则 Chrome DevTools 的 Accessibility 面板立刻标红



 到  跳级为什么比多  更难排查
跳级（如 
 后直接 ）不会触发控制台报错，但会切断辅助技术构建的“大纲树”。它不像多  那样被 Lighthouse 明确标为 heading-levels 错误，而是表现为：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

读屏器用户听到 “标题二级” → “标题四级”，中间两层完全消失，上下文断裂
AI 摘要工具提取内容时漏掉整块子模块（因语义链中断）
CMS 富文本中用户手打 #### 却忘了前面该有 ###，后端模板未校验就直出，问题藏在数据流里

最稳妥的防御方式：在构建阶段用 axe-core 或自定义 HTML 解析器做标题层级断言，把 
 后是否紧接  或同级  当成 CI 检查项。
真正难的不是写出符合规范的 HTML，而是在组件嵌套、CMS 输入、SSR 拼接、富文本解析这些环节中，始终让每个 
 都能回答清楚：“我的父级  在哪？我兄弟的  是否语义一致？”