HTML <mark> Tag

The <mark> tag in HTML is used to highlight parts of the text. It represents text which is marked or highlighted for reference purposes, due to its relevance in a specific context. It is typically rendered with a yellow background, but this can be customized with CSS. The <mark> tag doesn't imply any special importance beyond the highlighting, unlike the <strong> tag.

Syntax

<mark>highlighted text</mark>

Attributes

Example

<p>This is a <mark>highlighted</mark> sentence.</p>

More Examples

Basic Highlighting

This is the most common use case, marking specific parts of a sentence or paragraph.

<p>The quick brown fox <mark>jumps over</mark> the lazy dog.</p>

Highlighting Search Terms

When displaying search results, you might want to highlight the terms that the user searched for.

<p>Your search for "<mark>HTML mark tag</mark>" returned the following results:</p>

Highlighting Quotes

You can use the tag to highlight specific words or phrases in a quote, without changing the semantic meaning of the quote itself

<p>As someone once said: "<mark>To be or not to be,</mark> that is the question." </p>

Nested Highlighting

You can nest other formatting tags inside the tag.

<p><mark>This is <b>bold</b> and <em>italicized</em> text, all highlighted.</mark></p>

Customizing Highlight Style with CSS

You can change the default yellow background with CSS.

<style>
  mark {
    background-color: lightgreen;
    color: black;
  }
</style>

<p>This <mark>text</mark> is highlighted in light green.</p>

Highlighting Code Snippets

While not primarily for code, can highlight specific parts of inline code examples.

<p>In this code: <code>let <mark>x</mark> = 10;</code>, x is a variable.</p>

Using for Callouts:

You can highlight specific instructions or important points with <mark>.

<p>Remember to <mark>save your work</mark> before closing the document!</p>

Browser Support

The <mark> tag is supported by all major browsers, including:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <mark> tag should be used to denote a part of the text which has relevance to the context of the document.
• Do not use <mark> to highlight text to grab attention without contextual relevance, Use other styling methods for that.
• The default style of the <mark> tag is a yellow background with black text which can be customized with CSS as needed.
• Nesting <mark> tags is not recommended as it may not render as expected.
• Ensure proper contrast between the background and text colors when customizing the highlight for better accessibility.
• When highlighting search results consider using the <mark> tag, but ensure that the highlighting doesn't interfere with readability.
• <mark> is an inline element, which means it takes up only as much width as necessary and doesn’t force line breaks before or after it.
• You can style the highlight to match your branding guidelines or the overall website design.
• Use <mark> sparingly for maximum impact and clarity. Overuse can be visually distracting and reduce the effectiveness of the highlighting.
• Although not a part of HTML5 standard, it is important to note that <mark> tag was available previously too.
• The tag is useful for emphasizing specific content within larger text blocks, and is not meant to be a primary method for conveying importance.