Highlighting Relevant Text With HTML mark

The HTML <mark> element highlights text because it is relevant to the current context. A search-results page is a good example: the matching words matter because of what the person searched for.

<p>
  Results for <mark>semantic HTML</mark>
</p>

Browsers normally give marked text a yellow background. That default is useful, but you can change it with ordinary CSS:

mark {
  background: navy;
  color: white;
}

Use <mark> for contextual relevance, not just because you want yellow text. If the text is important regardless of context, <strong> may be the better element. The visual result can look similar; the meaning is not the same.

← Back to all articles