<mark>: the "Mark Text" element

The HTML <mark> element represents text that is marked or highlighted for reference or annotation purposes, due to the relevance or importance of the marked passage in the context of inclusion.

Usage notes

Typical use cases for <mark> include:

  • When used in a citation (<q>) or block quotation (<blockquote>), it generally indicates text of particular interest but not marked in the original material, or material that requires special scrutiny even if the original author he didn't think it was of particular importance. Think of this like using a highlighter in a book to mark passages you find interesting.
  • Otherwise, <mark> indicates a portion of the document's content that may be relevant to the user's current activity. It can be used, for example, to indicate words that match a search operation.
  • Do not use <mark> for syntax highlighting; instead, use the <span> element with the appropriate CSS applied.

Note: Do not confuse <mark> with the <strong> element; <mark> is used to denote content that has a certain degree of relevance , while <strong> denotes important ranges of text.

Examples

In this first example, a <mark> element is used to mark text within a quote of particular interest to the user.

<blockquote>
È un periodo di guerra civile. Le astronavi ribelli, 
colpendo da una base nascosta, 
hanno vinto la loro prima vittoria 
contro il malvagio Impero Galattico. 
Durante la battaglia, <mark> 
le spie ribelli sono riuscite a rubare piani segreti </mark> 
per l'arma definitiva dell'Impero, 
la DEATH STAR, una stazione spaziale corazzata 
con una potenza sufficiente per distruggere un intero pianeta.
</blockquote>

Accessibility issues

The element's mark presence is not announced by most screen reading technology in its default configuration. It can be announced using the content CSS property, along with the ::before and ::after pseudo-elements.

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;        
}

mark::before {
  content: "[highlight start]";
}

mark::after {
  content: "[highlight end]";
}

Some people who use screen readers deliberately disable the announcement of content that creates more verbosity. For this reason, it is important not to abuse this technique and only apply it in situations where not knowing the content has been highlighted would negatively affect understanding.