HTML <mark> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read


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


<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.


  • 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.


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:

    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] ";
    <p>You should not <mark>drive</mark> on the wrong side of the road.</p>


Browser Support




Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet