文本格式化标签：strong、em、del、ins等语义标签

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

一、不只是加粗和斜体

在Word里，我们可以把文字加粗、变斜体、加下划线、加删除线……在HTML里，也有一系列用来格式化文本的标签。

但HTML的文本格式化标签和Word里的"加粗""斜体"有一个本质的区别——HTML的格式化标签首先是语义的，其次才是样式的。

比如 <strong> 标签，默认样式是加粗，但它的含义不是"把文字加粗"，而是"强调这段文字很重要"。加粗只是它的默认表现形式，你完全可以用CSS把它改成红色、变大、加背景——但它的语义"重要"是不变的。

理解了这一点，才算真正理解了HTML文本格式化标签。

这篇文章，我们就来系统学习HTML中的文本格式化标签——它们各自是什么含义、怎么用、有什么区别、常见的误区有哪些。

二、文本格式化标签总览

HTML提供了很多文本格式化标签，我们先整体认识一下：

#mermaid-svg-UJQEvxi2NxbMdS8A{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-UJQEvxi2NxbMdS8A .error-icon{fill:#552222;}#mermaid-svg-UJQEvxi2NxbMdS8A .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UJQEvxi2NxbMdS8A .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UJQEvxi2NxbMdS8A .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UJQEvxi2NxbMdS8A .marker.cross{stroke:#333333;}#mermaid-svg-UJQEvxi2NxbMdS8A svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UJQEvxi2NxbMdS8A p{margin:0;}#mermaid-svg-UJQEvxi2NxbMdS8A .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster-label text{fill:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster-label span{color:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster-label span p{background-color:transparent;}#mermaid-svg-UJQEvxi2NxbMdS8A .label text,#mermaid-svg-UJQEvxi2NxbMdS8A span{fill:#333;color:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A .node rect,#mermaid-svg-UJQEvxi2NxbMdS8A .node circle,#mermaid-svg-UJQEvxi2NxbMdS8A .node ellipse,#mermaid-svg-UJQEvxi2NxbMdS8A .node polygon,#mermaid-svg-UJQEvxi2NxbMdS8A .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-UJQEvxi2NxbMdS8A .rough-node .label text,#mermaid-svg-UJQEvxi2NxbMdS8A .node .label text,#mermaid-svg-UJQEvxi2NxbMdS8A .image-shape .label,#mermaid-svg-UJQEvxi2NxbMdS8A .icon-shape .label{text-anchor:middle;}#mermaid-svg-UJQEvxi2NxbMdS8A .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-UJQEvxi2NxbMdS8A .rough-node .label,#mermaid-svg-UJQEvxi2NxbMdS8A .node .label,#mermaid-svg-UJQEvxi2NxbMdS8A .image-shape .label,#mermaid-svg-UJQEvxi2NxbMdS8A .icon-shape .label{text-align:center;}#mermaid-svg-UJQEvxi2NxbMdS8A .node.clickable{cursor:pointer;}#mermaid-svg-UJQEvxi2NxbMdS8A .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-UJQEvxi2NxbMdS8A .arrowheadPath{fill:#333333;}#mermaid-svg-UJQEvxi2NxbMdS8A .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-UJQEvxi2NxbMdS8A .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-UJQEvxi2NxbMdS8A .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-UJQEvxi2NxbMdS8A .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-UJQEvxi2NxbMdS8A .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-UJQEvxi2NxbMdS8A .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster text{fill:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A .cluster span{color:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-UJQEvxi2NxbMdS8A .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-UJQEvxi2NxbMdS8A rect.text{fill:none;stroke-width:0;}#mermaid-svg-UJQEvxi2NxbMdS8A .icon-shape,#mermaid-svg-UJQEvxi2NxbMdS8A .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-UJQEvxi2NxbMdS8A .icon-shape p,#mermaid-svg-UJQEvxi2NxbMdS8A .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-UJQEvxi2NxbMdS8A .icon-shape .label rect,#mermaid-svg-UJQEvxi2NxbMdS8A .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-UJQEvxi2NxbMdS8A .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-UJQEvxi2NxbMdS8A .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-UJQEvxi2NxbMdS8A :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

