A search results page shows excerpts from articles, and the term the user typed stands out in yellow highlight in the middle of the text, so the eye finds it instantly without rereading the whole sentence.
<mark> exists for exactly that: flagging a passage as relevant in the precise context where it appears, not decorating a random word because a background color would look nice on the page.
Definition
<mark> wraps a piece of text flagged as relevant or of interest in its current context, without stating the exact reason. Browsers render it by default with a yellow background and black text, but that style is only a visual convention, not the definition of the tag: the real meaning is that this passage matters here, now, not that it would matter under any circumstance.
That nuance sets <mark> apart from a tag like <strong>, which carries importance intrinsic to the content, valid wherever the text is read. <mark> carries a relevance tied to a situation: a search, a quotation reused elsewhere, an exact passage targeted by a review comment.
Concrete example: highlighting a search term
On a results page, each displayed excerpt reuses the original text as is, except for the word or words matching the search, wrapped in <mark>.
<p>Your dashboard shows your daily and weekly <mark>progress</mark>.</p>If the user searches a different term the next day, the wrapped passage changes: the mark follows the relevance of the moment, it is not fixed once and for all in the original content.
Difference with ins and del
<ins> and <del> serve an edit-tracking purpose: a passage added to or removed from a document, usually shown underlined and struck through respectively. They tell the story of an edit. <mark> tells no story of an edit: the wrapped text was neither added nor removed, it is simply put forward in its current version.
| Tag | What it signals |
|---|---|
| <mark> | A passage relevant in the current context |
| <ins> | Text added since a previous version |
| <del> | Text removed since a previous version |
Semantics and accessibility
Most screen readers ignore <mark> by default, but some, when correctly configured, announce the start and the end of a highlighted passage. That announcement stays useless if the surrounding text says nothing about the context: understanding should never rest on color alone, invisible to anyone not displaying the styling.
A common trap is using <mark> only to apply a decorative background color, with no link to a search, a quotation or a precise context. That misuse breaks the semantic contract of the tag and gives assistive technology nothing useful, since it ignores color anyway. For plain visual emphasis unrelated to contextual relevance, a CSS class is entirely enough.
Use cases and best practices
Beyond search, <mark> fits for flagging the key sentence of a long quotation reused elsewhere, or the exact passage targeted by a review comment. It keeps its meaning as long as the wrapped passage stays tied to a specific situation rather than a permanent judgement about its importance.
Believemy uses it, for instance, in its glossary, to make the searched word stand out in the middle of a definition excerpt shown in the results.
Frequently asked questions
Do <mark> and strong serve the same purpose?
No, they answer two different questions. strong states that a passage carries strong importance, valid wherever it is read. <mark> flags a relevance tied to a precise context, like a search, which changes with the situation. The two can even coexist on the same passage without contradicting each other.
Is the default yellow background mandatory?
No, that style comes from the browser's default stylesheet and is fully customisable in CSS, for both the background color and the text color. What stays non-negotiable is the meaning of the tag: a passage relevant in its context, not whichever color was picked for looks.
Can several <mark> tags be used in the same paragraph?
Yes, nothing forbids it, and it is even common practice on a search results page where several occurrences of the same term appear in one excerpt. Each occurrence gets its own tag, independently of the others, with no limit on the number set by the specification.