HTML hochgestellt und tiefgestellt formatieren

Erstellt man Webseiten bzw. Webseiteninhalte mit zum Beispiel Content Management Systemen (CMS, z.B. WordPress), kann es vorkommen, dass Texte bzw. Textteile tiefgestellt oder hochgestellt formatieren muss bzw. für die bessere Lesbarkeit möchte.

Anwendungsfälle

Zu den häufigsten Anwendungsfällen dürften hierbei Indizes, mathematische Formeln, chemische Formelzeichen oder Einheiten sein

• • Indizes: V_kritisch
  • Formel: f(x) = x⁵ – x⁴ = x⁴(x-1)
  • chemische Symbole: C₄H₆O₂ (Polyvinylacetat)
  • Einheiten: m⁴ (Flächenträgheitsmoment)

Hinweis: Für Quadratmeter (m²) und Kubikmeter (m³) also “hoch 2″ oder “hoch 3″ im Allgemeinen, braucht man keine speziellen HTML-Tags. Dafür gibt es entsprechende Unicode-Zeichen oder man verwendet einfach die Tastatur “Alt Gr + 2” für ² und “Alt Gr + 3” für ³.

Text hochstellen mit HTML-Tag <sup>

Wie kann man nun einen hochgestellten Text mittels HTML-Tags darstellen, wie zum Beispiel unsere Formel f(x) = x⁵ – x⁴ ? Dies macht man, indem man das HTML-Tag <sup> verwendet und darin alle Zeichen einbettet, die hochgestellt erscheinen sollen. Die beispielhafte Formel würde man dann wie folgt im HTML-Code schreiben:

f(x) = x<sup>5</sup> - x<sup>4</sup>

Text tiefstellen mit HTML-Tag <sub>

Will man tiefgestellten Text, z.B. einen Index, darstellen, dann verwendet man das HTML-Tag <sub>. Am Beispiel unserer oben genannten chemischen Formel für Polyvinylacetat (C₄H₆O₂) sieht der zugehörige HTML-Code dann wie folgt aus:

C<sub>4</sub>H<sub>6</sub>O<sub>2</sub>

Text tief- und hochstellen gleichzeitig

Oft kommt es bei Formeln auch vor, dass die einzelnen Formelzeichen und Variablen sowohl Indizes als auch hochgestellte Symbole haben, wie zum Beispiel ein wörtlich geschriebenes “x eins zum Quadrat”.

• x₁²

Das kann man ebenfalls über die oben genannten Tags entsprechend darstellen:

x<sub>1</sub><sup>2</sup>ddd

Für einfache kurze Darstellungen geht das, sieht aber nicht so toll wie aus einem Formeleditor aus. Sobald es etwas komplizierter oder komplexer wird mit der Formelwelt, empfiehlt es sich MathML, eine Markup Language zur Darstellung von Formeln, zu befassen.

Verwechslungsgefahr

Die beiden zu verwendenden HTML-Tags für hochgestellten und tiefgestellten Text sind sich zum Verwechseln ähnlich, da sie sich nur im letzten Buchstaben unterscheiden. Etwas leichter kann man es sich merken, wenn man die HTML-Tags als Abkürzung für die entsprechenden englischen Begriffe versteht bzw. sich merkt:

• superscript => sup => hochgestellt
• subscript => sub => tiefgestellt