文本格式化标签

语义化标签

纯样式标签

strong 重要

em 强调

mark 标记

small 次要

del 删除

ins 插入

sub/sup 上下标

b 粗体

i 斜体

u 下划线

s 删除线

可以看出，大部分常用的文本格式化标签都是有语义的。这也符合HTML5的设计理念——用语义化的标签，而不是纯样式的标签。

下面我们挑最重要、最常用的几个详细讲解。

三、strong —— 重要的内容

3.1 什么是strong标签

<strong> 标签用来表示重要的、强调的、严肃的内容。

浏览器默认样式是加粗，但 <strong> 的核心是语义——“这段文字很重要”，而不是"把字加粗"。

<p><strong>重要提示：</strong>请务必在截止日期前完成提交。</p>

3.2 strong的语义

<strong> 的含义是"强强调"，表示内容的重要性、严肃性、紧急性。

常见的使用场景：

#mermaid-svg-P5imWOKQ7q2enwGp{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-P5imWOKQ7q2enwGp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-P5imWOKQ7q2enwGp .error-icon{fill:#552222;}#mermaid-svg-P5imWOKQ7q2enwGp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-P5imWOKQ7q2enwGp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-P5imWOKQ7q2enwGp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-P5imWOKQ7q2enwGp .marker.cross{stroke:#333333;}#mermaid-svg-P5imWOKQ7q2enwGp svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-P5imWOKQ7q2enwGp p{margin:0;}#mermaid-svg-P5imWOKQ7q2enwGp .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-P5imWOKQ7q2enwGp .cluster-label text{fill:#333;}#mermaid-svg-P5imWOKQ7q2enwGp .cluster-label span{color:#333;}#mermaid-svg-P5imWOKQ7q2enwGp .cluster-label span p{background-color:transparent;}#mermaid-svg-P5imWOKQ7q2enwGp .label text,#mermaid-svg-P5imWOKQ7q2enwGp span{fill:#333;color:#333;}#mermaid-svg-P5imWOKQ7q2enwGp .node rect,#mermaid-svg-P5imWOKQ7q2enwGp .node circle,#mermaid-svg-P5imWOKQ7q2enwGp .node ellipse,#mermaid-svg-P5imWOKQ7q2enwGp .node polygon,#mermaid-svg-P5imWOKQ7q2enwGp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-P5imWOKQ7q2enwGp .rough-node .label text,#mermaid-svg-P5imWOKQ7q2enwGp .node .label text,#mermaid-svg-P5imWOKQ7q2enwGp .image-shape .label,#mermaid-svg-P5imWOKQ7q2enwGp .icon-shape .label{text-anchor:middle;}#mermaid-svg-P5imWOKQ7q2enwGp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-P5imWOKQ7q2enwGp .rough-node .label,#mermaid-svg-P5imWOKQ7q2enwGp .node .label,#mermaid-svg-P5imWOKQ7q2enwGp .image-shape .label,#mermaid-svg-P5imWOKQ7q2enwGp .icon-shape .label{text-align:center;}#mermaid-svg-P5imWOKQ7q2enwGp .node.clickable{cursor:pointer;}#mermaid-svg-P5imWOKQ7q2enwGp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-P5imWOKQ7q2enwGp .arrowheadPath{fill:#333333;}#mermaid-svg-P5imWOKQ7q2enwGp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-P5imWOKQ7q2enwGp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-P5imWOKQ7q2enwGp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-P5imWOKQ7q2enwGp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-P5imWOKQ7q2enwGp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-P5imWOKQ7q2enwGp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-P5imWOKQ7q2enwGp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-P5imWOKQ7q2enwGp .cluster text{fill:#333;}#mermaid-svg-P5imWOKQ7q2enwGp .cluster span{color:#333;}#mermaid-svg-P5imWOKQ7q2enwGp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-P5imWOKQ7q2enwGp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-P5imWOKQ7q2enwGp rect.text{fill:none;stroke-width:0;}#mermaid-svg-P5imWOKQ7q2enwGp .icon-shape,#mermaid-svg-P5imWOKQ7q2enwGp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-P5imWOKQ7q2enwGp .icon-shape p,#mermaid-svg-P5imWOKQ7q2enwGp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-P5imWOKQ7q2enwGp .icon-shape .label rect,#mermaid-svg-P5imWOKQ7q2enwGp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-P5imWOKQ7q2enwGp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-P5imWOKQ7q2enwGp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-P5imWOKQ7q2enwGp :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

