How to Highlight Text using Mark tag in HTML

Updated onbyAlan Morel
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:

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

The above code will render as:

  • HTML

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

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

Here's how that looks:

  • HTML

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:

mark {
    background-color: red;
}
  • HTML
  • CSS

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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 Sabe.io. All rights reserved. Made with ❤ in NY.