优先选用、、、四类语义化标签，因其在可访问性、SEO和长期维护上优于、、、；表强重要性并被屏幕阅读器加重朗读，仅视觉加粗；用于语气强调，适用于外文术语等非强调斜体；/成对表示修订，仅示过期内容，已无语义；嵌套需语义一致，避免冲突或冗余。
直接说结论：用 <strong></strong>、<em></em>、<del></del>、<ins></ins> 这四类语义化标签，比用 <b></b>、<i></i>、<s></s>、<u></u> 更稳妥，尤其在可访问性、SEO 和未来维护上。
为什么优先选 <strong></strong> 而不是 <b></b>
两者都让文字加粗，但浏览器渲染效果一致不代表语义等价。<strong></strong> 表示内容有强重要性，屏幕阅读器会加重语气读出；<b></b> 仅表示“要加粗显示”，无强调含义。比如价格标签写成 <strong>$299</strong>，比 <b>$299</b> 更利于无障碍浏览。
- 实际场景：促销文案中“限时5折”适合用
<strong></strong>；图标旁的纯装饰性加粗（如按钮内文字仅为视觉统一）才考虑<b></b> - 兼容性无差别，所有现代浏览器都支持
- CSS 可以覆盖默认样式，但语义一旦写错，后期无法靠样式补救
<em></em> 和 <i></i> 的使用边界在哪
<em></em> 表示强调语气，是内容逻辑的一部分；<i></i> 仅用于非强调的斜体场景，比如外文术语、船名、生物学种名、技术术语缩写等。
- 正确：
<p>你<strong>必须</strong>在截止前提交，<em>否则</em>将失去资格</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（“必须”是强约束，“否则”是语气转折） - 正确：
<p>《<em>The Great Gatsby</em>》由 F. Scott Fitzgerald 创作</p>→ 这里用<em></em>是惯例，但更严谨应配合lang属性：<em lang="en">The Great Gatsby</em> - 错误：
<i>立即抢购</i>—— 这属于营销强调，该用<em></em>或<strong></strong>
删除线与下划线：别乱用 <s></s> 和 <u></u>
<del></del> 和 <ins></ins> 是配套的语义对：前者表示内容被删除但保留在文档中（如修订痕迹），后者表示新增内容；而 <s></s> 仅表示内容不再准确或不适用（如过期价格），<u></u> 在 HTML5 中已失去语义**，仅保留纯样式用途（且默认带下划线样式易与链接混淆）。
- 推荐写法：
<del datetime="2026-09-20">$199</del> <ins>$149</ins>—— 含时间戳，便于程序解析变更 - 避免：
<s>$199</s> $149（无上下文时看不出是否已生效） - 绝对不要用
<u></u>做链接提示：它没有href，用户无法点击；真正需要可点击文本，就用<a href="#"></a>并配 CSS 去掉默认蓝色和下划线
格式化标签嵌套时的常见坑
格式化标签可以嵌套，但顺序和层级容易出错。核心原则：语义不能冲突，且避免过度嵌套影响可读性。
- 允许：
<strong>原价<del>$99</del></strong>（整体强调 + 内部删除） - 危险：
<em>仅<strong>今天</strong>有效</em>——<strong></strong>已含更强语气，再包一层<em></em>无额外价值，反而让屏幕阅读器重复加重 - 禁止：
<del><ins>混搭内容</ins></del>—— 逻辑矛盾：既删除又新增，应只用其中一种，或改用其他表达方式（如分句说明） - 性能无关，但可维护性差：嵌套超过两层（如
<strong><em><del>...</del></em></strong>）会让后续修改成本陡增
真正影响页面质量的，从来不是能不能加粗或划掉，而是加粗/划掉的理由是否经得起推敲。写完每一对标签，不妨自问一句：“如果去掉这个标签，用户或机器会误解原意吗？”——答案为“会”，才是合理使用。
