Thanks to visit codestin.com
Credit goes to developer.mozilla.org

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<sup>: Das Superscript-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Das <sup> HTML-Element spezifiziert Inline-Text, der aus rein typografischen Gründen als hochgestellt angezeigt werden soll. Hochgestellt wird normalerweise mit einer angehobenen Grundlinie und kleinerem Text gerendert.

Probieren Sie es aus

<p>
  The <em>Pythagorean theorem</em> is often expressed as the following equation:
</p>

<p>
  <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>
p {
  font:
    1rem "Fira Sans",
    sans-serif;
}

Attribute

Dieses Element beinhaltet nur die globalen Attribute.

Nutzungshinweise

Das <sup>-Element sollte nur aus typografischen Gründen verwendet werden – also um die Position des Textes zu ändern, um den typografischen Konventionen oder Standards zu entsprechen, und nicht ausschließlich zu Präsentations- oder Darstellungszwecken.

Zum Beispiel sollte das Wortmarke eines Unternehmens oder Produkts, das eine angehobene Grundlinie verwendet, mittels CSS gestylt werden (höchstwahrscheinlich vertical-align) und nicht mit <sup>. Dies würde z. B. durch vertical-align: super oder durch Anheben der Grundlinie um 50% mit vertical-align: 50% erreicht werden.

Geeignete Anwendungsfälle für <sup> umfassen (sind aber nicht unbedingt darauf beschränkt):

  • Darstellung von Exponenten, wie "x3". Es könnte sich lohnen, die Verwendung von MathML in Betracht zu ziehen, insbesondere in komplexeren Fällen. Siehe Exponenten unter Beispiele unten.
  • Darstellung von Superior-Schriftzeichen, die in einigen Sprachen bei bestimmten Abkürzungen verwendet werden. Zum Beispiel kann im Französischen das Wort "mademoiselle" mit "Mlle" abgekürzt werden; dies ist ein akzeptabler Anwendungsfall. Siehe Superior-Schriftzeichen für Beispiele.
  • Darstellung von Ordinalzahlen, wie "4th" statt "vierter". Siehe Ordinalzahlen für Beispiele.

Beispiele

Exponenten

Exponenten oder Potenzen einer Zahl sind eine der häufigsten Anwendungen für hochgestellten Text. Zum Beispiel:

html
<p>
  One of the most common equations in all of physics is <var>E</var>=<var>m</var
  ><var>c</var><sup>2</sup>.
</p>

Ergebnis

Superior-Schriftzeichen

Superior-Schriftzeichen sind nicht technisch dasselbe wie Superscript. Es ist jedoch üblich, <sup> zu verwenden, um Superior-Schriftzeichen in HTML darzustellen. Zu den häufigsten Anwendungen von Superior-Schriftzeichen gehört die Darstellung bestimmter Abkürzungen im Französischen:

html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>

Ergebnis

Ordinalzahlen

Ordinalzahlen, wie "vierter" auf Englisch oder "quinto" auf Spanisch, können durch Ziffern und sprachspezifischen, hochgestellten Text abgekürzt werden:

html
<p>
  The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasierungsinhalt, greifbarer Inhalt.
Erlaubter Inhalt Phrasierungsinhalt.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind erforderlich.
Zulässige Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizite ARIA-Rolle superscript
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-sub-and-sup-elements

Browser-Kompatibilität

Siehe auch

  • Das <sub> HTML-Element, das Tiefschriften erzeugt. Beachten Sie, dass sub und sup nicht gleichzeitig verwendet werden können: Sie müssen MathML verwenden, um gleichzeitig sowohl ein Superscript als auch ein Subscript neben dem chemischen Symbol eines Elements zu erzeugen, das seine Ordnungszahl und seine Kernladungszahl darstellt.
  • Die <msub>, <msup> und <msubsup> MathML-Elemente.
  • Die CSS-Eigenschaft vertical-align.