HTML 的 ＜mark＞ 元素

1. 引言

在浏览网页时，你是否注意过搜索结果中那些被黄色背景高亮的关键词？或者阅读文档时被特意标注出来的重点句子？这些视觉上的高亮效果，背后往往就是 HTML 中的 <mark> 元素在起作用。

<mark> 是 HTML5 引入的一个语义化标签，用于表示因与当前上下文相关而被标记或高亮的文本。它看似简单，却在可访问性、SEO 和语义化方面有着独特的价值。本文将带你全面认识 <mark> 元素，从基础用法到高级实践，一网打尽。

2. 什么是 <mark> 元素

<mark> 是一个行内元素（inline element），用于标记文档中与用户当前活动或上下文高度相关的文本片段。它最常见的视觉表现是带有黄色背景的文本高亮，类似于我们用荧光笔在纸上划重点。

需要特别注意的是，<mark> 的语义是「相关性标记」，而非「强调」。这与 <strong> 和 <em> 有本质区别：

• <strong>：表示内容非常重要、严肃或紧急；
• <em>：表示内容在语气上需要强调；
• <mark>：表示内容与当前情境相关，比如搜索结果中的关键词、引文中被引用的部分等。

3. 基础用法

3.1 最简单的示例

<p>请阅读以下说明，<mark>请勿在通电状态下打开机箱</mark>，以免发生危险。</p>

浏览器默认会给 <mark> 内的文本加上黄色背景（background-color: yellow）和黑色文字。

3.2 标记搜索结果关键词

<mark> 最常见的应用场景之一就是搜索结果页。当用户搜索某个关键词时，页面会在结果中高亮显示该关键词：

<p>
在 CSDN 上搜索 <mark>HTML</mark>，你可以找到大量关于
<mark>HTML</mark> 标签、<mark>HTML</mark> 属性的教程文章。
</p>

3.3 引用他人文字时标注重点

当你在文章中引用一段文字，并希望读者特别关注其中某部分时，可以用 <mark> 来标注：

<blockquote>
他说：「编程的本质是<mark>解决问题</mark>，而不是写代码本身。」
</blockquote>

4. 与 <strong> 和 <em> 的区别

这是初学者最容易混淆的地方。我们用一个对比表格来理清三者的关系：

<p>
<mark>注意</mark>：这是<strong>非常重要</strong>的安全警告，
请<em>务必</em>在操作前阅读。
</p>

在这个例子中：

• <mark> 标记「注意」是因为它与当前阅读情境相关；
• <strong> 强调「非常重要」是因为它在整篇文档中具有高优先级；
• <em> 让「务必」产生语气上的重音效果。

5. 自定义 <mark> 样式

虽然浏览器提供了默认样式，但在实际项目中我们通常需要自定义 <mark> 的外观，以匹配网站的整体设计风格。

5.1 修改背景色和文字颜色

mark {
background-color: #ffeb3b; /* 自定义黄色 */
color: #333; /* 深色文字 */
padding: 0 2px; /* 增加一点内边距 */
border-radius: 2px; /* 圆角效果 */
}

5.2 不同场景使用不同高亮色

有时我们需要在同一页面中区分不同类型的标记，可以通过 class 来实现：

mark.search {
background-color: #fff176; /* 搜索关键词：浅黄 */
}

mark.tip {
background-color: #a5d6a7; /* 提示：浅绿 */
}

mark.warning {
background-color: #ef9a9a; /* 警告：浅红 */
}

<p>
在<mark class="search">HTML</mark>中，<mark class="tip">建议使用语义化标签</mark>，
<mark class="warning">不要滥用 div 包裹一切</mark>。
</p>

5.3 使用 CSS 变量实现主题化

对于需要支持多主题的网站，可以使用 CSS 变量：

:root {
–mark-bg: #fff176;
–mark-color: #333;
}

mark {
background-color: var(–mark-bg);
color: var(–mark-color);
}

/* 暗色主题下覆盖 */
[data-theme="dark"] {
–mark-bg: #5d4037;
–mark-color: #ffeb3b;
}

6. 可访问性与 SEO 考量

6.1 屏幕阅读器支持

<mark> 元素在主流屏幕阅读器中具有良好的支持。大多数屏幕阅读器会通过语音提示「标记」来告知用户此处有高亮内容，帮助视障用户理解文本的上下文相关性。

