sub stellt Text tief, sup stellt ihn hoch. Beide sind keine Gestaltungswerkzeuge: Sie gehören dorthin, wo die Stellung zur Schreibweise gehört und ihre Änderung die Bedeutung verändern würde.

Die klaren Fälle

<p>Wasser ist H<sub>2</sub>O,
   Kohlendioxid ist CO<sub>2</sub>.</p>

<p>Die Fläche beträgt 25 m<sup>2</sup>,
   der Wert liegt bei 3&nbsp;&times;&nbsp;10<sup>8</sup>.</p>

H2O ohne Tiefstellung ist eine andere Schreibweise als H₂O – deshalb gehört die Auszeichnung hierher und nicht in ein Stylesheet.

Fußnoten

<p>Die Regel gilt seit 2019.<sup><a href="#fn1" id="fnref1">1</a></sup></p>

<section>
  <h2>Anmerkungen</h2>
  <ol>
    <li id="fn1">Vereinbarung vom 28. Mai 2019.
        <a href="#fnref1">Zurück zum Text</a></li>
  </ol>
</section>

Der Rückverweis ist der Teil, der meistens fehlt. Ohne ihn kommt niemand, der mit der Tastatur navigiert, an die Stelle zurück, an der er den Text verlassen hat.

Wofür sie nicht gedacht sind

Ordnungszahlen im Deutschen werden nicht hochgestellt – „1." bleibt „1.". Marken- und Warenzeichen sind ein Grenzfall: Die Hochstellung ist typografische Konvention, keine Bedeutungsfrage, und lässt sich ebenso über CSS lösen.

Auch für rein optische Verschiebungen sind beide Elemente falsch. Dafür gibt es in CSS vertical-align zusammen mit einer kleineren Schriftgröße.

Ein Hinweis zur Lesbarkeit

Browser verkleinern tief- und hochgestellten Text deutlich. Bei ohnehin kleiner Grundschrift wird das schnell unlesbar. Eine Untergrenze in CSS hilft:

sub, sup { font-size: 0.75em; }

Zusätzlich vermeidet die Angabe, dass verschachtelte Hochstellungen immer kleiner werden – ein Effekt, der bei mathematischen Ausdrücken schnell auftritt.