strong的使用场景

重要提示

关键词

警告信息

核心结论

文章要点

重要提示 注意事项

关键词 核心概念

警告 危险 紧急

结论 重点内容

加粗显示要点

示例：

<!– 重要提示 –>
<p><strong>注意：</strong>本产品需要在成人监护下使用。</p>

<!– 关键词 –>
<p><strong>HTML</strong>是构建网页的基础语言。</p>

<!– 警告 –>
<p><strong>危险！</strong>高压区域，请勿靠近。</p>

<!– 文章中的重点 –>
<p>
总而言之，<strong>语义化是HTML的核心思想</strong>，
每个前端开发者都应该重视。
</p>

3.3 strong和b的区别

这是一个经典的问题：<strong> 和 <b> 都是加粗，有什么区别？

用一个简单的比喻：

• <strong> 就像说话时加重语气——“这件事非常重要！”（语气上强调）
• <b> 就像用笔把字画粗——只是形状变了，不代表语气有变化

推荐做法：绝大多数情况下，都应该用 <strong> 而不是 <b>。除非你只是想让文字加粗，但没有任何语义上的强调（这种场景其实很少）。

HTML5规范中说：<b> 只应该在没有其他更合适的标签时使用。能用 <strong> 的时候就用 <strong>。

四、em —— 重读的内容

4.1 什么是em标签

<em> 是 emphasis 的缩写，意思是"强调"。它的默认样式是斜体。

<p>学习HTML<em>确实</em>不难，但要学好也不容易。</p>

4.2 em的语义

看到这里你可能会问：<em> 也是强调，<strong> 也是强调，它们有什么区别？

这个问题问得好。两者都是强调，但侧重点不同：

#mermaid-svg-k9qw7wcZdKqkvAKO{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-k9qw7wcZdKqkvAKO .error-icon{fill:#552222;}#mermaid-svg-k9qw7wcZdKqkvAKO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-k9qw7wcZdKqkvAKO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-k9qw7wcZdKqkvAKO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-k9qw7wcZdKqkvAKO .marker.cross{stroke:#333333;}#mermaid-svg-k9qw7wcZdKqkvAKO svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-k9qw7wcZdKqkvAKO p{margin:0;}#mermaid-svg-k9qw7wcZdKqkvAKO .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster-label text{fill:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster-label span{color:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster-label span p{background-color:transparent;}#mermaid-svg-k9qw7wcZdKqkvAKO .label text,#mermaid-svg-k9qw7wcZdKqkvAKO span{fill:#333;color:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO .node rect,#mermaid-svg-k9qw7wcZdKqkvAKO .node circle,#mermaid-svg-k9qw7wcZdKqkvAKO .node ellipse,#mermaid-svg-k9qw7wcZdKqkvAKO .node polygon,#mermaid-svg-k9qw7wcZdKqkvAKO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-k9qw7wcZdKqkvAKO .rough-node .label text,#mermaid-svg-k9qw7wcZdKqkvAKO .node .label text,#mermaid-svg-k9qw7wcZdKqkvAKO .image-shape .label,#mermaid-svg-k9qw7wcZdKqkvAKO .icon-shape .label{text-anchor:middle;}#mermaid-svg-k9qw7wcZdKqkvAKO .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-k9qw7wcZdKqkvAKO .rough-node .label,#mermaid-svg-k9qw7wcZdKqkvAKO .node .label,#mermaid-svg-k9qw7wcZdKqkvAKO .image-shape .label,#mermaid-svg-k9qw7wcZdKqkvAKO .icon-shape .label{text-align:center;}#mermaid-svg-k9qw7wcZdKqkvAKO .node.clickable{cursor:pointer;}#mermaid-svg-k9qw7wcZdKqkvAKO .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-k9qw7wcZdKqkvAKO .arrowheadPath{fill:#333333;}#mermaid-svg-k9qw7wcZdKqkvAKO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-k9qw7wcZdKqkvAKO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-k9qw7wcZdKqkvAKO .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-k9qw7wcZdKqkvAKO .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-k9qw7wcZdKqkvAKO .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-k9qw7wcZdKqkvAKO .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster text{fill:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO .cluster span{color:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-k9qw7wcZdKqkvAKO .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-k9qw7wcZdKqkvAKO rect.text{fill:none;stroke-width:0;}#mermaid-svg-k9qw7wcZdKqkvAKO .icon-shape,#mermaid-svg-k9qw7wcZdKqkvAKO .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-k9qw7wcZdKqkvAKO .icon-shape p,#mermaid-svg-k9qw7wcZdKqkvAKO .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-k9qw7wcZdKqkvAKO .icon-shape .label rect,#mermaid-svg-k9qw7wcZdKqkvAKO .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-k9qw7wcZdKqkvAKO .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-k9qw7wcZdKqkvAKO .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-k9qw7wcZdKqkvAKO :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

