Kann ich statt CSS verwenden?

vertical-align: super mit kleinerer font-size sieht gleich aus, aber und tragen Bedeutung: "m2" und "m 2 " sind verschiedene Werte. Nimm die Tags, wenn die angehobene oder abgesenkte Position zum Inhalt gehört.

Ausführbare HTML-Docs: Hochgestellt

Q: Wie schreibe ich in HTML hochgestellt?

Setz den hochgestellten Text in : x 2 zeigt x hoch 2, 1 st eine englische Ordinalzahl. Der Browser zeichnet ihn kleiner und über die Grundlinie angehoben.

Q: Wie schreibe ich in HTML tiefgestellt?

Nimm : H 2 O für Wasser, x 1 für einen Index. Der Text wird kleiner und unter die Grundlinie abgesenkt gezeichnet.

Q: Wie schreibe ich x hoch 2 in HTML?

Entweder x 2 oder das fertige Zeichen x², das du auch als Entity ² schreiben kannst. Das Zeichen reicht für Quadrat und Kubik; funktioniert für jeden Exponenten, etwa 2 n+1 .

HTML hochgestellt und tiefgestellt: die Tags sup und sub

Hochgestellten Text schreibst du mit , tiefgestellten mit : Exponenten, Ordinalzahlen, Fußnotenzeichen und chemische Formeln. Hier lernst du die üblichen Einsätze, wie du verhinderst, dass sie Zeilen auseinanderschieben, und wann ein Unicode-Zeichen oder MathML besser passt.

Diese Seite enthält ausführbare Editoren - bearbeiten, ausführen und Ausgabe sofort sehen.

Von Kevin Spektor, Co-founder & CTO

Veröffentlicht am Sep 24, 2026

So schreibst du in HTML hochgestellt

Setz den hochgestellten Text in . Der Browser zeigt ihn kleiner und über die Zeile angehoben an. Sein Partner  zeigt Text kleiner und abgesenkt an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 und  sind Inline-Elemente und können andere Inline-Elemente enthalten, also funktionieren auch 2n+1 oder xi.

Übliche Einsätze

Du willst	Schreib	Ergebnis
Einen Exponenten	`10<sup>3</sup>`	10 hoch 3
Eine englische Ordinalzahl	`2<sup>nd</sup>`	2nd mit hochgestellten Buchstaben
Ein Fußnotenzeichen	`text<sup><a href="#n1">1</a></sup>`	Eine hochgestellte, anklickbare 1
Eine chemische Formel	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glucose
Einen Index oder eine Basis	`x<sub>1</sub>`, `log<sub>2</sub>`	Tiefgestellte 1 und 2
Eine Marke	`Brand<sup>TM</sup>` oder `Brand™`	Hochgestelltes TM

Nimm die Tags, wenn die Position zur Bedeutung gehört: m2 und m2 sind verschiedene Dinge. Für kleinen Text, der nur klein gestylt ist (eine Beschriftung, ein Badge), nimm stattdessen CSS.

Fußnoten mit sup

Ein Fußnotenzeichen ist ein hochgestellter Link auf eine Anmerkung unten. Gib jeder Anmerkung eine id und lass den Link darauf zeigen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Klick auf eine Zahl, um zu ihrer Anmerkung zu springen, und auf „Back“, um zurückzukehren. Ohne Unterstreichung am kleinen Link bleibt der Absatz ruhig, und die Linkfarbe zeigt trotzdem, dass er anklickbar ist.

Gleichmäßigen Zeilenabstand behalten

Standardmäßig kann ein  oder  seine Zeile höher machen als die Zeilen drumherum, sodass ein Absatz mit ein paar Exponenten ungleichmäßig aussieht. line-height: 0 an ihnen behebt das:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

Der graue Kasten ist höher, weil die Zeilen zwei und vier auseinandergeschoben wurden. Im grünen Kasten hat jede Zeile dieselbe Höhe. Nimm diese Regel einmal in dein Basis-Stylesheet auf und vergiss sie.

Unicode-Zeichen und MathML

Für ein paar häufige Fälle gibt es fertige Zeichen: ² (²), ³ (³), ¹ (¹), ™ (™) und ½ (½). Sie brauchen kein Tag und beeinflussen die Zeilenhöhe nicht, existieren aber nur für einige Ziffern und Buchstaben.

Für echte Formeln (Brüche, Wurzeln, Exponenten von Exponenten) nimmst du MathML, das aktuelle Browser nativ darstellen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> nimmt eine Basis und einen Exponenten; <msub> macht dasselbe für tiefgestellten Text. Für einen einzelnen Exponenten in einem Satz ist  einfacher.

Häufige Fehler

 verwenden, um Text klein zu machen. Es hebt den Text zusätzlich an und sagt dem Leser, dass er hochgestellt ist. Für kleinen Text nimm font-size.
Ungleichmäßiger Zeilenabstand. Füg sup, sub { line-height: 0; } hinzu.
x^2 oder H2O in fertigem Text schreiben. Nimm x2 und H2O, damit der Inhalt korrekt gelesen wird.
Fußnotenzeichen, die zu klein zum Antippen sind. Auf Handys ist eine einzelne hochgestellte Ziffer ein winziges Ziel. Gib sup a etwas Innenabstand oder setz die Anmerkungen nah an den Text.

Häufig gestellte Fragen

Wie schreibe ich in HTML hochgestellt?

Setz den hochgestellten Text in : x2 zeigt x hoch 2, 1st eine englische Ordinalzahl. Der Browser zeichnet ihn kleiner und über die Grundlinie angehoben.

Wie schreibe ich in HTML tiefgestellt?

Nimm : H2O für Wasser, x1 für einen Index. Der Text wird kleiner und unter die Grundlinie abgesenkt gezeichnet.

Wie schreibe ich x hoch 2 in HTML?

Entweder x2 oder das fertige Zeichen x², das du auch als Entity ² schreiben kannst. Das Zeichen reicht für Quadrat und Kubik;  funktioniert für jeden Exponenten, etwa 2n+1.

Warum macht den Zeilenabstand ungleichmäßig?

Der angehobene Text kann seine Zeile höher machen als die anderen Zeilen im Absatz. Mit sup, sub { line-height: 0; } behebst du das, weil sie der Zeile dann keine Höhe mehr hinzufügen.

Kann ich statt CSS verwenden?

vertical-align: super mit kleinerer font-size sieht gleich aus, aber  und  tragen Bedeutung: "m2" und "m2" sind verschiedene Werte. Nimm die Tags, wenn die angehobene oder abgesenkte Position zum Inhalt gehört.

Verwandte Konzepte