DEV Community

loading...

Html Highlight Text Highlight text with HTML mark tag

samanthaming profile image Samantha Ming ・5 min read

Code Tidbit by SamanthaMing.com

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 &lt;mark&gt; tag
</p>
Enter fullscreen mode Exit fullscreen mode

Default <mark> styling

The default background color of <mark> is yellow.

<p>
  <mark>Default Yellow Highlight</mark>
</p>
Enter fullscreen mode Exit fullscreen mode

Output

Code Sample Ouptput

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;
}
Enter fullscreen mode Exit fullscreen mode

Output

Code Sample Ouptput

<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 convey any importance and it's more a stylistic thing than semantics.

em

<em> is used to stress emphasis on a particular word. It appears as italics

mark

<mark> merely highlights the relevance of a certain piece of text. Prior to the existence of this tag, many have used em or strong to give the highlighted content some semantic meaning. Well no more! If you need to highlight, use this tag 🌟

Why semantic HTML tag is important

The reason you don't just use <div> tags everywhere is because they are not semantic. You might be like me when I first started learning programming - who cares about being semantically-correct πŸ™„. Wrong ❌. In fact, search engines like Google do! Because semantics convey meaning about your site. When search robots crawl through your site, they'll know what's up. In other words, ding ding ding on your SEO or search engine optimization πŸ†

Another reason to be semantically-correct is for accessibility. A lot of the accessibility tools rely on the tags' semantics to convert your site into meaning to the human user using it (ie. screen readers). Here's an analogy. Remember back in the days, when we got the computer reading text from a site. It sounded super robotic and odd πŸ€–. Without the proper semantics, it's just like that. DDoes it work, sureβ€Š-β€Šbut the listening experience is terrible 😱. However, when you use proper semantics, it's like listening to Siri. It sounds way more human-y because it has all the different inflection, changes in pitch, and even know when to pause. And this is the similar type of better experience you can achieve when using semantically-correct HTML tags πŸ‘

HTML5 tag and SEO

I do want to point out one thing though.

Google's John Mueller mentioned this in a Twitter response:

It certainly makes sense to use HTML5 properly if you can, there's no SEO downside to doing so :).

Here's what I gather from this. Whether or not you use HTML5 tags, it won't hurt your Google search result ranking. However, does that mean you should use HTML5 tags. Not at all! The accessibility benefits are still there. And some HTML5 tags have really interesting browser behavior and it opens up your user to more advanced feature that it didn't before 🀩

Accessibility Concerns

Alright, hopefully, I have successfully conveyed to you the importance of semantic HTML tags. And you can now understand how <mark> is not simply to style texts, but it's semantically a good thing.

But! there is some concern with its accessibility. Unfortunately, the use of the <mark> tag is not announced by most screen readers in its default settings. But good news, there's is a way around it. You can use the CSS content property and pseudo-element to make an announcement.

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

/* Hide the text created in the CSS content property */
mark::before, 
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
Enter fullscreen mode Exit fullscreen mode

So what the screen reader will do here. When it encounters text that's wrapped in the <mark> tag, it will announce "highlight start" followed by the text within the tag. and then announce "highlight end" once the mark tag ends.

BUT...

Please note: if you have a lot of these "announcement", it can be very verbose and add in sometimes annoying unnecessary information. Which can cause some screen reader users to turn off this feature. So, the lesson here is. "With great power comes great responsibility πŸ•·". Don't abuse this technique and ONLY apply it in instances where NOT knowing the highlighted content can adversely affect understanding for the user.

Use Case for <mark>

The fun part now! Let's take at some use cases for <mark>:

Use Case: Search Result

Here's a popular one. You can use it to highlight the term a user has searched for.

<p>Search Result for "Vue"</p>

<hr>

<p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>πŸ˜†</p>
Enter fullscreen mode Exit fullscreen mode

Output

Code Sample Ouptut

Use Case: Quotes

It's great to provide highlights for quotation (<q>) and block quote (<blockquote>).

<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>
Enter fullscreen mode Exit fullscreen mode

Output

Code Sample Output


Resources


Thanks for reading ❀
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Discussion (8)

pic
Editor guide
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 Author

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 Author

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

Collapse
itsjzt profile image
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 Author

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