Subscribe

HTML mark tag a digital marker

✍️

The HTML mark tag is a powerful element that can be used to highlight text

24 Feb, 2021 · 2 min read

Although Mark is also a name, it's not what this HTML attribute is used for.

Mark is used to describing a highlight of a text, to mark it, or highlight it.

How it works:

<p>This is some <mark>highlighted text</mark> using the Mark tag.</p>

And that will result in:

Mark element in HTML result

Custom styling the Mark tag

We can also add custom styling to our mark tag.

mark {
  background: purple;
  color: white;
}

This will give the following result:

Mark tag with custom CSS

Common use cases for the mark tag

One place where you often find the mark tag being used is on search result pages.

You'll find the word you were looking for highlighted.

<h3>Search results for "Pikachu"</h3>
<p><mark>Pikachu</mark> is a mouse like Pokémon.</p>
<p>The evolution of Pichu is <mark>Pikachu</mark>.</p>

Search results with mark tag

Demo

You can have a play with the following Codepen I set up to showcase the mark tag.

See the Pen HTML mark tag a digital marker by Chris Bongers (@rebelchris) on CodePen.

Browser support

The mark tag is really well supported and safe to use.

HTML mark element browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Moving from GIF to video format

27 Jun, 2021 · 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 · 4 min read

Common HTML Element Types

Join 1371 devs and subscribe to my newsletter