HTML Grundlagen: Was ist der Unterschied zwischen <sub> und <sup>

Text tiefstellen und hochstellen mit SUB und SUP

Manchmal muss Text hochgestellt oder tiefgestellt werden. Mit den beiden HTML Tags SUB und SUP kann tiefgestellter Text (wie für H2O) oder hochgestellter Text (wie für y = x2) formatiert werden. Für Text in SUB und SUP benutzen die meisten Web-Browser die halbe Schriftgröße und die gleiche Schrift wie für den Rest des Textes.

HTML <sub> TagDas HTML SUB Tag (sub für Englisch »subscript«) zeichnet einen Teil des Fließtextes als tiefgestellt aus. Tiefgestellter Text wird mit <sub> eingeleitet und muss mit </sub> abgeschlossen werden. SUB hat keine semantische Bedeutung.

HTML <sup> TagDas HTML SUP Tag (sup für Englisch »superscript«)/ zeichnet einen Teil des Fließtextes als Hochgestellt aus. Hochgestellter Text wird mit <sup> eingeleitet und muss mit </sup> abgeschlossen werden. SUP hat keine semantische Bedeutung.

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

Im Fließtext stören Zeilen mit SUB und/oder SUP den normalen Textfluss. Das kann mit CSS korrigiert werden.

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 die maximale Breite des Absatzes 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 AuroraTM 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. Einfache Formeln kann man auch mit den HTML Tags SUB und SUP erstellen. Beim Zoomen der Seite werden die erstellten Formeln nicht unscharf oder pixelig.

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

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

Gestalte die HTML Tags <sub> und <sup> mit CSS entsprechend deinen Wünschen.