<sub>

Zuletzt aktualisiert am 4. Februar 2026

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.

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: sub statt <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

Chemische Formeln

Der 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>

Mathematische Indizes

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>

Variablen mit Indizes

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

• 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>O schreibe 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-height helfen, den Abstand gleichmäßig zu halten.

Häufige Fehler

• 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: smaller statt <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. Schreibe x<sub>n+1</sub>, nicht x<sub>n</sub>+<sub>1</sub>.

Browser-Kompatibilität

Das sub-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Du kannst es bedenkenlos einsetzen.

Email-Kompatibilität

Das sub-Element wird in den meisten Email-Clients korrekt tiefgestellt dargestellt.

Verwandte Elemente