Skip to content

Highlight text with HTML mark tag

Samantha Ming on May 16, 2019

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 ... [Read Full]
markdown guide

Hooray for semantic tags! I have to say though, I've never been quite clear on when to use <mark> vs <em> vs <strong>. I guess <mark> is meant for cases where you're highlighting text for some reason other than emphasis, but it's not super clear


Yup, that's how I think of it too. Use <mark> to highlight text. But I get what you're saying. It can be confusing which appropriate tag to use in which case since it's always a bit subjective. I guess the way I approach it, don't overthink it too much and just pick the one that YOU think it's best. I know, it's not the best advice πŸ˜… But know this, at least your site won't break if you accidentally use the wrong one. So pick one and if it doesn't seem right, always okay to change it πŸ˜†


I found this SO answer that I think gives a pretty good explanation of the semantic differences, though some examples would be helpful:


I think progressbar is another lesser known element which can be used for many things like loading screen and showing other progress.


Wooo!!! that's a good one πŸ‘Let me add that to the list to cover next time πŸ˜€


wow. I didn’t know mark tag.
in my case, I defined style and span tag.

This post’s is nice solution.πŸ‘


That's what I use to do too! Until I realize there's a more semantic option. Next time you're doing that, feel free to use the <mark> tag πŸ™‚

code of conduct - report abuse