必须用而非:当文本需屏幕阅读器加重语气或承载实质重要性(如安全警告、法律条款)时,传递语义强调;仅视觉加粗,无语义价值。

别用 <b></b> 和 <i></i> 做语义强调——它们只是视觉开关,不传达意义,对可访问性和 SEO 没有帮助。
什么时候该用 <strong></strong> 而不是 <b></b>
当文本需要被屏幕阅读器加重语气、或代表内容具有实质重要性(如安全警告、法律条款关键句)时,必须用 <strong></strong>。浏览器默认渲染为粗体,但语义才是重点。
-
<strong>密码错误超过5次将永久锁定账户</strong>—— 机器和人都能识别这是强约束 -
<b>注意:</b> 点击确认即提交订单—— “注意”只是视觉提示,无语义权重,<b></b>可接受 - 滥用
<strong></strong>(比如整段加粗)会稀释其语义价值,屏幕阅读器可能忽略后续的真正重点
<em></em> 和 <i></i> 的分工很明确
<em></em> 表示重读强调,影响语义节奏;<i></i> 仅表示非默认语调的文本类型,比如外语词、船名、术语。
-
<em>真的</em>不能删这个文件—— “真的”是说话时的强调重音 -
《<i>百年孤独</i>》是拉美文学代表作—— 书名用<i></i>是惯例,不是强调 - 把“Python”写成
<em>Python</em>是错的——它只是专有名词,不是语境中被重读的部分
下标、上标、删除线这些标签不能靠 CSS 替代
CSS 可以模拟视觉效果,但无法传递原始语义。化学式、数学幂、法律修订痕迹等场景,必须用原生标签。
-
H<sub>2</sub>O和x<sup>2</sup>—— 浏览器/辅助工具能识别结构关系,纯 CSS 的vertical-align: sub没有语义 -
<del>¥299</del> <ins>¥199</ins>表示修订行为,比<s>¥299</s> ¥199更准确(<s></s>仅表示“不再准确”,不体现“被替换成什么”) -
<u></u>在现代 HTML 中已弃用语义用途,除非你要标记拼写错误(需配合spellingrole),否则优先用 CSStext-decoration: underline
<small></small> 不是“缩小字体”的快捷键
它专用于旁注类内容:版权信息、免责声明、脚注说明。它的语义是“次要但必要”,不是“看着小一点就行”。
-
<p>© 2026 Lobster AI. <small>本服务受最终用户许可协议约束</small></p>—— 合规且语义清晰 - 用
<small></small>包裹导航菜单文字来“节省空间”是误用,应通过 CSS 控制字体大小 - 部分浏览器对
<small></small>有默认字号缩放(通常是 80%),但不应依赖该行为做布局
最容易被忽略的是:所有这些标签的语义价值,只在它们被正确嵌套、不与 CSS 冲突时才成立。比如给 <strong></strong> 加 font-weight: normal,等于关掉了它的核心作用。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











