Definition and Usage

The <mark> tag represents a portion of text within a document that is marked for reference or interest due to its contextual relevance.
This portion is highlighted to make it stand out due to its relevance to another context.

Most browsers display the text inside the <mark> tag with a highlight that resembles marking with a highlighter pen.

Basic Example

The <mark> tag is used to mark a specific portion of text within a document for reference or to indicate a section of interest.

Highlighting Search Terms in Results

When displaying search results, it is important to visually distinguish the search terms so users can easily find what they entered. The <mark> tag indicates that the text matches the search query.

HTML 
<p>
   Search results for <kbd>CodingCourses</kbd>.
</p>
<ul>
    <li>
        <mark>CodingCourses</mark> is a coding tutorial for everyone.
    </li>
    <li>
        Welcome to <mark>CodingCourses</mark>.
    </li>
</ul>
Rendered Output

Highlighting Sections of Interest

The following example demonstrates using the <mark> tag to highlight a contextually relevant part of a <blockquote>that warrants special attention.

HTML 
<blockquote>
    <p>"Learning happens through experience, and <mark>mistakes</mark> provide important lessons."</p>
</blockquote>
Rendered Output

Usage

The <mark> tag is used to mark a specific part of text within a document for reference or to indicate that the section is of interest. This portion is highlighted based on its relevance in another context.

When used within a quoted or referenced block of text, the highlight often represents content that was not originally emphasized, but has been marked to draw the reader's attention. The original author may not have considered that portion important at the time of writing, but it is now highlighted due to unexpected relevance. When used within the main body of a document, the highlight typically indicates content that is relevant to the user's current activity.

Common Use Cases

  • When used in quotations (such as with <q> or <blockquote> tags), the <mark> tag typically highlights text that, while not originally emphasized by the author, is now considered noteworthy or worthy of closer attention. This is similar to using a highlighter to mark important passages in a book.
  • In other cases, the <mark> tag highlights content in the document that is likely relevant to the user's current task—for example, text that matches a search query.
  • The <mark> tag should not be used purely for stylistic highlighting. For that purpose, use a <span> tag with appropriate CSS instead.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#usage_notes

Difference Between <mark> and <strong> Tags

  • Do not confuse the <mark> tag with the <strong> tag.
  • The <mark> tag is used to indicate content that is contextually relevant or of interest.
  • In contrast, the <strong> tag is used to denote text of strong importance.

Browser compatibility

Browser compatibility for the mark tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<mark> 7 12 4 5.1

Specifications

Specification for the mark tag
Specification
<mark> HTML
#the-mark-element