用于语义重要性(如“不可撤回”),仅视觉加粗;标记上下文相关文本(如搜索关键词),非强调;易误读为链接,表内容废弃,慎用。

<strong></strong> 和 <mark></mark> 是提升内容辨识度最直接有效的两个标签,但用错场景反而会稀释重点、干扰语义。
什么时候该用 <strong></strong> 而不是 <b></b>
<strong></strong> 表达的是「内容重要性」,浏览器默认渲染为粗体,但它的核心价值在语义——屏幕阅读器会加重语气读出,SEO 也会赋予更高权重。而 <b></b> 仅表示「视觉加粗」,无语义含义。
- 价格、警告、操作后果等必须被用户注意到的信息,用
<strong></strong>:比如<p>订单提交后<code><strong></strong>不可撤回。 - 品牌名、术语缩写首次出现时,若需强调而非语义强调,用
<b></b>更合适(如<p>全称是 <b>HyperText Markup Language</b>…<code>) - 连续多个
<strong></strong>会削弱可信度——它不是样式开关,而是语义锚点
<mark></mark> 不是高亮笔,是上下文标记工具
<mark></mark> 的本意是「标记文档中与当前上下文相关的部分」,比如搜索结果中的关键词、引用段落中的匹配项。它默认黄色背景,但颜色本身不重要,关键是它告诉辅助技术「这段文本正在被参照」。
- 用户搜索“响应式”后,页面中所有出现的“响应式”应包裹为
<mark></mark>,而不是靠 CSS 自己加背景 - 不要用
<mark></mark>替代<strong></strong>做强调——它不传递重要性,只传递「相关性」 - 如果需要自定义颜色,必须重置
background-color,否则在深色模式下可能完全看不见(默认黄底在暗色背景上常失效)
为什么 <u></u> 和 <s></s> 容易降低辨识度
<u></u> 在 HTML5 中已语义退化:下划线长期绑定于超链接,用户看到就预期可点击;滥用会导致信任下降。而 <s></s> 表示内容「不再准确或已被取代」,不是简单的「划掉」视觉效果。
- 拼写纠错、法律条文修订等真正需要表达「废弃/过期」含义时,才用
<s></s>;日常价格对比建议用<del></del>(语义更中性) - 想给中文专有名词加下划线?CSS 的
text-decoration: underline更可控,且不会触发链接联想 - 所有
<u></u>使用都应加role="presentation"或明确 aria-label,否则屏幕阅读器可能误读为链接
辨识度真正的瓶颈不在标签选择,而在克制——每个页面里真正需要被「强制看见」的内容极少。过度强调等于没有强调,而语义错配会让机器和人都更难理解你到底想说什么。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











