mark, small, sub & sup

Four small elements that handle highlighter relevance, fine print, and the typographic positions above and below the baseline.

HTML5 min readConcept 11 of 42

What they are

<mark> highlights a run of text to show that it is relevant in the current context. The classic use is a search results page that bolds the query term inside each snippet. <mark> is not a synonym for <strong>: it does not signal importance, it signals relevance to whatever the reader is doing right now.

<small> carries text that is a side comment or fine print. License footers, copyright lines, legal caveats, and inline disclaimers all belong in <small>. It signals reduced importance in the document's voice, not a smaller font size for layout.

<sub> and <sup> position text below or above the baseline at a smaller size. <sub> is for subscripts: chemical formulas like H₂O, the base in logarithm notation. <sup> is for superscripts: mathematical exponents like x², ordinal suffixes like 1ˢᵗ, and footnote reference numbers.

Why it matters

<mark> can be announced by screen readers as highlighted text, which helps users who are scanning a page for search matches or annotations. Using a <span> with a yellow background looks the same visually but loses that announcement.

<sub> and <sup> exist because simulating superscript with a regular span and font-size: smaller; vertical-align: super requires CSS you have to maintain and rarely lands in exactly the right position. The elements encode the intent and let the browser handle the metrics, which matters especially inside flowing text.

How it works

<mark> renders with a browser-default yellow or orange highlight background. You can override the color with CSS background-color and color. Wrap only the specific run of text that is relevant, not the whole sentence.

<small> reduces the font size one step (to 0.8em by default) and signals fine-print semantics. It should wrap inline side comments, not whole paragraphs of legal text. Use it sparingly.

<sub> lowers the baseline and shrinks the text. <sup> raises it. Both adjust position and size automatically. Use them for content that is genuinely subscripted or superscripted, such as scientific notation or footnote markers, not for visual tricks. If you only want the look without the meaning, CSS vertical-align achieves it without the semantic overhead.

Try it

See <mark> highlight a search match, <small> render a copyright line, and <sub>/<sup> position the numbers in a formula and an exponent.

Results for <mark>flexbox</mark>
<small>© 2026 Code with
Animation</small>
<p>Water: H<sub>2</sub>O</p>
<p>Area: r<sup>2</sup></p>

<mark> search relevance

Results for flexbox

<small> fine print

© 2026 Code with Animation

<sub> and <sup>

Water: H2O

Area: r2

Highlight, fine print, subscript, superscript: each in its natural context.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1A search page wraps the user's query term inside each result snippet. Which element should wrap the matched text?
  2. 2Which of these belongs in a <small> element?
  3. 3You are writing the chemical formula for water. What markup is correct?

Remember this

  • <mark> highlights text that is relevant to the current context; it is not a synonym for <strong>.
  • <small> marks fine print and side comments; use CSS for font size changes that carry no semantic meaning.
  • <sub> lowers text below the baseline (H₂O); <sup> raises it above (x², footnote markers).
  • All four are inline elements; they affect only the text they wrap, not block layout.

Done with this concept?

Mark it complete to track your progress. No login needed.