Highlight text with HTML mark tag

Samantha Ming
May 16 · 5 min read
CodeTidbit by SamanthaMing.com
<p>
<mark>Highlight</mark>
text with HTML &lt;mark&gt; tag
</p>

Default <mark> styling

The default background color of <mark> is yellow.

<p>
<mark>Default Yellow Highlight</mark>
</p>

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;
}

<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 🏆

HTML5 tag and SEO

I do want to point out one thing though.

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.

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;
}

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 an awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>

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>


The Startup

Medium's largest active publication, followed by +477K people. Follow to join our community.

Samantha Ming

Written by

Front End Developer 👩‍💻 I love learning new things and sharing them with my community. Follow me to catch my weekly code tidbits 🔥

The Startup

Medium's largest active publication, followed by +477K people. Follow to join our community.