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 ๐Ÿ™‚