The Small Text Elements: mark, small, del, ins, sub and sup

Concept

Beyond the four emphasis elements sits a group of narrow, single purpose text elements. Each is easy to reproduce with CSS and each carries meaning that CSS cannot. Learning them takes ten minutes and removes a great many pointless span elements from your markup.

mark

Marks text as relevant to the reader right now in a context they brought with them. The classic case is a search result page, where the query terms are highlighted in each snippet.

<p>Showing results for <strong>monsoon</strong>:</p>
<p>The <mark>monsoon</mark> arrives on the coast in early June.</p>

The default rendering is a yellow highlight. It is not for permanent emphasis in an article - that is strong or em. The distinction is whose emphasis it is: mark is the reader looking for something, strong is the author saying something matters.

small

Side comments and fine print: copyright lines, legal disclaimers, licensing notes, attribution. It does not mean smaller text; it means this is a secondary remark.

<footer>
  <p><small>Prices include tax. Delivery charges apply outside city limits.</small></p>
</footer>

Use it for a sentence or a phrase, never for a whole article you happen to want in a smaller size.

del and ins

A matched pair for tracked edits: del is content removed from the document, ins is content added. Both accept two useful attributes: datetime for when the edit happened, and cite for a URL explaining why.

<p>
  The workshop runs on
  <del datetime="2026-04-02T09:00">12 April</del>
  <ins datetime="2026-04-02T09:00" cite="/notices/reschedule">19 April</ins>.
</p>

Browsers draw del struck through and ins underlined. Both are announced by screen readers as an edit, which is exactly why they beat a CSS class: the reader is told the date changed rather than being shown two dates and left to work it out.

A note on price displays. A struck out original price beside a sale price is a common use, but strictly the old price was not deleted from the document, and an underlined new price is easily mistaken for a link. Marking prices up as s for the old and plain text for the new is often clearer.

s

Content that is no longer accurate or no longer relevant, but which was not edited out. Sold out items, expired offers, a cancelled session.

<p><s>Early bird tickets - 400 rupees</s> Sold out.</p>

sub and sup

Subscript sits below the baseline, superscript above it. They are typographic requirements, not decoration, so the markup is required for the text to be correct.

<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
<p>The area of the field is 240 m<sup>2</sup>.</p>
<p>This claim is disputed.<sup><a href="#note-3">3</a></sup></p>
<p>Meet on the 3<sup>rd</sup> floor.</p>

Footnote markers, ordinal suffixes, chemical formulae, mathematical exponents and variable indices are the whole list. Anything else that merely needs raising or lowering is a CSS job.

Example

<article>
  <h2>Rainfall readings</h2>

  <p>
    The gauge recorded 84 mm on the 2<sup>nd</sup>, the highest single day
    total this <mark>monsoon</mark>.
  </p>

  <p>
    Total for the season:
    <del datetime="2026-08-11T18:30">612 mm</del>
    <ins datetime="2026-08-11T18:30">648 mm</ins>
  </p>

  <p><small>Readings from the district station, corrected weekly.</small></p>
</article>

Important rules

• All of these are inline elements.
• del and ins are unusual: they may wrap either inline content or whole blocks, so an entire removed section can be marked at once.
• datetime on del and ins follows the standard date and time format, so it is machine readable.
• mark is about the reader, strong is about the author. That is the whole difference.
• sub and sup reduce font size by default, which can push text below a comfortable reading size on a phone. Check it.

Common mistakes

• Using small to shrink a block of body copy. Set a font size in CSS instead.
• Using mark as a general highlighter throughout an article, which drowns out its meaning.
• Using sup for a trademark symbol when the character itself already exists and is announced correctly.
• Striking text through with CSS when del or s would tell the reader why it is struck through.
• Confusing del with s. Deleted means edited out of the document; struck through means no longer accurate.

Best practices

• Reach for the specific element before reaching for a span and a class. It costs nothing and adds meaning.
• Always give del and ins a datetime when the date is known.
• Keep small to a phrase or a sentence.
• When a struck out price must be understood, add visible text such as was and now rather than relying on the strike through alone.
• Check that superscript footnote markers are still large enough to tap on a phone.

Practice

1. Mark up a search result snippet where the query was ticket refund, highlighting both words.
2. Write a corrected sentence using del and ins with a datetime on each, then listen to how it is announced with a screen reader.
3. Mark up: The reaction produces CO2 and H2O at 25 degrees. with the correct elements.
4. Explain the difference between s and del using a shop listing as the example.