HTML 中是否使用 h1–h6 标签，取决于内容的语义角色而非视觉样式；若仅为强调而非真正标题，应选用 、 或带语义类名的 ，并确保 CSS 实现样式分离，以符合 WCAG 可访问性标准。
html 中是否使用 h1–h6 标签，取决于内容的语义角色而非视觉样式；若仅为强调而非真正标题，应选用 ``、`` 或带语义类名的 ``，并确保 css 实现样式分离，以符合 wcag 可访问性标准。
在网页开发中，一个常见误区是将视觉样式与语义结构混为一谈。例如，使用 <span class="subheader-uline">My custom emphasised text</span> 来模拟小标题的下划线效果，初衷是纯装饰性的，但若该文本在信息架构中并非真正的标题层级（即不表示内容区块的起始、不承载组织逻辑、不参与文档大纲），那么刻意回避语义化标签反而是正确的——前提是你的选择本身具备清晰语义。
✅ 正确做法示例：
-
若需强调重要性（如警示、关键结论）：
<p>Our service offers <strong>24/7 technical support</strong> — guaranteed.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
-
若需表达语气或轻度强调（如反语、术语）：
<p>This is <em>not</em> a subscription fee — it's a one-time setup cost.</p>
-
若需完全自定义样式且无语义强调需求（如品牌标语、装饰性短语）：
<span class="decorative-label">Premium Tier</span>
并配合 CSS 控制外观（避免
font-weight: bold或font-size暗示标题感）：.decorative-label { display: inline-block; border-bottom: 2px solid #007bff; padding-bottom: 0.2em; font-family: 'Segoe UI', sans-serif; }
⚠️ 关键注意事项：
-
不要用 CSS “伪装”标题：例如给
<span></span>设置font-size: 1.5em; font-weight: bold;却不赋予其 heading 语义——这会误导屏幕阅读器用户，也违反 WCAG 1.3.1（信息与关系）和 2.4.6（标题与标签）。 -
不要因“不想被导航到”而拒绝 heading 标签：如果某段文字确实是内容区块的主标题（如“产品特性”、“客户评价”），它就理应是
<h2></h2>或<h3></h3>，并自然出现在屏幕阅读器的标题导航列表和浏览器生成的文档大纲中——这是可访问性的核心优势，而非缺陷。 -
语义 ≠ 导航强制可见：你仍可通过
aria-hidden="true"隐藏纯装饰性元素，但绝不可对真实标题添加aria-hidden或role="presentation"，否则会直接破坏可访问性。
总结而言：HTML 标签的选择必须遵循「一个元素，一种语义」原则。h1–h6 专属于标题层级；强调文本请交由 <strong></strong>、<em></em> 或语义中立的 <span></span> + CSS 承担。视觉设计永远通过 CSS 实现，而结构语义永远由 HTML 承载——二者分离，方为健壮、合规、可持续的前端实践。
