The <mark> element is used for semantic highlighting of text, indicating that the text is relevant or important, such as search term matches. It provides meaning to assistive technologies, unlike a plain <span>.
Use the <mark> element to highlight search terms or important text in documentation, search results, or knowledge bases.
It is especially useful for accessibility, as screen readers can announce that text is highlighted.
Customize its appearance with CSS or Tailwind classes for a better user experience.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<h2 class="font-bold mb-2">Default Highlight</h2>
<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>
<h2 class="font-bold mb-2">Custom Highlight</h2>
<p>
The <mark class="bg-yellow-100 px-1.5 py-0.5 rounded">quick brown fox</mark> jumps over the lazy dog.
</p>