Français

<mark>

Highlight a word: search result, key passage

— 1 min read

  • HTML
  • accessibility
  • semantics

<mark> — The highlight

The <mark> element highlights a text passage that is relevant in the current context. It represents a semantic highlight, not just a visual style.

When to use it

You want to highlight a search result on a page, draw attention to a key passage in a quotation, or flag an important term in a specific context.

What you gain

Accessibility: NVDA can announce "highlighted" for <mark> (verbosity setting), but JAWS, VoiceOver, and TalkBack do not do so by default. The visual highlight remains the primary signal. Make sure the background color has sufficient contrast.

Code example

<p>Your search for "accessibility" returned 3 results:</p>
<p>Semantic HTML improves <mark>accessibility</mark> by providing
   meaningful structure to assistive technologies.</p>

Further reading