Text

Inline formatted elements

Published on

Description

Inline formatting elements convey meaning through text-level semantics. Elements like <mark>, <del>, <ins>, and <s> communicate editorial changes and highlights.

Example

Open in new tab
View HTML markup 
  <div style="column-width:20ch">
  <p><time datetime="2025-05-01">May 1, 2025</time></p>
  <p><data value="1000.99">1,000.99</data></p>
  <p><data value="1048576">1 MB</data></p>
  <p><data value="metadata-value">Metadata label</data></p>
</div>

Accessibility

  • Most screen readers do not announce <mark>, <del>, <ins>, or <s> by default. Use CSS-generated content with ::before/::after pseudo-elements to provide screen reader announcements.
  • Highlighted text (<mark>) needs 3:1 contrast for the highlight block and 4.5:1 for text within. Do not rely on color alone for distinction.
  • Use visually-hidden ::before/::after content (e.g. "[start deletion]"/"[end deletion]") to announce editorial marks to assistive technology.
  • Support Windows High Contrast Mode with system color keywords.

References

Variables

None for inline elements