HTML Grundlagen: Perfekte Textgestaltung – Nutze sub und sup zum Tiefstellen und Hochstellen von Text

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 Text tiefgestellt oder hochgestellt werden. Mit den beiden HTML Tags sub (für Englisch: Subscript) und sup (für Englisch: Superscript) kann tiefgestellter Text (z.B. H2O) bzw. hochgestellter Text (z.B. y = x2) formatiert werden. Für den Text in SUB und SUP verwenden die meisten Web-Browser die halbe Schriftgröße und die gleiche Schriftart wie für den übrigen Text.

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

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

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

Text hochstellen
Das HTML SUP-Tag zeichnet den Text als hochgestellt aus. Hochgestellter 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, wurde im Beispiel die maximale Breite des Absatzes mit CSS zusätzlich 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.

Einfache Formeln mit SUB und SUP erstellen

Wenn auf einer Webseite eine Formel angezeigt werden soll, wird dafür meist ein Bild verwendet, denn HTML hat sich nicht wirklich gut um Formelsatz gekümmert. Für einfache Formeln kann man aber auf Bilder verzichten. Man kann einfache Formeln auch mit den HTML Tags SUB und SUP erstellen. Beim Zoomen der Seite werden diese 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