Tutorial

HTML5 Mark Element

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

mark is a new semantic element to be used to mark/highlight text that’s relevant to the context. A good example would be to highlight keywords in search results. Let’s say for example that we searched for “dog”:

<p>
  Tell your <mark>dog</mark> to behave!
</p>

It’s up to you to style the mark element as you see fit. For example:

mark {
  background-color: rgba(107, 183, 86, 0.95);
  border-bottom: 2px solid rgb(65, 118, 50);
}

👉 Note that <mark> is unlike <em> or <strong> in that it doesn’t add importance or emphasis to the highlithted content, which makes its use limited to only a few use cases.

0 Comments

Creative Commons License