Highlight HTML text by using the mark tag

The HTML <mark> tag is used to create a text highlight so that you can distinguish important text in your document.

The default highlight color is yellow with black text.

For example, suppose you have the following HTML page:

<p>
  HTML5 is the <mark>best version</mark> of HTML so far
</p>

The output will be as follows:

When you want to change the default style of the highlight, you can add a CSS rule that changes the background-color property.

The following CSS will turn the highlight to pink:

mark {
  background-color: pink;
}

When you use dark color for the highlight, don’t forget to change the text color to light by adding the color property.

For example, the following CSS will use black as the color for highlight and white for the color of the text:

mark {
  background-color: black;
  color: white;
}

Finally, when you have multiple different styles for the highlight, you can wrap the CSS rules inside classes as follows:

mark.black {
  background-color: black;
  color: white;
}

mark.pink {
  background-color: pink;
}

mark.lime {
  background-color: lime;
}

With the CSS wrapped inside classes, you only need to add the right class to the <mark> tag as you see fit.

The following example:

<p>
  HTML5 is the <mark class="black">best version</mark> of HTML so far
</p>
<p>
  CSS is the <mark class="pink">styling language</mark> of the web
</p>
<p>
  JavaScript is the <mark class="lime">most popular programming language</mark>
</p>

Now you’ve learned how to create text highlights using HTML. Nice work 😉