mark

The mark element represents text highlighted for reference or notation purposes, with VB status variants for success, warning, and error states.

Description

The <mark> element represents text highlighted for reference due to its relevance in a particular context. VB styles it with a subtle background derived from var(--color-interactive) using relative oklch colors, plus padding-inline and border-radius for a polished highlight. Three status variants provide semantic color coding.

When to Use

  • Search results: Highlight matching search terms
  • Quotations: Mark parts of a quote that are particularly relevant
  • Status indicators: Build, test, security status badges
  • Comparisons: Highlight differences between items
  • User selections: Show text the user has bookmarked or selected

When NOT to Use

  • For semantic emphasis — use <strong> or <em>
  • For purely decorative highlighting — use CSS background-color
  • For inserted text — use <ins>

Examples

Status Variants

Class Background Use Case
(default) oklch(from var(--color-interactive) l c h / 0.2) Search highlights, general relevance
.success oklch(60% 0.18 145 / 0.2) (green) Passed, approved, complete
.warning oklch(75% 0.18 75 / 0.2) (amber) Partial, experimental, caution
.error oklch(55% 0.2 25 / 0.2) (red) Failed, vulnerabilities, errors

CSS Reference

The default highlight uses relative oklch color derived from the theme's interactive color, so it adapts automatically to each theme. The status variants use fixed oklch values at 20% opacity for consistent, transparent overlays.

Highlight Effect

VB's data-effect="highlight" provides an animated version of mark-style highlighting that draws in on scroll. This is a CSS animation, not the <mark> element — but they share the same visual language.

Accessibility

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

Adding Screen Reader Context

For status variants, add a visually-hidden label so screen readers announce the state:

Related

  • <strong> — For semantic importance (not visual highlighting)
  • <em> — For semantic emphasis
  • <b> — Draw attention without importance
  • <ins> — For inserted text (similar appearance, different meaning)
  • <del> — For deleted text (often paired with <ins>)
↑