标题标签是语义化结构标记，非样式工具；应严格按内容层级使用h1–h6，视觉强调用css或strong/em等元素，避免跳级、滥用和装饰性误用。

别把普通文本硬套成标题标签——标题是结构标记，不是“加粗放大”按钮。用错不仅影响可访问性、SEO，还会让屏幕阅读器用户迷失方向。

明确区分语义与样式

标题标签（

到

）只用于表达内容层级关系，比如文章主标题、章节、小节。如果一段文字只是想加粗或突出显示，该用 或 ；想换行或分隔，用

、

或列表更合适。

• ✅ 正确：用
  表示“安装步骤”这一大块内容的起始
• ❌ 错误：把“注意：请先备份”写成
  只为让它变小变粗
• ✅ 替代方案：“注意”可用 + 段落，或加 class="warning" 配 CSS 控制外观

警惕编辑器和 CMS 的“一键标题”陷阱

很多可视化编辑器（如 WordPress 块编辑器、Notion 导出、CMS 后台）允许用户随意点选“标题4”，但不会校验当前上下文是否已有

或

。结果就是页面大纲断裂、Lighthouse 报错 “Heading levels should only increase by one”。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 发布前用浏览器插件（如 HeadingsMap）检查标题层级是否连贯
• 若 CMS 不支持自动降级，可在模板中限制：比如组件接收 level 参数时，强制 max(level, 3) 或做偏移校正
• Markdown 转 HTML 工具需配置根级别（如设 baseHeaderLevel: 2），避免 ### 直接生成

用 CSS 替代标题标签实现视觉强调

想让某段文字看起来像标题？交给 CSS。保持 HTML 干净语义，样式归样式管。

• 给普通段落加 class：

  常见问题

  ，再用 CSS 设置字体大小、粗细、间距
• 避免用
  或
  当“小标题”图省事——它们有明确的结构含义，不该降级充当代替品
• 需要锚点跳转？用 id 属性即可：

  常见问题

  ，无需套标题标签

团队协作时统一规范

前端、内容编辑、产品三方容易对“这里要不要用 h3”产生分歧。建议在项目文档中写明：

• 每个页面仅一个
  （通常是 page title 或 main heading）

• 对应一级内容区块（如“功能介绍”“价格方案”）
• 所有二级以下结构必须严格递进，禁止跳级；实在无子层级，就用段落+图标/背景色等方式视觉区分
• 禁用标题标签实现装饰性效果（如 banner 上的 slogan、卡片里的副标题）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！