HTML 中 h1–h6 标签仅应用于真正具有标题语义的内容；纯装饰性强调文本应使用 、 或带语义的内联元素，配合 CSS 实现视觉效果，以确保无障碍可访问性与语义准确性。
html 中 h1–h6 标签仅应用于真正具有标题语义的内容；纯装饰性强调文本应使用 ``、`` 或带语义的内联元素，配合 css 实现视觉效果，以确保无障碍可访问性与语义准确性。
在构建可访问、语义清晰的网页时，元素的选择必须基于内容的含义（semantics），而非视觉表现。<h1></h1> 到 <h6></h6> 是结构性标题标签，其核心作用是表达文档层级关系（如章节、子章节），并天然被屏幕阅读器识别为导航节点——这意味着它们会出现在语音导航列表、大纲视图（如浏览器的“文档结构”面板）及自动生成的目录中。
因此，当你写：
<span class="subheader-uline">My custom emphasised text</span>
从语义角度看是完全合理的——只要这段文字不是标题，而只是需要视觉突出的普通文本（例如强调关键词、副标题式装饰、标签文案等），就不应强行套用 <h2></h2> 或其他 heading 标签。此时，更恰当的语义化替代方案包括：
-
<strong></strong>：表示内容具有强重要性（如警告、关键操作）； -
<em></em>：表示轻度强调或语义重音（如语气变化）； -
<mark></mark>：高亮上下文中相关但非标题的信息； -
<span></span>+ ARIArole="text"（极少数需明确排除语义时，但通常不推荐）。
✅ 正确示例（语义+样式分离）：
立即学习“前端免费学习笔记（深入）”；
<p>The <strong class="subheader-uline">security policy</strong> requires two-factor authentication.</p>
.subheader-uline {
text-decoration: underline 2px solid #0066cc;
font-weight: 600;
}⚠️ 错误做法（滥用 heading 破坏语义）：
<!-- ❌ 危害：误导屏幕阅读器，破坏文档大纲，违反 WCAG 1.3.1（信息与关系） --> <h3 class="subheader-uline">security policy</h3>
? 关键原则总结：
- 语义决定标签，CSS 决定样式：任何视觉效果（下划线、粗体、颜色、大小）都可通过 CSS 实现，无需牺牲语义；
- 不要为“跳过导航”而降级语义：若你认为某内容“不重要到不该被屏幕阅读器导航”，那它本质上就不是 heading；
-
宁可多加语义，不可伪造语义：如需辅助导航，可添加隐藏但可读的
<h2 aria-hidden="false" class="sr-only">Section title</h2>；但绝不可用<h2></h2>假装是标题来获得样式。
遵循这一逻辑，不仅满足 WCAG 2.1 AA 级别要求（特别是准则 1.3.1、2.4.6 和 4.1.2），更能提升 SEO 表现、维护长期可维护性，并让所有用户——无论是否依赖辅助技术——获得一致、可信的信息结构。
