← Back to All Tags

<mark>

Highlights text for emphasis or reference

✨ HTML5

Definition and Usage

The <mark> element establishes text that should be marked or highlighted.

Use the <mark> tag when you want to highlight parts of your text for reference purposes, or to indicate relevance in a particular context.

Common use cases include:

  • Highlighting search results on a page
  • Marking relevant passages in quoted text
  • Indicating parts of a document that need attention
  • Showing matches in a search interface
Note: The <mark> tag is typically displayed with a yellow background by default, but this can be changed with CSS.
Semantic Meaning: The <mark> tag has semantic meaning - it indicates relevance or importance in a specific context, not just visual styling.

Browser Support

The numbers in the table specify the first browser version that fully supports the element:

Chrome
Chrome
6.0+
Firefox
Firefox
4.0+
Safari
Safari
5.0+
Edge
Edge
9.0+
Opera
Opera
11.0+

Attributes

The <mark> tag supports the Global Attributes in HTML.

The <mark> tag also supports the Event Attributes in HTML.

Examples

Basic Highlighted Text

Highlight important text in a paragraph:

Example

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

The quick brown fox jumps over the lazy dog.

Search Results Highlighting

Highlight search terms in search results:

Example

<h3>Search Results for "HTML5"</h3>

<article>
  <h4>Introduction to <mark>HTML5</mark></h4>
  <p>Learn about <mark>HTML5</mark> features including semantic elements, multimedia support, and new APIs.</p>
</article>

<article>
  <h4>Modern Web Development with <mark>HTML5</mark></h4>
  <p>Discover how <mark>HTML5</mark> revolutionized web development with its powerful new features.</p>
</article>

Document Reference Highlighting

Mark referenced text in a quote:

Example

<blockquote>
  <p>The World Wide Web Consortium (W3C) develops web standards. <mark>HTML5 was released as a W3C Recommendation in 2014.</mark> This marked a significant milestone in web development.</p>
</blockquote>
<p>The highlighted text above shows when HTML5 became an official standard.</p>

Styled Highlighting with CSS

Customize the appearance of highlighted text:

Example

<style>
  mark {
    background-color: #ffeb3b;
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
  }

  mark.important {
    background-color: #ff5722;
    color: white;
    font-weight: bold;
  }

  mark.note {
    background-color: #2196F3;
    color: white;
  }
</style>

<p>This is <mark>standard highlighting</mark> text.</p>
<p>This is <mark class="important">important</mark> information.</p>
<p>This is a <mark class="note">note</mark> for reference.</p>

Multiple Highlights

Highlight multiple terms in text:

Example

<article>
  <h3>Web Development Technologies</h3>
  <p>
    Modern web development relies on three core technologies:
    <mark>HTML</mark> for structure,
    <mark>CSS</mark> for styling, and
    <mark>JavaScript</mark> for interactivity.
  </p>
</article>

Accessibility-Friendly Highlighting

Use aria-label for screen reader context:

Example

<p>
  Search results for "accessibility":
  Web <mark aria-label="search match">accessibility</mark> ensures that websites are usable by everyone, including people with disabilities. Good <mark aria-label="search match">accessibility</mark> practices benefit all users.
</p>

Code Highlighting

Highlight specific parts of code examples:

Example

<p>Pay attention to the <mark>addEventListener</mark> method in this code:</p>

<pre><code>
const button = document.querySelector('button');
button.<mark>addEventListener</mark>('click', function() {
  alert('Button clicked!');
});
</code></pre>

Mark vs Strong vs Em

Element Purpose Default Styling Semantic Meaning
<mark> Highlight relevant text Yellow background Relevance in context (search results, references)
<strong> Strong importance Bold text High importance or urgency
<em> Emphasis Italic text Stress emphasis or subtle importance
Key Difference: Use <mark> for contextual highlighting (like search matches), <strong> for inherent importance, and <em> for emphasis.

Use Cases

Search Results

The most common use case for <mark> is highlighting search terms in search results, making it easy for users to see why a particular result matched their query.

Reference Highlighting

When quoting or referencing text, use <mark> to draw attention to specific passages that are particularly relevant to your discussion.

Important Passages

In educational content or documentation, highlight key concepts or important information that readers should pay special attention to.

Change Tracking

Indicate new or changed content in documents, helping users quickly identify what's been updated.

Styling with CSS

The default yellow background can be customized to match your design:

CSS Styling Examples

/* Basic custom styling */
mark {
  background-color: #ffd54f;
  color: var(--text-primary);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 500;
}

/* Dark theme highlighting */
@media (prefers-color-scheme: dark) {
  mark {
    background-color: #f57c00;
    color: #fff;
  }
}

/* Animated highlight effect */
mark.animated {
  animation: highlight 1s ease-in;
}

@keyframes highlight {
  from {
    background-color: transparent;
  }
  to {
    background-color: #ffeb3b;
  }
}

/* Different highlight colors for context */
mark.match {
  background-color: #4CAF50;
  color: white;
}

mark.warning {
  background-color: #ff9800;
  color: white;
}

mark.error {
  background-color: #f44336;
  color: white;
}

Try it Yourself

Interactive Example

See how the <mark> tag highlights text:

Example Result:

HTML5 introduced many new features. The semantic elements like <header>, <nav>, <main>, and <footer> make web pages more meaningful. Another important feature is the Canvas API for drawing graphics.

Search for "HTML5": HTML5 revolutionized web development by introducing powerful new capabilities.

Best Practices

  • Semantic Usage: Use <mark> for contextual highlighting, not just for visual styling
  • Don't Overuse: Highlighting too much text defeats the purpose - highlight only what's truly relevant
  • Accessibility: Ensure sufficient color contrast between highlighted text and background
  • Search Results: Perfect for highlighting search terms in search results
  • Not for Importance: Use <strong> for inherently important text, not <mark>
  • Style Appropriately: The default yellow background works well, but customize it to match your brand
  • Screen Readers: Consider adding aria-label for additional context when needed
  • Print Styles: Consider how highlighting appears when printed
Accessibility Warning: Never rely on color alone to convey meaning. Ensure highlighted text is distinguishable even without color (e.g., with sufficient contrast or additional styling).

Accessibility Considerations

  • Ensure text contrast ratio meets WCAG 2.1 AA standards (minimum 4.5:1)
  • Don't rely solely on background color to convey meaning
  • Screen readers may not announce highlighting, so ensure content is understandable without visual cues
  • Consider adding ARIA attributes for additional context when necessary
  • Test with various screen readers to ensure proper announcement
  • Provide sufficient padding around highlighted text for readability

Default CSS Settings

Most browsers will display the <mark> element with the following default values:

Default CSS

mark {
  background-color: yellow;
  color: var(--text-primary);
}

Related Tags

  • <strong>

    Defines important text

  • <em>

    Defines emphasized text

  • <ins>

    Defines inserted text

  • <del>

    Defines deleted text

  • <abbr>

    Defines an abbreviation

  • <span>

    Defines a section in document