HTML <mark> element

The <mark> element represents text that has been marked or highlighted because it is relevant in the current context. It is not merely a way to paint text yellow. It says, "look here; this part matters for the reason we are discussing now."

A common example is search highlighting. If a reader searches a page for the word grid, the matching words may be wrapped in <mark> because those words are relevant to the search that just happened. The element does not perform the search itself; the application finds the matches and adds the markup.

Another use is drawing attention to a part of quoted text. The original writer may not have emphasized that part, but the current page may need to point it out because it has become important to the present explanation.

This makes <mark> different from <strong> and <em>. Strong importance and stress emphasis belong to the meaning of the sentence itself. Marking is more like a teacher circling something on the page because it matters to the current discussion.

The element is inline and usually appears inside a paragraph, list item, quotation, table cell, or other text. Browsers often show it with a yellow background by default, although CSS can change the appearance.

In a coding lesson, <mark> can pick out the part of an example being discussed. Below, the value grid is highlighted because it is the focus of the explanation. This is different from general syntax colouring, where every property or value gets a colour according to its role. Use <span> with CSS for that.

Attributes: GLOBALS.

Typical layout:
<p>
  The highlighted value sets the layout mode:
  <code>display: <mark>grid</mark>;</code>
</p>

Visual representation: