Highlight Text with CSS
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.
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.
Well look at that!
Computer Hope also suggests using the
<span> HTML tag. I always forget about
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.