HTML <mark> Element: Shine a Light on Key Text
Sometimes, you want to draw the reader’s eye to something important — a keyword, a match, a standout term. The <mark> element lets you do just that. It gives text semantic emphasis and visual highlighting, especially useful for search interfaces and annotations.
What Is the <mark> Element?
The <mark> element highlights text that is relevant to a user’s current action or context — like search results or selected keywords. By default, browsers render it with a yellow background, similar to a highlighter pen.
Basic Syntax
<p>My favorite fruit is <mark>banana</mark>. I eat one every day!</p>
My favorite fruit is banana. I eat one every day!
The word "banana" stands out visually — and semantically.
Common Use Cases
- Highlighting search result matches
- Annotating or emphasizing passages in a document
- Marking important changes or new content
- Temporarily drawing attention to key phrases
Example: Search Results Page
<p>Search results for “apple”:</p>
<p>The <mark>apple</mark> is sweet and crisp.</p>
Search results for “apple”:
The apple is sweet and crisp.
Example: Contextual Highlight in an Article
<article>
<h2>Benefits of Cherries</h2>
<p>Cherries are <mark>rich in antioxidants</mark> and help reduce inflammation.</p>
</article>
Styling with CSS
The <mark> tag comes with default yellow background styling, but you can customize it with CSS:
mark {
background-color: #ffe066;
padding: 0.1em 0.3em;
border-radius: 4px;
}
Accessibility and Semantics
Screen readers may announce <mark> with emphasis or a tonal cue. Use it only when you want to highlight text that has a reason for standing out in the current context — not just to make something look yellow.
Best Practices
- Use
<mark>to highlight relevant user-focused text - Avoid using it purely for visual effect —
<strong>or<em>might be better for emphasis - Keep highlights short and context-aware
Summary
The <mark> element helps you highlight what matters — whether it’s a fruit name in a recipe search or a key update in your blog. You’ve now learned how to:
- Use
<mark>for semantic text highlighting - Support search, annotation, and real-time emphasis
- Style it with CSS and keep it accessible
What’s Next?
Next, we’ll wrap up with a review of how semantic HTML improves structure, accessibility, and SEO — bringing it all together for better web design.
