语义决定标签选择：仅当文本在内容结构中真正承担标题功能时才应使用 h1–h6；若仅为视觉强调，应选用 、 等语义化内联元素，并通过 CSS 控制样式，而非滥用标题标签。
语义决定标签选择：仅当文本在内容结构中真正承担标题功能时才应使用 h1–h6；若仅为视觉强调，应选用 ``、`` 等语义化内联元素，并通过 css 控制样式，而非滥用标题标签。
在网页开发中，一个常见误区是将 HTML 标签视为“样式工具”——例如用 <h3></h3> 仅为了获得加粗+较大字号的视觉效果，或用 <span class="subheader-uline"></span> 替代标题却回避语义责任。但 WCAG 和现代可访问性实践明确指出：HTML 元素的选择必须基于内容的语义角色，而非外观需求。
✅ 正确做法示例：
- 若某段文字是章节标题（如“安装步骤”“配置选项”），它在文档大纲中具有层级意义 → 使用
<h2></h2>或对应层级的标题标签； - 若仅为强调关键词（如“请务必备份数据”），无结构意义 → 使用
<strong></strong>（表示重要性）或<em></em>（表示语气强调）； - 若需自定义下划线、颜色、字体等视觉效果 → 全部交由 CSS 处理：
<!-- 语义正确 + 样式可控 --> <p>请 <strong class="highlight-underline">务必备份数据</strong> 再执行升级。</p>
.highlight-underline {
text-decoration: underline 2px solid #0066cc;
font-weight: 600;
}
❌ 错误模式（违反可访问性原则）：
- 用
<h4></h4>包裹非标题文本（如按钮文字、标签、装饰性短语），会错误地向屏幕阅读器宣告“这是一个四级标题”，干扰导航逻辑； - 用
<span></span>模拟标题样式却拒绝语义，既剥夺了辅助技术理解结构的能力，又让开发者失去对文档大纲的掌控； - 假设“不希望被屏幕阅读器朗读”就等于“不该有语义”——这混淆了呈现（presentation） 与含义（meaning）。WCAG 要求的是有意义的内容可被感知、可操作、可理解，而非“隐藏语义以换取简洁”。
? 关键原则总结：
- 语义优先：先问“它在信息架构中扮演什么角色？”，再选标签；
- 样式自由：所有视觉表现均可通过 CSS 实现，无需牺牲语义妥协；
- 导航即信号：标题天然属于文档导航流（如屏幕阅读器的 heading 快捷键、浏览器的“大纲视图”）。若你认为某内容不值得被导航，它就不该是标题；
-
增强而非削弱：如确需为辅助技术提供额外上下文（如隐藏的标题），可用
aria-label或.visually-hidden类补充，而非删除语义。
最终，良好的 HTML 不是“看起来像标题”，而是“本身就是标题”——或者，坦然承认它只是强调文本，并用恰当的语义标签如实表达。
