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.