HTML5 <mark> Tag

The HTML <mark> tag is used to represent highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example, it can be used in a page showing search results to highlight every instance of the searched-for word.

The only content permitted inside this element is phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <mark> tag can be any element that accepts phrasing content.

In a quotation or another block, the highlighted text typically marks text that is referenced outside the quote, or marked for specific scrutiny even though the original author didn’t consider it important.

In the main text, the highlighted text typically marks text that may be of special relevance for the user’s current activity, like search results.

Do not confuse the <mark> element with the <strong> element. The <strong> element is used to denote spans of text of importance in context of the text, when the <mark> element is used to denote spans of text of relevance to a different context.

The following style is applied to this element by default:

mark {
  background-color: yellow;
  color: black; 
}

Here is an example of using this tag:

<p lang="en-US">Consider the following quote:</p>
  <blockquote lang="en-GB">
    <p>Look around and you will find, no-one's really
    <mark>colour</mark> blind.</p>
  </blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word, the person writing this quote is clearly not American.</p>

The above example shows how the mark element can be used to bring attention to a particular part of a quotation. You can also use this element to highlight parts of a document that match a given string.

<p>I also have some <mark>kitten</mark>s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>.</p> 

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML mark Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <mark> element on MDN.
  2. You can also read the HTML <mark> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top