Highlight text HTML CSS

In this post, you’ll see how to highlight text in HTML & CSS. I will show you two versions of it. One is only using HTML <mark> tag and the other is the combination of <mark> tag & CSS.

You can check the live preview of the two versions in the link below.

Let’s get started.

Highlighting text in HTML

Highlighted text using HTML mark tag
Highlighted text using HTML mark tag (without CSS)

To highlight text in HTML, you have to wrap the words with the <mark> tag. You don’t even need to write any CSS for it. Most web browsers will automatically highlight the texts using a yellow background color (as you saw in the screenshot above).

To use this type of highlighting, I used the following HTML and you can do the same.


<p>Lorem ipsum dolor sit, amet <mark>consectetur adipisicing</mark> elit. Possimus, voluptatum? Eaque ab...</p>

Highlight text using mark tag & CSS

Highlighted text using HTML mark tag and CSS
Highlighted text using HTML mark tag and CSS

Sometimes you may need to change the default highlighting style. For example, if the default highlighted texts mess up with the page background, or if you need additional boost or styling to grab more user’s attention.

You can write additional CSS to enhance the highlighted part. To create the above example in the screenshot, I used the same HTML as the last example and wrote the following CSS.


mark {
  background-color: #59ff83;
  padding: 3px 5px 5px;
  border-radius: 4px;

The above CSS is just an example and there is no limitation. You can come up with any designs you like.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview


By highlighting certain texts, web crawlers, and browsers understand that those are important parts of your HTML document. The mark tag is generally used for referencing and any parts of your documents that need to highlight.