标题层级连续、逻辑自洽即可构建可访问大纲，无需显式分节；应避免跳级、重复主标题和伪标题，用h3.visually-hidden等技术补全语义锚点。
标题标签本身不依赖–
自然形成可解析的结构，前提是避免跳级、重复主标题、以及伪标题干扰。
保持标题层级严格递进
即使内容看起来“平铺直叙”，只要存在隐含的逻辑层次，就该用对应级别的标题表达。例如产品介绍页中：
-
智能温控器 Pro
—— 全页唯一主标题，定义页面核心主题 -
核心功能
—— 一级子主题，统领后续所有功能点 -
自适应学习算法
—— 功能项之一，是的直接子级
-
多时段场景模式
—— 同级功能项，与上一条平行 -
安装与配置
—— 新的一级子主题，级别与前一个相同，表示并列关系
这种写法无需节点 → 各自下属的
节点。
用强化无区域的语义上下文
当某段内容虽未独立成节，但有明确起始标识（如带图标的说明块、带徽章的提示栏），可用
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<header><h3>注意</h3> <p>首次使用需校准传感器…</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></header> 本身不参与大纲，但让 更易被辅助技术识别为该区块的引导信息
- 比单纯写
更清晰，又比硬套
更轻量——尤其适合短小、非章节化的提示类内容
对纯并列内容，用同级标题+语义容器替代嵌套
比如 FAQ 列表、特性图标组、服务项目清单，本质是平级关系，不应强行用
→嵌套：
- 正确做法：全部用
，每个后紧跟其说明（
或），靠视觉样式或列表结构体现并列
- 错误做法：
安全防护
→ 加密传输
→ 双因素认证
→ 再来个售后服务
，这会让大纲误判为“安全防护”包含两个子项、“售后服务”是另一顶级分支，而实际它们是同一层级的服务类别
- 若需微调语义，可用
必要时用视觉隐藏标题补全语义
- 正确做法：全部用
，每个
后紧跟其说明（
或
），靠视觉样式或列表结构体现并列 - 错误做法：
安全防护
→加密传输
→双因素认证
→ 再来个售后服务
，这会让大纲误判为“安全防护”包含两个子项、“售后服务”是另一顶级分支，而实际它们是同一层级的服务类别 - 若需微调语义，可用
必要时用视觉隐藏标题补全语义
有些区域在视觉上不需要大字号标题（如表单区块、卡片式参数区），但大纲需要锚点：
- 写法：
<section><h3 class="visually-hidden">网络设置</h3> <form>...</form></section> - 这样既满足每个
必须含标题的规范，又不干扰视觉设计 - 屏幕阅读器会读出“网络设置”，键盘用户能用快捷键跳转，搜索引擎也能索引该区块主题
