Highlighting Text with <mark>
Highlighting text for contextual relevance: mastering search query match highlights, user annotations, default user-agent behaviors, and accessible color contrast.
🎯 Learning Objectives
- Define the semantic purpose of
<mark>: denoting text highlighted for reference or contextual relevance. - Distinguish between
<mark>(relevance),<em>(linguistic stress), and<strong>(importance). - Inspect default browser styling and customize
<mark>for both light and dark themes. - Ensure accessible WCAG color contrast ratios when styling highlight backgrounds and foreground text.
- Build real-world search result snippets and highlighted document excerpts.
📖 Mental Model: The Search Query Highlighter
Imagine you search for the word "algorithm" in a 500-page encyclopedia. An automated assistant runs ahead with a neon yellow highlighter, marking every occurrence of "algorithm" on the page.
The original encyclopedia author didn't think those words were more important (<strong>) or say them with a stressed voice (<em>). The words are highlighted solely because they match your current search context. In HTML5, that is the exact purpose of <mark>.
1. Semantic Comparison: <mark> vs <em> vs <strong>
| Element | Primary Intent | Origin of Context | Example |
|---|---|---|---|
<mark> |
Relevance to the reader's current search query or active activity. | External / Reader-driven (e.g. search engine results, audio transcript sync). | Results for "css": Modern <mark>css</mark> layouts... |
<strong> |
Importance, seriousness, or urgency of the message. | Author-driven (e.g. system warnings, critical clauses). | <strong>Warning:</strong> Do not drink. |
<em> |
Linguistic stress altering the spoken meaning of a sentence. | Speaker / Author-driven vocal tone. | I <em>love</em> this song! |
2. The User-Agent Default & Dark Theme Contrast Trap
By default, browsers style <mark> with a bright yellow background:
/* Browser User-Agent Default */
mark {
background-color: yellow;
color: black;
}
If your website switches to dark mode and inverts text colors to white without resetting <mark>, white text on a bright yellow background creates an illegible contrast disaster. Always specify both background-color and color:
/* Accessible Theme-Aware Mark Styling */
mark {
background-color: #fef08a; /* Soft pastel yellow */
color: #713f12; /* High-contrast dark amber text (7:1 contrast ratio) */
padding: 0.1em 0.35em;
border-radius: 4px;
}
3. Interactive Search Engine Results Lab
Observe the simulated search query for "semantic html" below. Notice how matching terms are clearly highlighted with accessible, rounded <mark> badges.
🏋️ Hands-On Exercise: Marking Search Query Matches
- A user searched for the keyword
"password reset". - Wrap every occurrence of the phrase
"password reset"in the support FAQ with<mark>. - Add custom CSS to ensure the
<mark>has a pleasant teal background (#ccfbf1) and dark teal text (#115e59). - Click ▶ Run Code to verify the highlighted search preview.
⚠️ Pitfall: Using <mark> for Importance or Spoken Stress
Do not use <mark> when you want to express that a sentence is critical (use <strong>) or when you want to add spoken vocal stress (use <em>). <mark> is strictly for contextual relevance to the reader.
💡 Pro Tip: Announcing Highlights to Screen Readers
Assistive technologies can be informed of highlights by using CSS pseudo-elements:
mark::before { content: " [highlight start] "; clip: rect(0 0 0 0); position: absolute; }
mark::after { content: " [highlight end] "; clip: rect(0 0 0 0); position: absolute; }
📌 Key Takeaways
<mark>represents text highlighted for reference due to contextual relevance (such as search result matches).<mark>is reader-driven, whereas<strong>and<em>are author-driven.- Browsers apply a default yellow background; always define high-contrast colors for dark and light themes.
- Ideal for search engines, reading highlights, and synchronized audio/video transcripts.