<sub>
Das <sub>-Element stellt Text tiefgestellt dar, also etwas unterhalb der normalen Textlinie und in einer kleineren Schriftgröße. Der häufigste Anwendungsfall sind chemische Formeln wie H₂O oder CO₂, aber auch mathematische Indizes und Fußnotenzeichen. Wichtig: <sub> ist nicht nur visuelles Styling, sondern hat eine semantische Bedeutung. Es sagt aus, dass der tiefgestellte Text in einem bestimmten fachlichen Zusammenhang steht. Auf dieser Seite lernst du, wann <sub> die richtige Wahl ist und wann du stattdessen CSS verwenden solltest.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 4 von 5
- Stand
- 04.02.2026
Grundlagen
Tiefgestellter Text begegnet dir vor allem in wissenschaftlichen und mathematischen Kontexten. In der Chemie werden Atomanzahlen tiefgestellt geschrieben (H₂O), in der Mathematik Indizes (a₁, x₀) und in Texten manchmal Fußnotennummern. Für all diese Fälle ist <sub> gedacht.
<sub>ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch- Browser stellen
<sub>standardmäßig tiefgestellt und kleiner dar (vertical-align: sub; font-size: smaller) - Die semantische Bedeutung: Der tiefgestellte Text steht in einem fachlichen Zusammenhang: Er ist nicht nur kleiner, sondern hat eine bestimmte Rolle (z.B. als chemischer Index)
- Typische Anwendungsfälle: Chemische Formeln (H₂O, CO₂), mathematische Indizes (a₁, x₀), Fußnotenzeichen
- Wenn du Text nur visuell tiefstellen willst, ohne dass es eine fachliche Bedeutung hat, verwende CSS
vertical-align: substatt<sub> <sub>kann den Zeilenabstand beeinflussen: Bei mehreren tiefgestellten Texten in einem Absatz kann das Layout unruhig wirken
Syntax
<p>Die chemische Formel von Wasser ist H<sub>2</sub>O.</p>Beispiele
3 BeispieleDer klassische Anwendungsfall: In chemischen Formeln werden die Anzahlen der Atome tiefgestellt geschrieben. Das ist nicht nur eine visuelle Konvention, sondern hat eine fachliche Bedeutung, deshalb ist <sub> hier die richtige Wahl:
<p>Wasser: H<sub>2</sub>O</p>
<p>Kohlenstoffdioxid: CO<sub>2</sub></p>
<p>Schwefelsäure: H<sub>2</sub>SO<sub>4</sub></p>
<p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>In der Mathematik werden Variablen oft mit tiefgestellten Indizes versehen, um verschiedene Werte der gleichen Variable zu unterscheiden:
<p>Die Folge beginnt mit a<sub>0</sub>, a<sub>1</sub>, a<sub>2</sub>, ...</p>
<p>Berechnung: x<sub>n+1</sub> = x<sub>n</sub> + d</p>In technischen Texten oder Dokumentationen werden oft Variablen mit tiefgestellten Indizes verwendet, um verschiedene Zustände oder Zeitpunkte zu unterscheiden:
<p>Die Geschwindigkeit ändert sich von v<sub>0</sub> = 0 m/s
auf v<sub>1</sub> = 9,81 m/s.</p>
<p>Temperatur: T<sub>innen</sub> = 22 °C, T<sub>außen</sub> = 5 °C</p>Barrierefreiheit
3 Punkte- Screenreader-Verhalten: Die meisten Screenreader ignorieren
<sub>und lesen den Text in normaler Position vor. Ein Screenreader liest “H2O” als “H 2 O”, nicht als “H tiefgestellt 2 O”. Das ist in den meisten Fällen kein Problem, da der Kontext (z.B. “chemische Formel”) die Bedeutung klarstellt. - Kontext bieten: Wenn die Tiefstellung für das Verständnis entscheidend ist, ergänze einen erklärenden Text. Statt nur
H<sub>2</sub>Oschreibe z.B. “Wasser (H₂O)”, damit auch Screenreader-Nutzer den Zusammenhang verstehen. - Zeilenabstand beachten: Tiefgestellter Text kann den Zeilenabstand beeinflussen und das Layout unruhig wirken lassen. Bei vielen tiefgestellten Stellen in einem Absatz kann CSS
line-heighthelfen, den Abstand gleichmäßig zu halten.
Häufige Fehler
3 Punkte-
sub statt CSS für reines Styling: Wenn du Text nur visuell tiefstellen willst (z.B. für ein Design-Element), verwende CSS
vertical-align: sub; font-size: smallerstatt<sub>. Das<sub>-Element hat eine semantische Bedeutung und sollte nur für fachlich tiefgestellten Text verwendet werden. -
sub mit sup verwechseln: Chemische Indizes sind tiefgestellt (
<sub>), mathematische Potenzen sind hochgestellt (<sup>). H₂O verwendet<sub>, E=mc² verwendet<sup>. Verwechsle die beiden nicht, das wäre inhaltlich falsch. -
Fehlende Klammern bei komplexen Indizes: Bei mathematischen Ausdrücken wie x₍ₙ₊₁₎ vergisst man leicht, den gesamten Index in ein einziges
<sub>-Element zu packen. Schreibex<sub>n+1</sub>, nichtx<sub>n</sub>+<sub>1</sub>.
Browser-Kompatibilität
5 von 5Das sub-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Du kannst es bedenkenlos einsetzen.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
4 von 5Das sub-Element wird in den meisten Email-Clients korrekt tiefgestellt dargestellt.
-
Apple Mail
Komplett
-
Gmail
Komplett
-
Outlook
Teilweise
Ältere Versionen können die Baseline-Ausrichtung leicht abweichend darstellen
-
Thunderbird
Komplett
-
Yahoo Mail
Komplett
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da