Table of Contents

URL: https://www.progressiverobot.com/html-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

html5 mark illustration for: Prerequisites

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.