Das -Element stellt Text hochgestellt dar, also etwas oberhalb der normalen Textlinie und in einer kleineren Schriftgröße. Typische Anwendungsfälle sind mathematische Potenzen (E=mc²), Fußnotenzeichen, Ordnungszahlen und Trademark-Symbole (™). Genau wie  ist  nicht nur visuelles Styling, sondern transportiert eine semantische Bedeutung: Der hochgestellte Text steht in einem fachlichen Zusammenhang. Auf dieser Seite lernst du, wann  die richtige Wahl ist und worin der Unterschied zu CSS vertical-align: super liegt.

Steckbrief

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 04.02.2026

Grundlagen

Hochgestellter Text begegnet dir vor allem in mathematischen, wissenschaftlichen und typografischen Kontexten. Potenzen werden hochgestellt (x²), Fußnoten werden als hochgestellte Ziffern dargestellt und Markenzeichen wie ™ oder ® stehen traditionell hochgestellt. Für all diese Fälle ist  gedacht.

 ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser stellen  standardmäßig hochgestellt und kleiner dar (vertical-align: super; font-size: smaller)
Die semantische Bedeutung: Der hochgestellte Text steht in einem fachlichen Zusammenhang: Er ist nicht nur höher positioniert, sondern hat eine bestimmte Rolle (z.B. als Exponent oder Fußnote)
Typische Anwendungsfälle: Mathematische Potenzen (x², 10³), Fußnotenzeichen (¹, ², ³), Ordnungszahlen (1st, 2nd), Markenzeichen (™, ®)
Wenn du Text nur visuell hochstellen willst, ohne dass es eine fachliche Bedeutung hat, verwende CSS vertical-align: super statt 
Wie  kann auch  den Zeilenabstand beeinflussen: Bei mehreren hochgestellten Texten in einem Absatz kann das Layout ungleichmäßig wirken

Syntax

index.html

Grundsyntax

<p>Einsteins berühmte Formel: E = mc<sup>2</sup></p>

Beispiele

3 Beispiele

Der häufigste Anwendungsfall: In der Mathematik werden Exponenten hochgestellt geschrieben. Das ist eine fachliche Konvention, die  perfekt abdeckt:

index.html

Mathematische Potenzen

<p>Fläche eines Kreises: A = πr<sup>2</sup></p>
<p>Volumen eines Würfels: V = a<sup>3</sup></p>
<p>Wissenschaftliche Notation: 6,022 × 10<sup>23</sup></p>

Fußnotenzeichen werden traditionell als kleine hochgestellte Ziffern dargestellt. In Kombination mit einem Anker-Link kann der Leser direkt zur Fußnote springen:

index.html

Fußnoten

<p>
  Die erste Webseite ging 1991 online<sup><a href="#fn1" id="ref1">[1]</a></sup>
  und war auf einem NeXT-Computer gehostet<sup><a href="#fn2" id="ref2">[2]</a></sup>.
</p>
<hr />
<p><small id="fn1">[1] Tim Berners-Lee, CERN <a href="#ref1">↩</a></small></p>
<p><small id="fn2">[2] info.cern.ch, der erste Webserver <a href="#ref2">↩</a></small></p>

Trademark- und Registered-Symbole werden traditionell hochgestellt dargestellt. In der Praxis verwenden viele Webseiten dafür die Unicode-Zeichen ™ und ®, aber  ist eine valide Alternative, besonders wenn du die Größe und Position per CSS steuern willst:

index.html

Markenzeichen

<p>Acme Corp<sup>™</sup> | Qualität seit 1990</p>
<p>Registered Brand<sup>®</sup></p>
<p>Copyright<sup>©</sup> 2026 Meine Firma</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: Die meisten Screenreader ignorieren  und lesen den Text in normaler Position vor. “E=mc²” wird als “E gleich m c 2” vorgelesen. Das ist in den meisten Fällen akzeptabel, da der Kontext die Bedeutung klarstellt.
Fußnoten als Links: Wenn Fußnotenzeichen als klickbare Links umgesetzt werden (<a href="#fn1">[1]</a>), profitieren Screenreader-Nutzer davon, weil sie direkt zur Fußnote navigieren können. Vergiss nicht, auch einen Zurück-Link in der Fußnote bereitzustellen.
Zeilenabstand beachten: Hochgestellter Text kann den Zeilenabstand beeinflussen. Bei vielen hochgestellten Elementen in einem Text kann CSS line-height helfen, den Abstand gleichmäßig zu halten.

Häufige Fehler

3 Punkte

sup statt CSS für reines Styling: Wenn du Text nur visuell hochstellen willst (z.B. für ein Design-Element), verwende CSS vertical-align: super; font-size: smaller statt . Das -Element hat eine semantische Bedeutung und sollte nur für fachlich hochgestellten Text verwendet werden.
sup und sub verwechseln: Mathematische Potenzen sind hochgestellt (), chemische Indizes sind tiefgestellt (). E=mc² verwendet , H₂O verwendet . Achte darauf, das richtige Element zu wählen.
Unicode-Zeichen statt sup: Zeichen wie ² (U+00B2) oder ³ (U+00B3) existieren als eigene Unicode-Zeichen. Das funktioniert für einzelne Ziffern, aber für komplexere Ausdrücke (z.B. x^(n+1)) brauchst du . Bleib konsistent, mische nicht Unicode-Hochstellungen und  im selben Text.

Browser-Kompatibilität

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

Das sup-Element wird in den meisten Email-Clients korrekt hochgestellt dargestellt.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Ältere Versionen können die Baseline-Ausrichtung leicht abweichend darstellen
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<sup>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter