- The Mark Text Element

The `` Element

Inline HTML5

The mark text element represents text that is marked or highlighted for reference or notation purposes due to its relevance in a particular context.

Quick Example

<p>Search results for <mark>HTML elements</mark>:</p>
<p>The <mark>mark element</mark> is used to highlight text.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Search results for <mark>HTML elements</mark>:</p>
<p>The <mark>mark element</mark> is used to highlight text.</p>

Syntax

<mark>highlighted text</mark>

The  element is typically rendered with a yellow background, like a highlighter pen.

Common Use Cases

Search Results

<p>Showing results for "semantic HTML":</p>
<ul>
<li><mark>Semantic HTML</mark> improves accessibility and SEO</li>
<li>Why <mark>semantic HTML</mark> matters for developers</li>
<li>A guide to <mark>semantic HTML</mark> elements</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Showing results for "semantic HTML":</p>
<ul>
<li><mark>Semantic HTML</mark> improves accessibility and SEO</li>
<li>Why <mark>semantic HTML</mark> matters for developers</li>
<li>A guide to <mark>semantic HTML</mark> elements</li>
</ul>

Highlighting Important Information

<p>Your account balance is <mark>$1,234.56</mark>.</p>
<p>The deadline is <mark>December 31, 2024</mark>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Your account balance is <mark>$1,234.56</mark>.</p>
<p>The deadline is <mark>December 31, 2024</mark>.</p>

Quoted Text with Annotations

<blockquote>
<p>To be or not to be, <mark>that is the question</mark>.</p>
<footer>— William Shakespeare, Hamlet</footer>
</blockquote>
<p>The marked phrase is the central theme of the soliloquy.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote>
<p>To be or not to be, <mark>that is the question</mark>.</p>
<footer>— William Shakespeare, Hamlet</footer>
</blockquote>
<p>The marked phrase is the central theme of the soliloquy.</p>

Matching Terms

<p>Find all instances of <mark>JavaScript</mark> in the following text:</p>
<p><mark>JavaScript</mark> is a programming language. <mark>JavaScript</mark> runs in browsers.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Find all instances of <mark>JavaScript</mark> in the following text:</p>
<p><mark>JavaScript</mark> is a programming language. <mark>JavaScript</mark> runs in browsers.</p>

Code Search Results

<p>Found in line 42:</p>
<pre><code>function <mark>getUserData</mark>() {
return <mark>userData</mark>;
}</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Found in line 42:</p>
<pre><code>function <mark>getUserData</mark>() {
return <mark>userData</mark>;
}</code></pre>

Document Annotations

<article>
<p>The study found that <mark>regular exercise</mark> significantly improved mental health outcomes.</p>
<aside>Note: This finding is particularly relevant to our research.</aside>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>The study found that <mark>regular exercise</mark> significantly improved mental health outcomes.</p>
<aside>Note: This finding is particularly relevant to our research.</aside>
</article>

When to Use ``

Use  for:

Search result highlighting
Current match in a search
Referenced portions in quotes
Relevant passages for the current context
Highlighted annotations

Semantic Highlighting Elements

<!-- Contextual relevance/highlighting -->
<p>Search: <mark>HTML</mark></p>

<!-- Strong importance -->
<p><strong>Warning:</strong> Do not proceed</p>

<!-- Stress emphasis -->
<p>I <em>really</em> need this</p>

<!-- Keywords, no importance -->
<p>Features: <b>fast</b>, <b>reliable</b></p>

Styling

Customize the highlight appearance:

<style>
mark {
  background: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 2px;
}
mark.highlight-green {
  background: #d4edda;
  color: #155724;
}
mark.highlight-blue {
  background: #cce5ff;
  color: #004085;
}
</style>

<p>Default: <mark>highlighted text</mark></p>
<p>Green: <mark class="highlight-green">important note</mark></p>
<p>Blue: <mark class="highlight-blue">reference</mark></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
mark {
  background: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 2px;
}
mark.highlight-green {
  background: #d4edda;
  color: #155724;
}
mark.highlight-blue {
  background: #cce5ff;
  color: #004085;
}
</style>

<p>Default: <mark>highlighted text</mark></p>
<p>Green: <mark class="highlight-green">important note</mark></p>
<p>Blue: <mark class="highlight-blue">reference</mark></p>

Search Result Style

<style>
.search-result mark {
  background: #ffeb3b;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.3);
}
</style>

<div class="search-result">
<p>Found 3 matches for <mark>JavaScript</mark> in this document.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.search-result mark {
  background: #ffeb3b;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.3);
}
</style>

<div class="search-result">
<p>Found 3 matches for <mark>JavaScript</mark> in this document.</p>
</div>

Real-World Examples

Search Interface

<div class="search-results">
<h4>Search Results for "responsive design"</h4>
<article>
  <h5>What is <mark>Responsive Design</mark>?</h5>
  <p><mark>Responsive design</mark> is an approach to web design that makes pages render well on all devices...</p>
</article>
<article>
  <h5>Best Practices for <mark>Responsive Design</mark></h5>
  <p>Implementing <mark>responsive design</mark> requires careful consideration of breakpoints...</p>
</article>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="search-results">
<h4>Search Results for "responsive design"</h4>
<article>
  <h5>What is <mark>Responsive Design</mark>?</h5>
  <p><mark>Responsive design</mark> is an approach to web design that makes pages render well on all devices...</p>
</article>
<article>
  <h5>Best Practices for <mark>Responsive Design</mark></h5>
  <p>Implementing <mark>responsive design</mark> requires careful consideration of breakpoints...</p>
</article>
</div>

Document Comparison

