HTML <Mark> Tag

Definition

The <mark> tag is used to highlight or mark text of particular interest or relevance, often for notational purposes or scrutiny.

Example

<p><i>You searched for "drive":</i></p>
<p>1. You should not <mark>drive</mark> on the wrong side of the road.</p>

Usage

• You must use an opening and closing tag.
• The default styling for the <mark> tag highlights the text in yellow, similar to a yellow marker pen used on paper.
• The <mark> tag can be used in a <blockquote> to bring attention to a particular part of the quotation.
• The example at the top of the page shows a <mark> tag used to highlight terms matching a user search.

Attributes

The <mark> element only supports the Global Attributes.

Best Practices

• The <mark> tag denotes relevance. Don’t confuse it with the <strong> tag which denotes importance, or the <em> tag which denotes emphasis.

• Most screen readers do not announce the <mark> element. You can use CSS to add hidden content before and after the <mark> element, which screen readers will announce.

  For example, you can adapt this technique:

  <style>
  mark::before, mark::after {
  content:" [Highlighted text start] ";
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  }
  mark::after {
  content:" [Highlighted text end] ";
  }
  </style>
  <p>You should not <mark>drive</mark> on the wrong side of the road.</p>

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile