How to Highlight text in HTML and CSS

This article is about how to highlight text in HTML and CSS with examples. “Highlighting” is very important not only in articles or web pages but also in our daily life. We have highlighted the important words and will use them later.

What is the highlighted text?

It means highlighting an important word in a paragraph or sentence. For example, This is a dangerous place, if you highlight “dangerous” in this sentence, the user will quickly see the highlighting word. And if you have a shopping website, if you highlight all the words like the ‘offer! offer!’, ‘discount’, ‘buy1 get1’, users will see that highlighting a word and read your paragraph completely. This way we can highlight important words. We can highlight the words using paired <mark> tags in HTML and background-color properties in CSS. Let’s see how to do it with an example.

How to highlight text in HTML

<p>This is an example text for <mark>highlighting</mark></p>

Output:

In the above HTML code, there is some text inside a <p> tag and only the “highlighting” text is inside the <mark> tag. Every word we put in the <mark> tag is highlighted and the default color of the mark tag is yellow. For this, you need to use the background-color property in CSS to change the color. It is one of the easiest ways to highlight the text.

How to highlight text in CSS

<p>Don't forget to buy
<span style="background-color:yellow">milk</span>
today. </p>

Output:

The above <p> tag has some text and “milk” is within the <span> because we’re going to highlight that word. Use inline style for the <span> tag and set background-color to yellow. See the output the milk word is highlighted. You need to change the background color value to change the highlight color.

How do you highlight text in a different color in CSS

<p>I bought an item on
<span style="background-color:orange">discount</span>.</p>

Output:

In the above code, As the value of the background color is “orange“, the text is highlight in orange color. You can give any color name or RGB() color value or hex color value to the background color. And you can also create a highlight color in a gradient color