html5 推荐用 替代 或 标重点，因其语义明确、利于可访问性和 seo； 表示强重要性， 表示重音强调，均不可仅作视觉标签使用；ie8 及以下需 html5shiv.js 支持 。
用 <mark></mark> 替代 <b></b> 或 <font color="red"></font> 标重点
老网站常用 <b></b>、<u></u>、<font></font> 甚至内联样式强行标红加粗来强调内容，这既语义不清，又不利于可访问性和 SEO。HTML5 推荐用 <mark></mark> 表示“文档中需要引起注意的高亮文本”，比如搜索关键词、纠错提示、上下文重点等。
实操建议：
- 把
<b>重要更新</b>改成<mark>重要更新</mark> - 避免用
<mark></mark>做纯装饰（如整段侧边栏高亮），它不是视觉标签，而是语义标签 - 默认样式是黄色背景+黑色文字，可通过 CSS 覆盖：
mark { background: #ffeb3b; color: #212121; }，但别删掉background-color—— 屏幕阅读器依赖该语义触发“高亮”提示
检查 <strong></strong> 和 <em></em> 是否被误当视觉标签用
很多老站把 <strong></strong> 当“加粗”，<em></em> 当“斜体”，结果在纯文本环境（如 RSS、语音朗读）里完全丢失原意。HTML5 中它们有明确语义：<strong></strong> 表示强重要性（如警告、必填项），<em></em> 表示重音强调（语气转折、反语等）。
迁移时重点查：
立即学习“前端免费学习笔记（深入）”；
- 所有
<strong></strong>是否真表达“不可忽略的严重性”？否则换成<mark></mark>或普通<span></span>+ class -
<em></em>出现在对话、标题或说明句中是否合理？比如<p>请<em>务必</em>备份数据</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/995" title="易企秀"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680113987553.png" alt="易企秀" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/995" title="易企秀">易企秀</a> <p>易企秀，一体化创意设计营销平台。超100万模板1键套用3分钟制作，随时随地完成创意设计营销。</p> </div> <a href="/ai/995" title="易企秀" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>是对的；但<h2><em>产品介绍</em></h2>就错——标题本身已是强调，无需再语义嵌套 - 老代码里用
style="font-weight:bold"的地方，先判断意图：是强调内容，还是仅为了视觉统一？后者应抽离到 CSS 类，而非硬编码
旧版 IE 兼容问题：<mark></mark> 在 IE9 以下不识别
IE8 及更早版本会把 <mark></mark> 当作未知元素，既不渲染样式，也不加入 DOM 树（除非用 HTML5 shiv）。如果你的升级目标仍需支持 IE8，不能只靠 CSS 修复。
稳妥做法：
- 引入
html5shiv.js（仅 IE - 为
<mark></mark>添加基础样式兼容：mark, .mark { background: #ffeb3b; padding: 0 2px; }，并确保老浏览器能解析 class 写法 - 不推荐用
document.createElement('mark')手动修复 —— 修复范围有限，且易漏掉动态插入的内容
批量替换要注意上下文嵌套和 CSS 冲突
直接全局搜索替换 <b></b> → <mark></mark> 很危险。比如 <b><i>API</i></b> 原本是“技术术语加粗斜体”，改成 <mark><i>API</i></mark> 后，<i></i> 在 <mark></mark> 内可能被某些 CSS 重置规则影响（如 mark i { font-style: normal; }）。
建议分步处理：
- 先用浏览器 DevTools 的
Elements面板人工抽检高频位置：导航栏、弹窗提示、表单错误信息、搜索结果页 - 检查现有 CSS 是否有类似
b { font-weight: 700; }或font[size="4"]这类强绑定规则，它们不会自动作用于<mark></mark> - 对含内联样式的旧标签（如
<b style="color:red"></b>），优先提取语义意图：是警告？是关键词？还是单纯配色？再决定用<mark></mark>、<strong></strong>还是自定义 class
语义升级不是字符串替换，最常被忽略的是：同一段 HTML 在不同页面中承担的角色可能完全不同——首页的“限时优惠”是营销强调，后台日志里的“限时优惠”可能是异常标记，得按上下文分别处理。
