应使用h1–h6语义化标题标签构建逻辑层级结构，一个页面仅一个h1，禁止跳级或用div+class模拟标题；配合section/article等语义容器组织内容，并用Lighthouse、屏幕阅读器等工具验证结构有效性。
直接用语义化标题标签（h1 到 h6）构建大纲，而不是靠 class="title-large" 或 div class="section-header" 这类纯样式类名来模拟标题结构。
坚持用标题标签表达层级关系
标题的本质是内容的逻辑层级，不是视觉大小。h1 表示最高级主题，h2 是其下一级子主题，依此类推。浏览器、屏幕阅读器和搜索引擎都依赖这个嵌套结构理解页面骨架。
- 一个页面只应有一个 h1，通常是主标题或网站名称
- h2 用于主要章节，h3 用于子节，不要跳级（比如 h1 后直接 h4）
- 避免为“看起来像标题”而把 div + class 写成 h2 的字号和粗细，这在无障碍和 SEO 上完全无效
别让 CSS 掩盖语义缺失
有时开发者会写一个 div class="heading"，再用 CSS 设置 font-size 和 margin 模拟标题效果。这种写法看似省事，实则切断了语义链。
- 屏幕阅读器不会把 div 当作标题朗读，用户无法用快捷键跳转到“标题列表”
- 搜索引擎可能忽略该区块的重要性，影响关键词权重分配
- 后续维护时，别人很难判断这个“heading”到底是标题、按钮还是装饰性文字
用语义化容器辅助标题组织
单独的标题标签还不够，需配合语义化区块让结构更清晰。
立即学习“前端免费学习笔记（深入）”；
- 用 section 包裹一组有共同主题的内容，其内部第一个标题自然成为该节的标题
- article 内的 h1/h2 表示这篇文章自身的层级，不与页面级 h1 冲突
- 避免所有标题都堆在 div 或 main 里没有分组，那样大纲会扁平且难维护
检查工具帮你发现隐藏问题
仅靠肉眼容易忽略标题误用。可借助简单手段验证：
- 在浏览器中右键 → “检查元素”，观察是否真用了 h1–h6，而非 div/span + class
- 使用 Chrome 的 Lighthouse 工具跑“Accessibility”审计，它会提示“标题未按层级使用”
- 用 NVDA 或 VoiceOver 朗读页面，听是否能按标题快速导航
