<sup>

Zuletzt aktualisiert am 4. Februar 2026

Das <sup>-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 <sub> ist <sup> nicht nur visuelles Styling, sondern transportiert eine semantische Bedeutung: Der hochgestellte Text steht in einem fachlichen Zusammenhang. Auf dieser Seite lernst du, wann <sup> die richtige Wahl ist und worin der Unterschied zu CSS vertical-align: super liegt.

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 <sup> gedacht.

• <sup> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <sup> 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 <sup>
• Wie <sub> kann auch <sup> den Zeilenabstand beeinflussen: Bei mehreren hochgestellten Texten in einem Absatz kann das Layout ungleichmäßig wirken

Syntax

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

Beispiele

Mathematische Potenzen

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

<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ßnoten und Quellenverweise

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

<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>

Markenzeichen

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

<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

• Screenreader-Verhalten: Die meisten Screenreader ignorieren <sup> 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 (<sup><a href="#fn1">[1]</a></sup>), 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

• 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 <sup>. Das <sup>-Element hat eine semantische Bedeutung und sollte nur für fachlich hochgestellten Text verwendet werden.

• sup und sub verwechseln: Mathematische Potenzen sind hochgestellt (<sup>), chemische Indizes sind tiefgestellt (<sub>). E=mc² verwendet <sup>, H₂O verwendet <sub>. 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 <sup>. Bleib konsistent, mische nicht Unicode-Hochstellungen und <sup> im selben Text.

Browser-Kompatibilität

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

Email-Kompatibilität

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

Verwandte Elemente