The <mark> tag highlights text that's relevant to the reader's current context — like a matched search term — not just anything you want to visually draw attention to.
Syntax
<mark>highlighted text</mark>Basic Example
<p>Showing results for "<mark>python</mark>": Learn <mark>Python</mark> for Data Science.</p>Browser output: both instances of "python"/"Python" appear with a yellow highlight background by default — exactly the visual pattern you'd expect from a search results page.
How It Works
The browser applies a default yellow background-color. The context is what makes <mark> correct: it's meant for text that matters specifically because of something the user just did (searched, filtered, compared) — not general importance, which is <strong>'s job.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none — | Only universal global attributes apply |
Real-World Example
<p>What's new in this update: the dashboard now shows <mark>real-time enrollment counts</mark>.</p>Highlighting the specific part of a changelog entry that's new — relevant to a reader scanning "what changed," not just an important sentence in general.
Common Mistakes
- Using
<mark>as a generic "yellow highlighter" for anything you want to stand out, regardless of context — that's decoration, and belongs in CSS on a<span> - Confusing
<mark>with<strong>(importance) or<em>(emphasis) — all three look different by default but solve genuinely different problems
Best Practices
- Use
<mark>specifically when content is relevant to the user's current action — a search, a comparison, a "what changed" note - Don't rely on the highlight color alone to carry meaning — keep the surrounding text clear on its own
Accessibility Considerations
Screen reader support for announcing "highlighted start/end" varies by reader. Since the visual highlight alone isn't guaranteed to be announced, make sure the surrounding sentence still makes full sense without it.
SEO Considerations
No direct ranking effect, but using <mark> to highlight matched search terms genuinely improves on-page usability — an indirect, real benefit for a site's user experience signals.
Browser & Modern HTML Notes
<mark> is an HTML5 addition with no direct older-HTML equivalent — it was introduced specifically for this "contextually relevant highlight" use case.
Mini Practice
- Build a mini "search results" snippet that highlights a matched keyword using
<mark>. - Write a changelog entry that uses
<mark>to flag exactly what changed.
