HTML5 mark标签高亮文本用法指南

HTML5 的 `` 标签并非仅为视觉“涂黄”而生，其核心语义在于精准标出与当前上下文强相关的文本内容——如搜索关键词、法律条文引用、代码错误行等真实场景，强调的是意义而非装饰；正确使用必须嵌套于有逻辑的上下文中，配合可访问的CSS样式（兼顾对比度与色觉友好），避免语义丢失或滥用为纯样式工具，否则将损害SEO、屏幕阅读器体验及代码规范性。

mark 标签不是“加亮色”而是“标出相关文本”

的语义是「突出显示文档中与当前上下文相关的部分」，不是视觉上的“高亮笔效果”。浏览器默认用黄色背景只是示意，实际样式应由 CSS 控制，且必须确保可访问性（比如色觉障碍用户依赖对比度，不能只靠颜色区分）。

• 别用 替代 —— 语义丢失，SEO 和屏幕阅读器无法识别意图
• 搜索结果页中匹配关键词、文章中引用他人原话时的强调、代码示例里被指出的错误行，才是典型使用场景
• 若只是想加背景色而无语义需求，用 更合适

怎么写才符合 HTML5 语义规范

语义正确的 必须嵌套在有意义的上下文中，不能孤立存在。它不改变文本层级，也不影响段落结构，但需明确「为什么这段值得标出」。

• ✅ 正确：

  <p>根据《网络安全法》第<mark>21</mark&gt条，网络运营者应当……</p>

• ✅ 正确：

  <blockquote><p>我们坚持<mark>以人民为中心</mark>的发展思想。</p></blockquote>

• ❌ 错误：

  <mark>重要通知：系统将于今晚升级</mark>

  （没上下文，纯装饰）
• ❌ 错误：

  <h2><mark>产品优势</mark></h2>

  （标题本身已是强调， 叠加冗余）

CSS 自定义 mark 样式要注意什么

浏览器默认 是黄色背景 + 黑色文字，但很多项目会重置。关键点不在“怎么改颜色”，而在“改完是否仍可读、是否破坏语义传达”。

• 必须保证文字与背景的对比度 ≥ 4.5:1（WCAG AA 标准），例如 background-color: #ffeb3b 配深灰文字可以，但配浅黄文字不行
• 避免用 opacity 或半透明背景，会导致文字发虚、屏幕阅读器可能跳过
• 不要给 加 border-radius 或阴影——这些纯视觉修饰会干扰语义聚焦
• 推荐最小化定制：

  mark { background-color: #ffdd40; color: #212121; }

和 span / strong / em 混用时的边界在哪

和其它内联元素可以共存，但必须逻辑自洽。它的优先级低于语义结构（如 表达重要性），高于纯样式容器（如 ）。