DEV Community

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 ...
Collapse
 
kenbellows profile image
Ken Bellows

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

Collapse
 
samanthaming profile image
Samantha Ming

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 😆

Collapse
 
kenbellows profile image
Ken Bellows

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

Collapse
 
itsjzt profile image
Saurabh Sharma

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

Collapse
 
samanthaming profile image
Samantha Ming

Wooo!!! that's a good one 👍Let me add that to the list to cover next time 😀

Collapse
 
itsjzt profile image
Saurabh Sharma

🤩

Collapse
 
yuyabu profile image
yuyabu

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

This post’s is nice solution.👍

Collapse
 
samanthaming profile image
Samantha Ming

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 🙂