HTML 中 h1–h6 标签的核心作用是表达内容的语义层级，而非实现视觉样式；若文本本质上不是标题（如仅需强调的普通文字），应选用 、 或 配合 CSS，而非滥用标题标签——这既符合 WCAG 可访问性规范，也保障结构语义清晰。
html 中 h1–h6 标签的核心作用是表达内容的语义层级，而非实现视觉样式；若文本本质上不是标题（如仅需强调的普通文字），应选用 ``、`` 或 `` 配合 css，而非滥用标题标签——这既符合 wcag 可访问性规范，也保障结构语义清晰。
在网页开发中，一个常见误区是将 <h1></h1>–<h6></h6> 视为“加粗加大”的样式工具。例如，有人会这样写：
<span class="subheader-uline">My custom emphasised text</span>
并期望它看起来像小标题——这是完全合理的；但若因审查工具报错“应使用 h2 而非 span”就强行改用 <h2></h2>，反而违背了可访问性原则。
关键判断标准只有一个：语义（Semantics）
- ✅ 是内容大纲中的层级标题？（如章节名、文章子标题、导航区标题）→ 使用
<h1></h1>–<h6></h6> - ❌ 仅需视觉强调、无结构意义？（如关键词高亮、标语短语、装饰性副标）→ 使用
<strong></strong>（强调重要性）、<em></em>（强调语气），或纯<span></span>+ CSS
⚠️ 注意：屏幕阅读器默认将
<h1></h1>–<h6></h6>纳入导航目录（如“标题列表”快捷键），若滥用会导致逻辑混乱。WCAG 2.1（准则 1.3.1）明确要求“信息与关系必须通过语义化标记传达”，而非仅靠视觉呈现。
正确实践示例：
<!-- ✅ 语义正确：主标题 --> <h1>Web Accessibility Fundamentals</h1> <!-- ✅ 语义正确：二级章节标题 --> <h2>Understanding Semantic HTML</h2> <!-- ✅ 非标题但需强调：关键词 --> <p>The most critical principle is <strong>semantic structure</strong>, not visual styling.</p> <!-- ✅ 纯装饰性强调（无语义） --> <span class="highlight-text">Beta version</span>
CSS 示例（复现标题样式而不破坏语义）：
.highlight-text {
font-weight: 700;
font-size: 1.1em;
text-decoration: underline;
color: #2563eb;
}
总结：
- 不要为“看起来像标题”而用
<h2></h2>；要为“确实是标题”而用<h2></h2>。 - 可访问性不是限制设计自由，而是要求设计意图与代码语义对齐。
- 若需隐藏标题供屏幕阅读器专用（如跳过导航链接前的“主菜单”提示），可用
.sr-only类；但绝不应反向操作——即让非标题“假装”是标题。
真正的无障碍始于对语义的尊重，而非对样式的妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
