<mark> Highlight
Highlighted text, like a marker pen, showing relevance in the current context.
<mark> highlights text because it is relevant right now, the way you would run a marker pen over a printed page. Search terms in results and the part of a quote you want to point at are the typical uses.
It says nothing about general importance; <strong> covers that. The default style is a yellow background. Screen readers often skip it, so a highlight should never be the only carrier of meaning.
The mark element in the WHATWG standard (opens in a new tab) uses search result highlights and quoted passages as examples. Related text-level elements are covered in the semantic HTML guide.
Syntax
<mark>highlighted text</mark>When to use it
<mark> highlights text because of what the reader is doing right now: matching words on a search results page, the sentence a teacher wants students to discuss, a changed line in a tutorial's code sample, or the plan a visitor selected in a pricing summary.
The highlight signals relevance to the moment. If the text matters in every context, use strong. If it is a keyword that should simply stand out, use b. If you only want a colored background for design, use a CSS class.
A detail from the standard is easy to overlook: when mark appears inside a quotation, it means the highlight was added by the person quoting, not by the original author. Say so next to the quote, for example "highlight added", so readers do not think the original text was marked. You can also change the default yellow with background and color in CSS to match your design.
Live example
Edit the code and watch the preview.
<p>Search results for "pancake":</p>
<p>Our best <mark>pancake</mark> recipe uses buttermilk.</p>More examples
Highlight added to a quotation
A teacher quotes a passage and highlights the sentence the class will discuss. The note after the quote makes clear that the highlight was added and is not in the original.
<blockquote>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of <mark>having nothing to do</mark>.</p>
</blockquote>
<p><small>Highlight added.</small> Why do you think Alice feels bored?</p>Changed line in a code sample
In a tutorial, mark draws attention to the one line that changed from the previous step. A custom background replaces the default yellow, and the text explains the change too.
<p>Step 2: add a title to the head (highlighted).</p>
<pre><code><head>
<meta charset="utf-8">
<mark style="background:#ffe0b2"><title>My pancake page</title></mark>
</head></code></pre>Tip: mark shows relevance, like a search hit. Importance is strong.
Browser support
mark was introduced in HTML5 and is supported by all current browsers; Internet Explorer supported it from version 9. The default style is a yellow background with black text. See the mark element support table (opens in a new tab) for version details.
Accessibility
Screen readers often say nothing about mark. When the highlight carries meaning users need, add a text hint such as Highlighted: or a CSS ::before label (WCAG 1.4.1). Why color alone falls short is explained in the W3C note Understanding Use of Color (opens in a new tab).
Common mistakes
Wrong
<mark>Sale ends today!</mark>Right
<strong>Sale ends today!</strong>mark means contextual relevance. Importance is strong's job.
Frequently asked questions
When should I use the mark tag?
When text is highlighted for its relevance in the current context: the words matching a search query in the results, or a passage of a quote the author wants to point out. <mark> is no general-purpose way to make text yellow or important. Importance belongs to <strong>.
How do I change the highlight color of mark?
With CSS. Browsers give <mark> a yellow background and black text by default, and a rule like mark{background:#cde;color:#000} changes that. Keep the contrast between text and background at 4.5:1 or more for normal text, so highlighted words stay readable for everyone, users with low vision included. Background colors are covered in the Colors and Fonts lesson.