Highlight Text with CSS

Jonelle Noelani Yacapin
2 min readAug 10, 2021

--

I want to give a ‘highlight’ effect to some of the key words to make them stand out.

First, I thought I was being clever by making all the titles <h5>. It was a good size and looked alright. And, in the CSS doc I could style them by just using the h5 selector.

<h5>GROW</h5>h5 {
background-color: #FFF44F;
}
H5 with yellow background color

This successfully adds the yellow background but it goes beyond just highlighting the text that I wanted. I forgot that heading tags are block elements so it’s going to fill out the whole block area.

Computer Hope suggests using the HTML5 <mark> tag. I’ve never heard of this until now! Let’s see how it turns out.

<mark>GROW</mark>mark {
background-color: #FFF44F;
}
HTML5 <mark> tag with yellow background

Well look at that!

Computer Hope also suggests using the <span> HTML tag. I always forget about <span>.

<span>GROW</span>span {
background-color: #FFF44F;
}
<span> HTML tag with yellow background

Looks pretty similar to the <mark> tag outcome.

I don’t understand all of the intricacies of HTML5 yet, but it seems not all browsers support it so the <mark> tag might not work 100% of the time. Whereas the <span> tag is supported by all browsers.

With a little padding, I’m going to call it good.

<span> HTML tag with 8px padding

--

--

Jonelle Noelani Yacapin

Certified Sommelier and Flatiron School Software Engineering Grad