mark

The HTML <mark> element highlights text that is relevant in the current context, such as a search match or an important passage in a quotation.

What you will learn

What context-dependent attention mark represents
How to use it for search results and quoted text
How it differs from b, strong, and decorative CSS

Basic example

<p>Search results for: accessibility</p>
<p>Learn about <mark>accessibility</mark> in HTML.</p>

The highlighted text is relevant to the user’s current task or context. The element does not mean that the text is universally more important than the surrounding content.

mark in a quotation

<blockquote>
  A keyboard-friendly interface helps more people.
  <mark>Keyboard access benefits everyone.</mark>
</blockquote>

When highlighting a passage in a quote, make clear why that part is highlighted. The source content itself has not necessarily changed; the emphasis comes from the current reading context.

mark is not the same as bold

mark: Highlights text because it is relevant to the current activity or context.
b: Draws attention without adding importance or relevance semantics.
strong: Marks strong importance, seriousness, or urgency.

Use CSS to choose colors or other presentation, but choose the HTML element according to meaning. Do not use mark solely because its default background looks like a highlighter.

Accessibility notes

Make sure the contrast between marked text and its background is sufficient. Do not communicate the only difference through color, and avoid marking so much text that the highlight loses its purpose.

Common mistakes

Wrapping every important word in mark even when no current context exists.
Using it as a replacement for strong or a heading.
Relying on the yellow default style without checking contrast or dark mode.
Highlighting text with CSS only when the highlight has real contextual meaning.