mark

The mark element represents text highlighted for reference or notation purposes, typically displayed with a yellow background like a highlighter pen.

Description

The <mark> element represents text that is marked or highlighted for reference purposes due to its relevance in a particular context. The most common use is highlighting search terms in results, but it can also indicate text relevant to the user's current activity.

Semantic Meaning

The mark element conveys that text has special relevance:

  • Indicates text highlighted for the user's attention
  • Screen readers may announce "highlight" or similar to indicate marked content
  • Distinguishes content that's relevant to the current context
  • Not for stylistic highlighting - use CSS for that

When to Use

  • Search results: Highlight matching search terms
  • Quotations: Mark parts of a quote that are particularly relevant
  • User selections: Show text the user has selected or bookmarked
  • Important information: Draw attention to key points
  • Comparisons: Highlight differences between items

When NOT to Use

  • Emphasis: Use <strong> or <em> for semantic emphasis
  • Purely decorative: Use CSS background-color for styling only
  • Code syntax: Use proper code highlighting libraries

Variants

Default

Standard yellow highlight, like a highlighter pen.

Search results: The progressive enhancement approach.

<mark>progressive</mark>

.success

Green highlight for positive or successful content.

Status: Passed all tests

<mark class="success">Passed all tests</mark>

.warning

Orange/amber highlight for warnings or cautions.

Note: This feature is experimental

<mark class="warning">This feature is experimental</mark>

.error

Red highlight for errors or critical information.

Error: Invalid input detected

<mark class="error">Invalid input detected</mark>

Live Examples

Search Results

Found 3 results for "progressive enhancement":

  • Progressive enhancement is a design philosophy...
  • Learn about progressive web apps and enhancement techniques...
  • The progressive enhancement approach starts with HTML...

Relevant Quote Section

The web is not a platform. It's a continuum of devices and capabilities. Design for the edges, and the middle will take care of itself.

Status Variants

Build status: Passing

Browser support: Partial

Security scan: Vulnerabilities found

Comparison Highlighting

Feature Plan A Plan B
Storage 10 GB 50 GB
Users 5 Unlimited
Support Email 24/7 Phone

Multiple Highlights in Text

When reviewing code, watch for security issues, performance concerns, and best practices.

Interactive Search Demo

Original text: "The quick brown fox jumps over the lazy dog."

Search for "the": "The quick brown fox jumps over the lazy dog."

CSS Properties

Variant Background Color
Default Browser default yellow (typically #ff0 or similar)
.success oklch(60% 0.18 145 / 0.2) (green)
.warning oklch(75% 0.18 75 / 0.2) (amber)
.error oklch(55% 0.2 25 / 0.2) (red)

Accessibility

  • Screen reader support: Some screen readers announce marked text, though support varies
  • Color alone: Don't rely solely on highlight color to convey meaning - add text labels for variants
  • High contrast: Ensure sufficient contrast between highlighted text and background
  • Context: Provide context for why text is highlighted (e.g., "Search results for...")

Improving Screen Reader Announcements

For critical highlighted content, consider adding visually hidden context:

Status: Invalid input detected

<mark class="error"> <span class="visually-hidden">Error: </span> Invalid input detected </mark>

Related Elements

  • <strong> - For semantic importance (not visual highlighting)
  • <em> - For semantic emphasis
  • <ins> - For inserted text (similar appearance but different meaning)