6.2 不要仅依赖颜色传达信息

根据 WCAG（Web 内容可访问性指南），不应仅使用颜色来传达重要信息。如果高亮是唯一的视觉区分手段，色盲用户可能无法识别。建议配合其他方式：

<p>
<mark>重要：</mark>系统将在今晚 23:00 进行维护。
</p>

mark {
background-color: #fff176;
border-left: 4px solid #f9a825; /* 增加非颜色线索 */
padding: 2px 6px;
}

6.3 对 SEO 的影响

<mark> 本身对 SEO 没有直接的负面影响，但合理使用语义化标签有助于搜索引擎更好地理解页面结构。搜索结果页中高亮用户搜索词，也能提升用户体验，间接提高点击率。

7. 实际应用场景

7.1 搜索结果高亮

这是 <mark> 最经典的应用。前端拿到后端返回的搜索结果后，将匹配到的关键词用 <mark> 包裹：

function highlightKeyword(text, keyword) {
const escaped = keyword.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}

// 使用示例
const result = highlightKeyword('学习 HTML 和 CSS 是前端开发的基础', 'HTML');
console.log(result);
// 输出：学习 <mark>HTML</mark> 和 CSS 是前端开发的基础

7.2 文档阅读进度标记

在长文档或电子书中，可以用 <mark> 标记用户上次阅读到的位置：

<p>
上一章我们学习了盒模型，<mark>本章我们将深入探讨 Flexbox 布局</mark>，
这是现代 CSS 布局中最重要的工具之一。
</p>

7.3 代码审查中的重点标注

在技术文档或代码评审中，可以用 <mark> 标出需要特别关注的代码片段：

<pre><code>
function validateEmail(email) {
// <mark>注意：这里使用了正则表达式进行邮箱格式校验</mark>
const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return regex.test(email);
}
</code></pre>

8. 浏览器兼容性

<mark> 元素自 HTML5 起被所有现代浏览器广泛支持，包括：

• Chrome 4.0+
• Firefox 3.5+
• Safari 3.1+
• Edge 12+
• IE 9+（部分支持）

对于极老旧的浏览器（如 IE 8 及以下），可以通过简单的 CSS 降级处理：

mark {
background-color: yellow;
color: black;
}

由于 <mark> 默认就是黄色背景黑色文字，即使浏览器不认识这个标签，内容依然可读。

9. 常见误区与注意事项

9.1 不要用 <mark> 代替 <strong>

很多人看到 <mark> 有高亮效果，就习惯性地用它来强调重要内容。但如前所述，<mark> 的语义是「相关性」而非「重要性」。如果一段文字在整篇文档中都很重要，应该用 <strong>。

9.2 不要嵌套使用

<mark> 不应该嵌套 <mark>，这在语义上没有意义，也会造成视觉混乱：

<!– 错误示例 –>
<p><mark>外层标记<mark>内层标记</mark></mark></p>

<!– 正确做法：平级使用 –>
<p><mark>第一个标记</mark>和<mark>第二个标记</mark></p>

9.3 注意与 <span> 的选择

如果只是想要视觉上的高亮效果，而不需要语义含义，可以使用 <span> 配合 class：

<!– 纯视觉高亮 –>
<p><span class="highlight">这段文字只是视觉上高亮</span></p>

<!– 语义化高亮 –>
<p><mark>这段文字表示与当前上下文相关</mark></p>

10. 总结

<mark> 元素是 HTML5 中一个看似简单却非常实用的语义化标签。它的核心价值在于表达「与当前上下文的相关性」，而非单纯的视觉高亮或重要性强调。

回顾本文要点：

• <mark> 用于标记与当前情境相关的文本，默认显示为黄色背景高亮；
• 它与 <strong>（重要性）和 <em>（语气强调）有明确的语义区别；
• 可以通过 CSS 灵活自定义样式，支持多场景、多主题；
• 在搜索结果高亮、文档阅读标记、引文标注等场景中有广泛应用；
• 使用时注意可访问性，不要仅依赖颜色传达信息；
• 浏览器兼容性良好，可放心在生产环境中使用。

掌握 <mark> 的正确用法，能让你的 HTML 代码更加语义化、更具可访问性，也让用户在浏览你的页面时获得更好的体验。下次当你需要高亮一段文字时，不妨想想：它是否真的与当前上下文相关？如果是，就用 <mark> 吧。