使用 HTML 标签高亮文本
如果你需要在段落中标记文本，最好使用 ` <mark><div>` 标签。它就像 HTML 版的黄色荧光笔。我以前总是用 ` <span><div>` 标签，再加一些 CSS 样式，却没意识到还有这种语义化更强的选择。HTML5 真是充满了各种各样的好东西，对吧😆
<p>
<mark>Highlight</mark>
text with HTML <mark> tag
</p>
默认<mark>样式
默认背景颜色为<mark>黄色。
<p>
<mark>Default Yellow Highlight</mark>
</p>
输出
<mark>使用 CSS自定义样式
当然，就像任何文本 HTML 标签一样，您可以使用 CSS 应用自定义样式。您可以将其理解为类似于设置<p>标签样式的方式。
mark {
background: red;
color: white;
}
输出
<mark>与其他文本 HTML 标签
强的
<strong>用于指示比周围文本更重要的文本，例如警告或错误信息。从语义上讲，它强调其重要性。它以粗体显示。
b
<b>它与“粗体”非常相似，<strong>因为两者都显示为粗体。然而，与“粗体”不同的是，它实际上并不传达任何重要信息，更多的是一种风格上的差异，而非语义上的差异。
呃
<em>用于强调某个特定词语。它以斜体显示。
标记
<mark>它只是用来突出显示某段文本的相关性。在此标签出现之前，许多人使用 `<a>`em或 `<b> strong` 来赋予突出显示的内容一些语义含义。现在不用了！如果您需要突出显示，请使用此标签🌟
为什么语义化 HTML 标签很重要
之所以不能到处使用<div>标签，是因为它们不具备语义性。你可能和我刚开始学编程时一样——谁会在意语义正确呢🙄。大错特错❌。事实上，像谷歌这样的搜索引擎非常重视语义！因为语义能够传达关于你网站的信息。当搜索引擎机器人抓取你的网站时，它们就能明白其中的含义。换句话说，它们会为你的搜索引擎优化（SEO）打下良好的基础🏆
语义正确性的另一个重要原因是提升可访问性。许多辅助工具都依赖标签的语义，将网站内容转化为用户（例如屏幕阅读器）能够理解的含义。举个例子，想想以前电脑朗读网站文本的时候，听起来是不是非常机械、怪异？🤖 如果没有正确的语义，效果就跟那样。它当然能朗读，但听起来体验糟糕透了。😱 然而，如果使用正确的语义，就像在听 Siri 说话一样。它听起来更像真人，因为它能捕捉到各种不同的语调、音高变化，甚至知道何时停顿。使用语义正确的 HTML 标签也能带来类似的更佳体验 👍
HTML5标签和SEO
不过，我确实想指出一点。
谷歌的约翰·穆勒在推特回复中提到了这一点：
如果条件允许，正确使用 HTML5 当然是明智之举，这样做对 SEO 没有任何不利影响 :)。
我从中总结出以下几点：无论你是否使用 HTML5 标签，都不会影响你的 Google 搜索排名。但是，这是否意味着你应该使用 HTML5 标签呢？当然不是！HTML5 标签的无障碍功能依然存在。而且，一些 HTML5 标签还会带来非常有趣的浏览器行为，让用户能够体验到以前无法使用的更高级功能🤩
无障碍问题
好了，希望我已经成功地向你解释了语义化HTML标签的重要性。现在你应该明白，它<mark>不仅仅是用来设置文本样式，更重要的是它在语义上的作用。
但是！它的可访问性存在一些问题。遗憾的是，<mark>大多数屏幕阅读器在默认设置下不会朗读该标签的使用情况。不过好消息是，有办法解决这个问题。您可以使用 CSS 的 content 属性和伪元素来添加朗读功能。
mark::before {
content: " [highlight start] ";
}
mark::after {
content: " [highlight end] ";
}
/* Hide the text created in the CSS content property */
mark::before,
mark::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
所以屏幕阅读器在这里会这样做。当它遇到被 `<mark>` 标签包裹的文本时<mark>，它会朗读“高亮开始”，然后朗读标签内的文本；当 `<mark>` 标签结束时，它会朗读“高亮结束”。
但...
请注意：如果这类“公告”过多，可能会显得冗长，甚至包含一些令人厌烦的不必要信息。这会导致部分屏幕阅读器用户关闭此功能。因此，切记“能力越大，责任越大”。请勿滥用此技巧，仅在用户不了解高亮内容会严重影响其理解的情况下才使用。
用例<mark>
现在到了有趣的部分！让我们来看一些应用案例<mark>：
使用场景：搜索结果
这是一个很常用的功能。你可以用它来高亮显示用户搜索过的关键词。
<p>Search Result for "Vue"</p>
<hr>
<p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>
输出
使用案例：报价
<q>为引用 ( ) 和块引用 ( )提供高亮显示真是太好了<blockquote>。
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>
输出
资源
- MDN Web 文档：HTML 标记
- w3schools：HTML标记
- TutorialsPoint：HTML 标记标签
- 20 个用于改善文本语义的 HTML 元素
- HTML5 中的标记标签
- TechOnTheNet：HTML 标记标签
- HTML5Doctor：用标记吸引注意力
- TutorialRepublic：HTML5 标记标签
- 正确使用 HTML5 对 SEO 没有负面影响
感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook | Medium |博客