在语义正确的 HTML 中，h1–h6 仅用于真实具有标题意义的内容；若仅为视觉强调（如加下划线、变色等），应选用 、 或普通容器（如 ）配合 CSS 实现，而非滥用标题标签——这既符合 WCAG 可访问性要求，也保障结构语义清晰。
在语义正确的 html 中，h1–h6 仅用于真实具有标题意义的内容；若仅为视觉强调（如加下划线、变色等），应选用 ``、`` 或普通容器（如 ``）配合 css 实现，而非滥用标题标签——这既符合 wcag 可访问性要求，也保障结构语义清晰。
HTML 标题元素（<h1></h1> 至 <h6></h6>）的核心职责是表达内容层级结构，而非控制外观。WCAG 和无障碍最佳实践明确指出：元素的选择必须基于其语义含义（semantics），而非视觉样式或开发者偏好。换句话说，判断是否使用 <h2></h2> 的唯一标准是——这段文本在文档逻辑中是否真正承担“二级标题”的功能？例如，它是否概括了后续若干段落的主题？是否应在自动生成的目录或屏幕阅读器的标题导航中被识别？
如果答案是否定的，那么即使你用 CSS 将 <span class="subheader-uline"></span> 渲染得和 <h3></h3> 一模一样（加粗、增大字号、添加下划线），它在语义上依然只是普通文本——此时正确做法是：
<!-- ✅ 语义正确：纯视觉强调，无标题含义 --> <span class="subheader-uline">My custom emphasised text</span>
配合 CSS 实现所需样式：
.subheader-uline {
font-weight: 600;
text-decoration: underline;
color: #2c3e50;
}
而以下写法则是语义错误且违反 WCAG 的：
<!-- ❌ 错误：滥用 heading 标签伪装强调效果 --> <h3 class="subheader-uline">My custom emphasised text</h3>
原因在于：它向辅助技术（如屏幕阅读器）错误地宣告这是一个三级标题，干扰用户对页面结构的理解，破坏导航逻辑，并可能导致标题大纲（heading outline）混乱。
✅ 正确替代方案取决于强调意图：
- 表达重要性/强语气 → 使用
<strong></strong>（语义为“重要内容”，默认加粗） - 表达语调/强调/区别于上下文 → 使用
<em></em>（语义为“强调”，默认斜体） - 纯自定义样式，无特定语义 → 使用
<span></span>或<div>，配合 ARIA（如非必要则避免 <code>aria-label干预）⚠️ 特别注意：
- 不要为了“跳过屏幕阅读器导航”而刻意回避语义标签——若真是标题，就该被导航；若不该被导航，那它就不该是标题。
- 反向操作（隐藏真实标题仅供屏幕阅读器使用）是可接受的（如
.sr-only类），但“视觉像标题 + 语义非标题”属于典型的语义欺诈，应严格避免。 - 所有样式均可通过 CSS 独立控制，HTML 结构只负责传达意义。
总结：以语义为先，样式为后；让
<h1></h1>–<h6></h6>专属于标题，把视觉表现交给 CSS。这是构建健壮、可访问、易维护前端的基础原则。