强调的区别

strong

em

强调重要性

内容本身很重要

警告 注意 核心

强调语气和重读

改变语气和重音

对比 反讽 强调

• <strong>：强调的是内容的重要性——“这段内容很重要，你要注意”
• <em>：强调的是语气和重读——“这句话里，这个词是重音，读的时候要重读”

简单说：

• <strong> = 重要性上的强调
• <em> = 语气/重音上的强调

举个例子感受一下：

<p><strong>重要：</strong>明天上午10点开会。</p>
<!– strong强调"重要"，意思是这件事很重要，你要注意 –>

<p>明天<em>上午10点</em>开会，不是下午。</p>
<!– em强调"上午10点"，意思是时间重点在这里，不是别的时间 –>

再比如：

<p>这道题<em>不难</em>，但你要仔细做。</p>

这里的"不难"是语气上的强调（可能带有转折），不是说"不难"这两个字很重要。所以用 <em> 而不是 <strong>。

4.3 em和i的区别

和 strong vs b 一样，<em> 和 <i> 也经常被拿来比较。

<i> 标签的全称是 italic（斜体），它只是把文字变成斜体，没有任何语义。在HTML5中，<i> 也被重新定义了一下——可以用来表示"另类语气"的文字，比如专业术语、外来词、想法等。但实际开发中，能用 <em> 还是用 <em>。

五、其他常用的语义化文本标签

5.1 mark —— 高亮标记

<mark> 是HTML5新增的标签，用来表示被标记或高亮的文本，就像我们看书时用荧光笔标记的重点内容一样。

默认样式是黄底黑字。

<p>
HTML的全称是HyperText Markup Language，
其中<mark>Markup</mark>的意思是"标记"。
</p>

使用场景：

• 搜索结果中高亮显示关键词
• 文章中标注重点内容
• 引用时标记相关的部分

注意：<mark> 和 <strong> 不一样。<strong> 是内容本身就重要；<mark> 是为了某个特定目的标记出来（比如搜索匹配），内容本身不一定是最重要的。

5.2 small —— 次要内容

<small> 标签用来表示次要的、附属的内容，比如版权声明、法律条文、小字注释等。

默认样式是字号变小。

<p>这是主要内容。</p>
<p><small>© 2026 版权所有，保留一切权利。</small></p>
<p><small>本活动最终解释权归本公司所有。</small></p>

HTML5中 <small> 的语义是"附属细则、小号字体"，表示内容是次要的、辅助的、注释性的。

注意：不要仅仅为了让文字变小就用 <small>。如果只是想让字小一点，但语义上不是次要内容，那就用CSS调整字号。

