mark, sub and sup
A few elements exist for very specific jobs: highlighting a match, writing a chemical formula, showing an exponent or a footnote number. They are small, but using them correctly makes text precise instead of approximate.
The rule
mark shows relevance right now; sub and sup move characters that mean something.
<mark> highlights text because it is relevant in the current context, like a highlighter pen on a printed page. The classic use is showing search matches:
<p>Results for "monsoon": The <mark>monsoon</mark> reaches Kerala in early June.</p>mark is not "important" (that is strong) and not "stressed" (that is em). It says "look here, this is what you are after".
<sub> lowers text below the baseline: subscript. <sup> raises it: superscript. Use them when the position is part of the meaning.
<p>Water is H<sub>2</sub>O.</p>
<p>The area is 25 m<sup>2</sup>.</p>
<p>E = mc<sup>2</sup></p>
<p>This claim needs checking.<sup><a href="#note-1">1</a></sup></p>Without sub, "H2O" would be a different, looser notation. Without sup, "m2" does not mean square metres to a careful reader. Footnote markers are also commonly written with sup.
Do not use sub or sup just to make text smaller or shift it for decoration; that is a job for CSS.
The shortcut
Ask one question for each: "If I moved or unhighlighted this, would the meaning change?"
The 2 in CO2
In a chemical formula the 2 belongs below the line.
CO<sub>2</sub>.
The trap is using mark as a general highlighter for important text. If it is important everywhere, not just in this context, it is strong.
All three are inline elements, so they sit inside a paragraph, heading or list item and never start a new line. sub and sup can also hold more than one character, such as x<sup>n+1</sup> for a longer exponent. For heavy mathematics, dedicated tools like MathML exist, but for a unit, a formula or a footnote number these two are exactly right.
Drills
Answer fast — trust the rule.
How do you write the formula for carbon dioxide correctly?
Which element fits the "3" in "x cubed" written as a power?
A document viewer highlights every place the word "invoice" appears after you search for it. Which element fits?
A heading says "Final notice" and must stand out as urgent on every visit. Should you use <mark>?
Remember
mark= relevant in this context;sub= lowered,sup= raised, when position carries meaning.- Shortcut: would moving or unhighlighting it change the meaning? If not, it is CSS.
- Trap:
markfor general importance;sub/supfor decoration.