The mark Tag

The mark tag paints a yellow highlight over a word or phrase, exactly like a marker pen on paper. The browser supplies the highlight color, so the markup stays clean. Search result pages are the classic sight: the words you searched for are wrapped in mark.

The tag is about meaning, not decoration. A span with a background color looks identical, but nothing tells a screen reader or a search engine what the highlight means. Mark declares: this text is relevant right now, to a search, a quiz, or the point of the paragraph.

Why it exists: every search box needs to show its matches, and marking them with spans was guesswork. Mark gives the browser, assistive technology, and future scripts a standard signal. It works in every browser with zero setup, and you can restyle it with a single CSS rule.

When to reach for it

Use mark for search term matches, for words you want the reader to notice in a long article, and for the correct answer inside a quiz. Do not use it just to make a word colored; that is a styling job for span or strong. A page full of yellow highlights loses its meaning fast.

<p>You searched for <mark>details</mark> and found the answer.</p>

Restyling the highlight

You can change the highlight color with CSS. Dark text on a light yellow is the safest combination for readability. Some sites use a soft pink or green to match their brand. The background and color properties work exactly as you expect.

mark {
  background: #fde68a;
  color: #111827;
  padding: 0 2px;
}

Syntax

<p>This is <mark>important</mark> text.</p>

Search found <mark>HTML</mark> in 3 places. // semantic, not <span style="background:yellow">