HTML Grundlagen: Wie du mit sub und sup deinen Text perfekt tiefstellen oder hochstellen kannst

English

Text tiefstellen und hochstellen mit SUB und SUP

Die beiden HTML-Elemente SUB und SUP sind Inline-Elemente, die keinen automatischen Zeilenumbruch erzeugen.

Manchmal muss man Text tiefstellen oder hochstellen. Mit den beiden HTML-Tags SUB (für Englisch: Subscript) und SUP (für Englisch: Superscript) kann tiefgestellter Text (z.B. H2O) oder hochgestellter Text (z.B. y = x2) formatiert werden. Für den Text in SUB und SUP verwenden die meisten Browser die halbe Schriftgröße und die gleiche Schriftart wie für den übrigen Text.

Im Fließtext stört tiefgestellter oder hochgestellter Text den normalen Textfluss. Das kann man jedoch mit CSS wieder korrigieren.

Für hochgestellte und tiefgestellte Zahlen gibt es passende Unicode-Zeichen.

Text tiefstellen
SUB zeichnet einen Teil des Fließtextes als tiefgestellt aus. Der tiefgestellte Text wird mit <sub> eingeleitet und muss mit </sub> abgeschlossen werden. Das HTML SUB-Tag hat keine semantische Bedeutung.

Text hochstellen
SUP zeichnet einen Teil des Fließtextes als hochgestellt aus. Der hochgestellte Text wird mit <sup> eingeleitet und muss mit </sup> abgeschlossen werden. Das SUP-Tag hat genau wie das SUB-Tag keine semantische Bedeutung.

Beispiel

tiefgestellter Text mit <sub> bzw. hochgestellter Text mit <sup>

Mit klarem und azurblauem H<sub>2</sub>O auf einer Fläche von mehr als 50km<sup>2</sup> beeindruckt der See und die schneeweißen Segel der <b>Sunrise Aurora</b><sup>TM</sup> fallen sofort durch unterschiedliche Zeilenhöhen auf.

Um den störenden Effekt von SUB und SUP besser zu demonstrieren, wird im Beispiel die maximale Absatz-Breite mit CSS begrenzt.

Ausgabe des HTML Codes

Mit klarem und azurblauem H2O auf einer Fläche von mehr als 50km2 beeindruckt der See und die schneeweißen Segel der Sunrise Auror aTM fallen sofort durch unterschiedliche Zeilenhöhen auf.

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Einfache Formeln mit SUB und SUP erstellen

Möchte man auf einer Webseite eine Formel darstellen, so verwendet man dafür in der Regel eine Grafik, denn Formelsatz wird von HTML nicht wirklich unterstützt wird. Für einfache Formeln kann man aber auf Grafiken verzichten. Mit SUB und SUP kann man einfache Formeln erstellen. Beim Zoomen der Seite werden solche Formeln nicht unscharf oder pixelig.

Mit UTF-8 stehen für die Erstellung von Formeln viele unterschiedliche Sonderzeichen zur Verfügung.

Beispiel

Einfache Formeln erstellen mit <sub> und <sup>.

CO<sub>2</sub> + H<sub>2</sub>O ⇒ H<sub>2</sub>CO<sub>3</sub>
Ausgabe des HTML Codes
CO2 + H2O ⇒ H2CO3

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.