应优先使用语义化标签:<strong>表强重要性,<em>表语音重读;<b>仅用于无语气强调的醒目显示,<i>限于外语短语、船名等特定语义;<u>、<del>、<ins>专用于拼写标注与修订痕迹,不可作装饰用途。

别用 <b> 和 <i> 做强调,语义错位会导致可访问性问题和样式失控。真正需要强调时,<strong> 和 <em> 才是正确选择;而 <b> 仅用于“引起注意但不加重语气”的场景(比如关键词高亮),<i> 应限于外语短语、船名、术语等——不是所有斜体都该用它。
什么时候该用 <strong> 而不是 <b>
两者视觉上常一样,但语义完全不同:
-
<strong>表示内容有强烈重要性,屏幕阅读器会加重语气读出,搜索引擎也会加权; -
<b>只是“想让这段文字更醒目”,没有语义权重,相当于 CSS 的font-weight: bold; - 常见误用:把按钮文字、导航项、标题关键词包在
<b>里——这会让辅助技术用户丢失上下文; - 正确做法:密码规则提示、错误警告、法律条款关键句,一律用
<strong>。
<em> 和 <i> 的边界在哪
很多人以为“斜体就用 <i>”,其实容易踩坑:
-
<em>是语音重读,对应口语中抬高音调的部分,比如“我没说要删库”; -
<i>是语义区别,比如拉丁短语<i>et al.</i>、电影名<i>Inception</i>、生物学种名<i>Homo sapiens</i>; - 嵌套可用:
<em>你真的<strong>确定</strong>要这么做?</em>表示整句重读,其中“确定”还带强警告; - 避免滥用:不要为“显得专业”而给技术名词加
<i>,除非它确实是术语惯例(如<i>API</i>在文档中作为专有名词出现)。
<u>、<del>、<ins> 不是装饰,是修订痕迹
这些标签在 HTML5 中被重新定义为语义化修订标记,不是通用下划线或删除线工具:
立即学习“前端免费学习笔记(深入)”;
-
<u>仅用于拼写错误标注、中文专名号、人名/地名特殊标记——不是用来做链接下划线的(那是 CSS 任务); -
<del>表示内容已被正式删除(如合同条款废止),应配合<ins>使用,形成修订对:<del>199元</del><ins>169元</ins>; - 浏览器默认样式可能不够明显,建议用 CSS 补充视觉反馈,比如给
<ins>加绿色背景、<del>加红色横线; - 千万别用
<u>给普通链接加下划线——现代浏览器已默认处理,手动加反而破坏一致性。
最常被忽略的一点:这些标签都是行内元素,不能包 <p>、<div> 或其他块级内容。哪怕只是想给一段话加粗,也得先确认它本身是纯文本或只含其他行内标签——否则结构会崩,CSS 也难控制。语义对了,样式才稳;结构对了,维护才省心。



















