Live Preview
Default yellow highlight styling:
This paragraph contains some important information you should notice.
HTML <mark> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll highlight relevant text with <mark> for search results, references, and contextual emphasis.
Core Syntax
Wrap highlighted words in <mark> tags.
Semantic Meaning
Mark text relevant in the current context.
Search Results
Highlight matched query terms.
mark vs strong
Highlight vs importance — know the difference.
CSS Styling
Customize highlight colors with CSS.
Best Practices
Use sparingly for meaningful highlights.
Fundamentals
What Is the <mark> Tag?
The mark element (<mark>) represents text highlighted for reference or relevance in the current context — like a highlighter pen on a page. It is most commonly used for search query matches, quoted passages, or text a user should notice.
Not the same as bold or strong
<mark> means “this text is relevant here” (e.g. a search match). <strong> means “this text is important.” Use the right tag for the right purpose.
Browsers typically render <mark> with a yellow background by default, making highlighted words stand out visually without changing document structure.
Foundation
📝 Syntax
Wrap the text you want to highlight between opening and closing <mark> tags:
syntax.html
<mark>Your highlighted text here</mark>Syntax Rules
<mark>requires both opening and closing tags.- Use inside phrasing content: paragraphs, headings, list items, etc.
- Do not nest mark inside mark unnecessarily.
- Style with CSS via
classor themarkselector.
Cheat Sheet
⚡ Quick Reference
| Pattern | Code Snippet | Result |
|---|---|---|
| Basic highlight | <mark>text</mark> | text |
| In paragraph | <p>Some <mark>word</mark></p> | Some word |
| Search match | <mark>query</mark> | Highlighted term |
| Custom class | <mark class="accent"> | accent |
| Default style | Browser default | Yellow background |
| Attributes | Global only | class, id |
Comparison
⚖️ <mark> vs <strong>
| Tag | Meaning | Best for |
|---|---|---|
<mark> | Relevant / referenced text | Search matches, quoted highlights |
<strong> | Strong importance | Warnings, key instructions |
<em> | Emphasized stress | Tone change when spoken |
<b> | Stylistic bold | Visual weight without semantics |
Comparison
⚖️ Semantic <mark> vs <span>
| Approach | Markup | Notes |
|---|---|---|
| Semantic highlight | <mark>term</mark> | Correct for relevance |
| Styled span | <span style="background:yellow"> | Avoid — no semantic meaning |
| Screen readers | May announce as highlighted | Only with mark |
Reference
🧰 Attributes
The <mark> element has no unique attributes — only global attributes apply:
class GlobalApply custom highlight colors or styles via CSS classes.
class="search-hit"id GlobalUnique identifier for scripting or linking to a highlighted passage.
id="highlight-1" mark-in-paragraph.html
<p>This paragraph contains some <mark>important</mark> information.</p>Hands-On
Examples Gallery
Basic highlights, instructional emphasis, and search result patterns.
Highlight Important Information
Wrap key words inside a paragraph with <mark>.
basic-mark.html
<p>This paragraph contains some <mark>important</mark> information.</p>📚 Common Use Cases
Use <mark> for search result query highlighting, referenced quotes, study notes, documentation cross-references, and any text that is relevant because of the user’s current context.
Instructional Highlight
Draw attention to a specific word in instructions or warnings.
instruction-mark.html
<p>Make sure to pay <mark>attention</mark> to the following instructions.</p>Search Results Highlight
The classic use case — wrap matched search terms in <mark>.
search-mark.html
<p>Search results for "<mark>web development</mark>" include various tutorials and resources.</p>Design
Styling <mark> with CSS
Override the default yellow highlight or create themed variants:
background Highlight colorcolor Text contrastpadding Inner spacingborder-radius Rounded highlights mark-styles.css
/* Default override */
mark {
background: #fef08a;
color: #0f172a;
padding: 0.1rem 0.25rem;
border-radius: 3px;
}
/* Search hit variant */
mark.search-hit {
background: #fde68a;
color: #78350f;
}
/* Blue accent variant */
mark.accent {
background: #bfdbfe;
color: #1e3a8a;
}Custom highlight variants
Default: highlight · Search: query · Accent: note
A11y
♿ Accessibility
Use <mark> thoughtfully for inclusive content:
- Use for relevance — mark indicates text highlighted because of context, not arbitrary decoration.
- Ensure contrast — custom highlight backgrounds must meet WCAG contrast ratios with the text color.
- Do not overuse — too many highlights reduce scannability for all users.
- Prefer mark over styled spans — semantic markup helps assistive technology convey purpose.
🧠 How <mark> Works
1
Author wraps relevant text
Place <mark> around words that are relevant in context.
Markup
2
Browser applies highlight
Default yellow background makes the text visually distinct.
Rendering
3
CSS can customize appearance
Override colors, padding, and border-radius for themed highlights.
Styling
=
Scannable, relevant content
Users quickly spot search matches and referenced passages.
Compatibility
Universal Browser Support
The <mark> element is an HTML5 semantic tag with full support in all modern browsers and Internet Explorer 9+.
Baseline · HTML5
Text highlighting that works everywhere
From IE9 to the latest mobile browsers — mark renders with a visible highlight in every environment.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 9+ · Yellow highlight
Full supportOpera All modern versions
Full support<mark> tag 100% supported
Bottom line: Use <mark> confidently for semantic text highlighting in every production environment today.
Wrap Up
Conclusion
The <mark> tag is a simple, semantic way to highlight text that is relevant in the current context — especially search query matches and referenced passages.
Use it instead of styled spans, distinguish it from <strong> for importance, and customize the appearance with CSS when the default yellow is not enough.
Pro Tips
💡 Best Practices
✅ Do
- Use
markfor search matches and references - Keep highlights relevant to the current context
- Ensure sufficient color contrast with CSS
- Use
strongwhen meaning importance, not highlight
❌ Don’t
- Highlight entire paragraphs with mark
- Use mark as a generic yellow background
- Replace
strongoremwith mark - Over-highlight — it loses meaning
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <mark>
Bookmark these before you highlight text on your pages.
6
Core concepts 01
Highlighter Tag
<mark> highlights relevant text.
02
Search Results
Classic use: wrap matched query terms.
Use case 03
Not strong
Highlight ≠ importance.
Comparison 04
Yellow Default
Browsers render a highlighter style.
Rendering 05
CSS Custom
Override colors with CSS classes.
Styling 06
Universal Support
HTML5 tag — IE9+ and all modern browsers.
Compatibility❓ Frequently Asked Questions
It highlights text that is relevant or referenced in the current context, such as search query matches.
mark = highlighted for relevance. strong = important or urgent. Different semantic meanings.No unique attributes. Only global attributes like
class and id apply.Most browsers use a yellow background with dark text, like a highlighter marker.
Yes. Style
mark or mark.classname with CSS background and color properties.Yes. Full support in all modern browsers and Internet Explorer 9 and later.
Practice Text Highlighting
Try basic highlights, instructions, and search results in the interactive editor.
About the author
6 people found this page helpful