5.3 del —— 已删除的内容

<del> 表示已经被删除或移除的内容。默认样式是文字中间有一条删除线。

<p>
原价：<del>599元</del><br>
现价：299元
</p>

使用场景：

• 电商网站的原价/现价
• 文档的修改记录（标记删除的内容）
• 内容修订的对比

5.4 ins —— 新插入的内容

<ins> 表示新插入或添加的内容。默认样式是文字下方有下划线。

<ins> 经常和 <del> 配合使用，用来展示内容的修改：

<p>
这款手机原价 <del>3999元</del>，
现在只要 <ins>2999元</ins>！
</p>

也可以用在文章修订、Wiki等需要显示修改历史的地方。

<del> 和 <s> 的区别：<s>（strikethrough）只是纯样式的删除线，没有语义；<del> 有"已删除"的语义。推荐用 <del> 而不是 <s>。

六、上下标标签

6.1 sub —— 下标

<sub> 是 subscript 的缩写，表示下标。文字会变小，位置靠下。

<p>水的化学式是 H₂O</p>
<p>二氧化碳的化学式是 CO₂</p>

使用场景：

• 化学式（H₂O、CO₂）
• 数学下标（a₁、a₂）
• 注释标记

6.2 sup —— 上标

<sup> 是 superscript 的缩写，表示上标。文字会变小，位置靠上。

<p>光速约为 3×10⁸ m/s</p>
<p>勾股定理：a² + b² = c²</p>

使用场景：

• 数学公式（平方、次方）
• 温度单位（℃、℉其实不用，但比如 º 这种）
• 脚注标记（注¹、注²）

脚注示例：

<p>
根据最新研究^[1]，每天运动30分钟有益健康。
</p>

<hr>

<p><small>^[1] 参考《运动与健康》2025年第3期</small></p>

上下标标签虽然简单，但在技术、科学、教育类网站中非常常用。

七、纯样式标签（不推荐使用）

HTML里还有几个纯粹是样式的文本格式化标签：<b>、<i>、<u>、<s>。这些标签只改变文字的外观，没有（或者几乎没有）语义。

HTML5的趋势是"语义优先"，所以这些纯样式的标签一般不推荐使用——如果你只是想改变样式，用CSS就好了。

7.1 b —— 粗体

<b>这段文字是粗体的</b>

仅仅是加粗，没有语义。能用 <strong> 的地方就用 <strong>，不要用 <b>。

7.2 i —— 斜体

<i>这段文字是斜体的</i>

仅仅是斜体，没有语义。能用 <em> 的地方就用 <em>。

补充：在图标字体流行的今天，<i> 标签被"赋予了新生"——很多图标字体（比如Font Awesome）用 <i> 标签来放图标。这是一种实用但非语义的用法，因为 <i> 是空标签，不会影响页面的内容语义。

7.3 u —— 下划线

<u>这段文字有下划线</u>

仅仅加下划线，没有语义。

注意：不要随便给文字加下划线，因为用户会以为这是链接（链接默认有下划线），点击了又没反应，会很困惑。

7.4 s —— 删除线

<s>这段文字有删除线</s>

仅仅加删除线，没有语义。要用的话推荐用 <del>（有删除的语义）。

7.5 总结

原则：尽量用语义化标签，少用纯样式标签。样式的事情交给CSS。

八、嵌套使用

文本格式化标签是可以嵌套使用的。

<p>
<strong><em>非常重要且需要强调的内容</em></strong>
</p>

这里同时用了 <strong> 和 <em>，表示既重要又需要重读。

嵌套顺序没有严格规定，<strong><em>…</em></strong> 和 <em><strong>…</strong></em> 都可以，效果差不多。

多层嵌套也是可以的（虽然不常见）：

<p>
公式：x₁² + y₁² = z²
</p>

下标里面还能再嵌套上标（虽然实际用得少）。

九、常见误区

9.1 误区一：用标签来做样式

这是最常见的误区——想让字加粗就用 <strong>，想让字斜就用 <em>。

