In this section, we will learn what <mark> element is and how to use it.

Highlight HTML Text: What is <mark> Tag in HTML?

HTML <mark> element is used to mark a text content by highlighting it in an HTML document. This is mainly useful when we want to bring users’ attention to a text that is surrounded by other text content.

Usually, the text content within the body of the <mark> element is rendered within a yellow box.

HTML <mark> Tag Syntax:

<mark> text content </mark>

HTML <mark> Tag Values

The value we set for the <mark> element is any text content within a document that we want to mark and highlight it.

Example: highlight text in HTML

See the Pen highlight text in HTML by Omid Dehghan (@odehghan) on CodePen.

CSS Text Highlight

By default, when using HTML <mark> element, the target content will be rendered within a yellow box.

But this is the default behavior of this element and we can use CSS to change this default style using properties like CSS color and background-color.

Example: text highlight CSS

See the Pen text highlight CSS by Omid Dehghan (@odehghan) on CodePen.