How to Highlight Text using Mark tag in HTML

HTML has a lot of useful and unique tags that help you bring semantic meaning to your markup.

One of these tags is the <mark> tag, which is used to highlight text so you can differentiate it from the rest of the content.

In this post, we'll learn how to use the <mark> tag to highlight text in HTML.

How to Highlight Text in HTML using the mark tag

As mentioned before, you can surround text with the <mark> tag to highlight it.

Let's look at an example of text without the <mark> tag:

HTML
<p>My favorite color is yellow.</p>

The above code will render as:

Now, let's add the <mark> tag to the text:

HTML
<p>My favorite color is <mark>yellow</mark>.</p>

Here's how that looks:

As you can see, the <mark> tag highlights the text in yellow by default.

How to Style the Mark Tag

The <mark> tag is tag just like any other HTML tag, so you can style it using CSS.

Here's how you can change the default yellow background color to red:

CSS
mark {
    background-color: red;
}

Conclusion

In this post, we learned how to highlight text in HTML using the <mark> tag.

Simply wrap the text you want to highlight with the <mark> tag, and you're good to go.

If you want to change the default yellow background color, you can do so using CSS by targeting the <mark> tag.

Thanks for reading!

• Support Us