应优先用语义化标签而非内联style;用于纯视觉加粗(如品牌名),用于语义强调(如警告);表特定斜体内容(如外语词),表语气重读;避免,改用css或更精确语义标签;等有明确语义,须按规范使用。

直接用语义化标签控制文字表现,比写内联 style 更轻量、更可维护;但必须分清哪些是物理样式(仅外观)、哪些是逻辑语义(含含义),否则会影响可访问性和 SEO。
什么时候该用 <b></b> 而不是 <strong></strong>
当加粗只是视觉强调、不带重要性语义时,比如产品名、品牌词、界面按钮文案——这些不需要被屏幕阅读器加重语气读出。<b></b> 就是为此设计的。而 <strong></strong> 会触发语音阅读器提高音量或放慢语速,适合警告、必填项、关键操作提示等场景。
-
<b></b>:纯视觉加粗,无语义权重 -
<strong></strong>:语义上“强重要”,影响辅助技术行为 - 浏览器默认样式可能一致,但搜索引擎和读屏软件会区别对待
- 不要用
<b></b>替代标题标签(如<h2></h2>)来“假装”有层级——这破坏文档结构
<i></i> 和 <em></em> 的实际使用边界
<i></i> 不等于“随便斜体”,它专用于技术术语、外语短语、船名、生物分类名等传统印刷中习惯斜体的内容;<em></em> 则表示句子中需要重读的词,比如“你真的要删掉这个文件?”——这里的“真的”是语气重心。
- 用
<i></i>写 “The term bona fide comes from Latin.” - 用
<em></em>写 “I did not agree to those terms.” - 两者都可能渲染为斜体,但语义不可互换;滥用
<em></em>会让语音阅读器频繁变调,干扰理解 - 别用
<i></i>给图标做字体图标容器——那是<span></span>+ class 的事
为什么 <u></u>、<s></s>、<tt></tt> 应该尽量避免
这三个标签在 HTML5 中要么被废弃(<s></s>、<tt></tt>),要么语义模糊易引发混淆(<u></u> 默认样式和链接太像)。现代替代方案更明确、更可控:
-
<u></u>→ 改用text-decoration: underline配合语义化容器,比如<span class="spelling-error"></span> -
<s></s>→ 换成<del></del>(表示已删除内容),或用 CSS 的text-decoration: line-through加自定义类 -
<tt></tt>→ 全部替换为<code>(代码片段)、<kbd></kbd>(键盘输入)、<var></var>(变量)等专用语义标签 - 所有这类替换都能通过 CSS 精确控制颜色、间距、动画,且不影响语义流
<mark></mark>、<small></small>、<sub></sub> 这些冷门但实用的标签
它们不是“装饰品”,而是有明确定义的语义角色:<mark></mark> 表示页面中与当前用户查询或上下文相关的高亮部分;<small></small> 是法律条款、版权信息、免责声明等“次要但需保留”的内容;<sub></sub> 和 <sup></sup> 必须用于化学式、数学公式、脚注编号等真实语义场景,不能用来做伪上标(比如“TM”商标符号应走 Unicode 或 CSS vertical-align)。
-
<mark></mark>默认黄底,但建议用 CSS 覆盖以适配深色模式 -
<small></small>不只是“字号小”,它降低内容的权重等级,影响大纲生成和 SEO 权重分配 -
<sub></sub>在H<sub>2</sub>O中正确,但在Version 2.1<sub>beta</sub>中就属于误用——beta 是版本修饰,非化学下标 - 这些标签一旦用错,会导致结构解析错误,比如 RSS 抓取器或搜索引擎摘要可能丢弃
<small></small>内容
真正难的不是记住每个标签怎么写,而是判断某段文字在文档结构里“是什么角色”——是强调?是引用?是代码?是副文本?选错标签,后期靠 CSS 强行覆盖样式,也补不回丢失的语义。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











