<mark>

<mark> identifies text relevant to the current context, such as a search match or a passage called out in a quotation. It has semantic relevance meaning; it is not a generic substitute for importance or emphasis.

Show a search match

The visible search term explains why the matching word is highlighted. The surrounding sentence remains readable without the color.

<p>Result for “grid”:</p>
<p>A <mark>grid</mark> aligns items across rows and columns.</p>

mark {
  background: #fef08a;
  color: #172554;
}

Content and accessibility

Mark accepts phrasing content and global attributes. Browsers typically draw a colored background. Most screen-reader configurations do not automatically announce highlight boundaries, so explain the context when that distinction matters.

Keep text/background contrast readable. Do not use highlight color alone to communicate an error, a required action, or an important warning.

Alternatives

Use strong for importance, em for stress, and span with CSS for syntax coloring. When highlighting a quotation, make clear that the emphasis was added by you.

Change the highlight color in the editor, then remove the style rule. The explanation “Result for grid” still tells readers what they are looking for.

Sources and browser support

MDN: mark describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.