不对。选择哪个标签，要看内容的语义，而不是看默认样式。

• 内容真的很重要 → 用 <strong>（哪怕你用CSS把它改成红色）
• 内容只是想加粗，但语义上不重要 → 用CSS的 font-weight: bold，不要用 <strong>

记住：HTML管语义，CSS管样式。 不要因为某个标签默认样式是你想要的，就用那个标签。

9.2 误区二：到处都加strong

有些同学觉得"加粗=重要=权重高"，为了SEO，在页面里到处加 <strong>，恨不得把半页内容都包上。

这完全是误解。

• <strong> 用太多了，反而没有重点了——到处都是重点，等于没有重点
• 滥用 <strong> 可能反而被搜索引擎判定为作弊
• 正确的做法是：一个页面里真正重要的关键词才用 <strong>，适可而止

9.3 误区三：混淆各个标签的语义

很多人分不清 <strong>、<em>、<b>、<i> 的区别，觉得都是加粗和斜体，随便用哪个都行。

其实它们的语义差别还是挺大的：

9.4 误区四：用得太频繁

"重要的内容"之所以重要，就是因为它少。如果一页有几十个 <strong>，那就没有"重要"的了。

一篇文章里，真正重要的关键词、核心结论适当地用 <strong> 标出来就好，不要每段都有好几个。

少而精，才是真正的强调。

十、实战：给一段文字加上格式化

我们来做个小练习，给下面这段文字加上合适的格式化标签。

10.1 原文

各位用户：

为了提升服务质量，我们将于本周六（8月15日）凌晨2点到4点进行系统维护。

维护期间，网站将暂停服务，给您带来的不便敬请谅解。

注意事项：

原价：99元/月
现价：49元/月（限时优惠）

——XX团队
2026年8月10日

10.2 加上标签之后

<p>各位用户：</p>

<p>
为了提升服务质量，我们将于本周六（<strong>8月15日</strong>）
凌晨2点到4点进行系统维护。
</p>

<p>
维护期间，网站将暂停服务，给您带来的不便敬请谅解。
</p>

<p><strong>注意事项：</strong></p>
<ol>
<li>维护期间所有功能不可用，请提前做好安排</li>
<li>维护时间约2小时，可能会根据进度提前或延后</li>
<li>如有紧急问题，请联系客服：<strong>400-888-8888</strong></li>
</ol>

<p>
原价：<del>99元/月</del><br>
现价：<strong>49元/月</strong>（限时优惠）
</p>

<p>
——<em>XX团队</em><br>
<small>2026年8月10日</small>
</p>

说明：

• “8月15日” 用 <strong>，因为日期是重要信息
• “注意事项” 和 “客服电话” 用 <strong>，重要内容
• 原价用 <del>，表示删除的价格
• 现价用 <strong>，突出优惠价格
• 落款 “XX团队” 用 <em>，语气上的强调
• 日期用 <small>，附属信息，次要内容

这样加完之后，重要信息一目了然，语义也清晰准确。

十一、结语

文本格式化标签虽然简单，但里面的学问不少。核心就是一句话：先想语义，再想样式。

看到一段文字想加粗，先别急着用 <strong> 或者 <b>，先问问自己：

• 这段文字重要吗？→ <strong>
• 是语气上的强调吗？→ <em>
• 只是想让它加粗而已？→ 用CSS

HTML标签不只是让文字"看起来怎么样"，更重要的是告诉浏览器和搜索引擎"这段内容是什么"。这就是语义化的核心思想。

下一篇文章，我们来看看另一组容易混淆的标签——<b>、<i>、<u>、<s> 这些字体样式标签，和我们今天学的语义化标签到底有什么区别，什么时候才用它们。

学习提示：找一篇你最近写的文章或者网页，看看里面有没有需要强调的内容。试着用合适的文本格式化标签标记出来。记住：先想语义，再想样式。

本文是《HTML从入门到精通》专栏的第29篇文章。如果你觉得这篇文章对你有帮助，欢迎继续阅读后续文章，和我一起系统地学习HTML，从入门走向精通。