<mark>
The <mark> element represents text that is marked or highlighted for reference purposes due to its relevance in the current context. Browsers typically render marked text with a yellow background, similar to using a highlighter pen on paper. This is an HTML5 element designed for semantic highlighting.
This page was last updated on 2025-11-17
Syntax
<mark>highlighted text</mark>
The element requires both opening and closing tags. The content is the text that should be highlighted or marked as relevant.
Attributes
- Global attributes - The <mark> element supports all global attributes such as
id,class,style,lang, anddir.
The <mark> element has no element-specific attributes.
Examples
Search Result Highlighting
<p>Your search for "HTML" returned the following: Learn <mark>HTML</mark> basics and <mark>HTML</mark>5 features.</p>
Important Information in Quote
<blockquote>
<p>The key finding was that <mark>response times improved by 40%</mark> after the optimization.</p>
</blockquote>
Code Review Highlight
<p>In the function below, note the <mark>potential security issue</mark> on line 15.</p>
Academic Text Reference
<p>The author states that <mark>climate change is the defining challenge of our time</mark>, which directly supports our thesis.</p>
When to Use
Use the <mark> element when:
- Highlighting search terms in search results
- Drawing attention to specific parts of quoted text
- Marking text that is relevant to the user's current activity
- Indicating important passages in documents
- Highlighting code snippets during review
Important distinctions:
- <mark> is for relevance in current context, not general importance
- Use <strong> for strong importance
- Use <em> for emphasis
- The default yellow background can be customized with CSS
mark { background-color: #ffeb3b; padding: 2px 4px; }