<div class="comparison">
<h4>Version Comparison</h4>
<p>Old: The feature will be available in <mark>Q1 2024</mark>.</p>
<p>New: The feature will be available in <mark>Q2 2024</mark>.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="comparison">
<h4>Version Comparison</h4>
<p>Old: The feature will be available in <mark>Q1 2024</mark>.</p>
<p>New: The feature will be available in <mark>Q2 2024</mark>.</p>
</div>

Interactive Quiz

<div class="quiz">
<p><strong>Question:</strong> Which is a semantic HTML element?</p>
<p>Your answer: <mark>&lt;article&gt;</mark> ✓ Correct!</p>
<p>The <mark>&lt;article&gt;</mark> element is indeed semantic.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="quiz">
<p><strong>Question:</strong> Which is a semantic HTML element?</p>
<p>Your answer: <mark>&lt;article&gt;</mark> ✓ Correct!</p>
<p>The <mark>&lt;article&gt;</mark> element is indeed semantic.</p>
</div>

Reading Annotations

<article>
<h4>Chapter 5: Functions</h4>
<p>A function is a reusable block of code. <mark>Functions help organize code and avoid repetition.</mark></p>
<aside>
  <strong>Study Note:</strong> This is key for the exam.
</aside>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h4>Chapter 5: Functions</h4>
<p>A function is a reusable block of code. <mark>Functions help organize code and avoid repetition.</mark></p>
<aside>
  <strong>Study Note:</strong> This is key for the exam.
</aside>
</article>

With Other Elements

In Tables

<table>
<tr>
  <th>Product</th>
  <th>Stock</th>
</tr>
<tr>
  <td>Widget A</td>
  <td><mark>Low stock</mark></td>
</tr>
<tr>
  <td>Widget B</td>
  <td>In stock</td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<tr>
  <th>Product</th>
  <th>Stock</th>
</tr>
<tr>
  <td>Widget A</td>
  <td><mark>Low stock</mark></td>
</tr>
<tr>
  <td>Widget B</td>
  <td>In stock</td>
</tr>
</table>

In Lists

<h4>Tasks for Today</h4>
<ul>
<li>Review pull requests</li>
<li><mark>Deploy to production</mark> (priority)</li>
<li>Update documentation</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h4>Tasks for Today</h4>
<ul>
<li>Review pull requests</li>
<li><mark>Deploy to production</mark> (priority)</li>
<li>Update documentation</li>
</ul>

Accessibility

Most screen readers don’t announce  differently from regular text. The highlighting is primarily visual.

Add Context

For important highlights, provide textual context:

Visual Only
With Context

<p><mark>$99.99</mark></p>

<p>Special price: <mark>$99.99</mark> (save $50!)</p>

Use ARIA for Search Results

For search highlighting, consider ARIA attributes:

<p aria-label="Search result: HTML elements">
  Results for <mark>HTML elements</mark>
</p>

Don’t Overuse

Too many highlights lose impact:

Overused
Better

<p><mark>This</mark> is <mark>very</mark> <mark>important</mark> <mark>information</mark>.</p>

<p><mark>This is very important information.</mark></p>

Dynamic Highlighting

Using JavaScript to highlight search terms:

<div id="content">
<p>HTML is a markup language. HTML structures web content.</p>
</div>
<button onclick="highlightTerm('HTML')">Highlight "HTML"</button>

<script>
function highlightTerm(term) {
const content = document.getElementById('content');
const regex = new RegExp(`(\b${term}\b)`, 'gi');
content.innerHTML = content.innerHTML.replace(regex, '<mark>$1</mark>');
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="content">
<p>HTML is a markup language. HTML structures web content.</p>
</div>
<button onclick="highlightTerm('HTML')">Highlight "HTML"</button>

<script>
function highlightTerm(term) {
const content = document.getElementById('content');
const regex = new RegExp(`(\b${term}\b)`, 'gi');
content.innerHTML = content.innerHTML.replace(regex, '<mark>$1</mark>');
}
</script>

Browser Support

Browser	Version	Notes
Chrome	7+	Full support
Firefox	4+	Full support
Safari	5.1+	Full support
Edge	79+	Full support
IE	9+	Full support

The  element is an HTML5 feature with excellent browser support.

For strong importance or urgency. Learn more →

For stress emphasis. Learn more →

For keywords without semantic importance. Learn more →

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

Previous
<kbd> - The Keyboard Input Element Next
<q> - The Inline Quotation Element

<mark> - The Mark Text Element

The `<mark>` Element

Quick Example

Syntax

Common Use Cases

Search Results

Highlighting Important Information

Quoted Text with Annotations

Matching Terms

Code Search Results

Document Annotations

When to Use `<mark>`

Semantic Highlighting Elements

Styling

Search Result Style

Real-World Examples

Search Interface

Document Comparison

Interactive Quiz

Reading Annotations

With Other Elements

In Tables

In Lists

Accessibility

Add Context

Use ARIA for Search Results

Don’t Overuse

Dynamic Highlighting

Browser Support

Specifications

<mark> - The Mark Text Element

The <mark> Element

Quick Example

Syntax

Common Use Cases

Search Results

Highlighting Important Information

Quoted Text with Annotations

Matching Terms

Code Search Results

Document Annotations

When to Use <mark>

Semantic Highlighting Elements

Styling

Search Result Style

Real-World Examples

Search Interface

Document Comparison

Interactive Quiz

Reading Annotations

With Other Elements

In Tables

In Lists

Accessibility

Screen Reader Behavior

Add Context

Use ARIA for Search Results

Don’t Overuse

Dynamic Highlighting

Browser Support

Related Elements

Specifications

The `<mark>` Element

When to Use `<mark>`