标题标签是语义化结构标记，非样式工具；应严格按内容层级使用h1–h6，视觉强调用CSS或strong/em等元素，避免跳级、滥用和装饰性误用。
别把普通文本硬套成标题标签——标题是结构标记，不是“加粗放大”按钮。用错不仅影响可访问性、SEO，还会让屏幕阅读器用户迷失方向。
明确区分语义与样式
标题标签（<h1> 到 <h6>）只用于表达内容层级关系，比如文章主标题、章节、小节。如果一段文字只是想加粗或突出显示，该用 <strong> 或 <em>；想换行或分隔，用 <p>、<div> 或列表更合适。
- ✅ 正确：用 <h2> 表示“安装步骤”这一大块内容的起始
- ❌ 错误：把“注意：请先备份”写成 <h4> 只为让它变小变粗
- ✅ 替代方案：“注意”可用 <strong> + 段落，或加 class="warning" 配 CSS 控制外观
警惕编辑器和 CMS 的“一键标题”陷阱
很多可视化编辑器（如 WordPress 块编辑器、Notion 导出、CMS 后台）允许用户随意点选“标题4”，但不会校验当前上下文是否已有 <h2> 或 <h3>。结果就是页面大纲断裂、Lighthouse 报错 “Heading levels should only increase by one”。
- 发布前用浏览器插件（如 HeadingsMap）检查标题层级是否连贯
- 若 CMS 不支持自动降级，可在模板中限制：比如组件接收 level 参数时，强制 max(level, 3) 或做偏移校正
- Markdown 转 HTML 工具需配置根级别（如设 baseHeaderLevel: 2），避免 ### 直接生成 <h4>
用 CSS 替代标题标签实现视觉强调
想让某段文字看起来像标题？交给 CSS。保持 HTML 干净语义，样式归样式管。
立即学习“前端免费学习笔记（深入）”；
- 给普通段落加 class：<p class="section-title">常见问题</p>，再用 CSS 设置字体大小、粗细、间距
- 避免用 <h5> 或 <h6> 当“小标题”图省事——它们有明确的结构含义，不该降级充当代替品
- 需要锚点跳转？用 id 属性即可：<p id="faq">常见问题</p>，无需套标题标签
团队协作时统一规范
前端、内容编辑、产品三方容易对“这里要不要用 h3”产生分歧。建议在项目文档中写明：
- 每个页面仅一个 <h1>（通常是 page title 或 main heading）
- <h2> 对应一级内容区块（如“功能介绍”“价格方案”）
- 所有二级以下结构必须严格递进，禁止跳级；实在无子层级，就用段落+图标/背景色等方式视觉区分
- 禁用标题标签实现装饰性效果（如 banner 上的 slogan、卡片里的副标题）
