Highlight HTML text by using the mark tag

A tutorial on HTML mark tag

Posted on August 13, 2021


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 😉

Related articles:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.