<mark>
Highlights a piece of text like a highlighter, because it’s relevant in the current context.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Search results for: <strong>loop</strong></p>
<ul>
<li>Lesson 7: the <mark>loop</mark> that counts to ten</li>
<li>How to break a <mark>loop</mark> at the right moment?</li>
</ul>Definition and usage
#The <mark> element works like a highlighter: it highlights a piece of text that’s relevant to the current situation. Typical examples are a searched-for phrase in search results, a part of a quote the author wants to draw attention to, or a changed line in a code example. By default it has a yellow background and black text.
The difference from <strong> is that <strong> marks content that’s important in its own right, while <mark> marks content that’s important right now, for example because the user just searched for it.
Not all screen readers announce the highlight, so don’t use it to convey information essential to understanding the content. Don’t use <mark> as a decoration either, since you can set a background purely for looks in CSS.
Syntax
#<mark>highlighted text</mark>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>From the mentor's notes:</p>
<blockquote>
<p>First, make the code work. Then <mark>make it readable</mark>. Think about speed last.</p>
</blockquote>Default CSS
#Most browsers display this element with these default styles:
mark {
background-color: yellow;
color: black;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Only highlight what relates to the current context. Permanent importance is a job for
<strong>. - With a custom background color, make sure there’s contrast with the text, especially in dark mode.
- Highlighting search results is usually done by a script that wraps every match in
<mark>.
Related entries
#- <strong>Text of great importance: a warning, key information.
- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <b>Draws attention to a piece of text without giving it any extra weight, e.g. keywords.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <blockquote>A longer quotation from another source, displayed as a separate, indented block.
Spotted a mistake or missing an example? Write to us.