Highlight text with HTML mark tag
If you ever need to mark text within a paragraph, better use the <mark>
tag. It's HTML version of a yellow highlighter. I've always used a <span>
tag with some CSS styling sprinkled on it, not realizing this more semantic option existed. HTML5 is filled with all kind of goodies, am I right 😆
<p>
<mark>Highlight</mark>
text with HTML <mark> tag
</p>
Default <mark>
styling
The default background color of <mark>
is yellow.
<p>
<mark>Default Yellow Highlight</mark>
</p>
Output
Custom Styling <mark>
with CSS
Of course, like any text HTML tag, you can apply custom styling with CSS. You can think of it similarly to how you would style a <p>
tag.
mark {
background: red;
color: white;
}
Output
<mark>
vs Other Text HTML Tags
strong
<strong>
is used to indicate text that has strong importance than the surrounding text, such as a warning or error. Semantically, its importance. It appears as bold
b
<b>
is very similar to <strong>
as it also appears as bold. However, unlike it, it doesn't really…