Tutorial
How To Use the HTML5 Mark Element
Introduction
mark
is a new semantic element that you can use to mark/highlight text that’s relevant to a given context. This tutorial reviews the mark
element’s implementation.
Prerequisites
- A general knowledge of HTML5. For a comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.
Using the mark
Element
A good example of when one might use the mark
elements 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);
}
This is a basic use case and implementation of the mark
tag.
Conclusion
Note that <mark>
is unlike <em>
or <strong>
in that it doesn’t add importance or emphasis to the highlighted content, which makes its use limited to only a few use cases.
For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.