HTML / HTML Tags

HTML <Mark> Tag

Oct 12, 2022
2 min read
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>

You searched for "drive":

1. You should not drive on the wrong side of the road.

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes