HTML <sup> Tag
Mit dem <sup> Tag wird hochgestellter Text definiert, der eine halbe Zeichenhöhe über der normalen Zeile erscheint und kleiner dargestellt wird.
Der HTML-Tag <sup> definiert hochgestellten Text — Inhalt, der eine halbe Zeichenhöhe über der normalen Grundlinie gerendert wird und in einer kleineren Schrift erscheint. Es handelt sich um ein Inline-Element mit semantischer Bedeutung: Es teilt dem Browser und unterstützenden Technologien mit, dass der hochgestellte Text eine echte typografische Bedeutung hat und nicht nur eine stilistische Anpassung darstellt.
Verwenden Sie <sup> nur, wenn hochgestellter Text typografisch oder semantisch erforderlich ist, beispielsweise für Exponenten, Ordinalzahlsuffixe, Fußnotenmarkierungen und übergeordnete Buchstaben in Abkürzungen. Es ist nicht dazu gedacht, Text rein visuell anzuheben. Wenn Sie Text nur für die Präsentation anheben möchten, verwenden Sie stattdessen die CSS-Eigenschaft vertical-align mit dem Wert super anstelle von <sup>.
Der Tag <sub> ist das Gegenstück zu <sup>: Er definiert tiefgestellten Text, der unterhalb der Grundlinie gerendert wird (verwendet für chemische Formeln, Indizes und Ähnliches).
Wann sollte man <sup> verwenden?
Verwenden Sie das <sup>-Element, wenn der hochgestellte Text eine Bedeutung trägt:
- Exponenten und mathematische Potenzen —
E = mc<sup>2</sup>. - Ordinalzahlen — die Suffixe
st,nd,rd,thin1<sup>st</sup>,2<sup>nd</sup>,5<sup>th</sup>. - Fußnoten- und Referenzmarkierungen — ein kleines
[1], das auf eine Anmerkung verweist. - Übergeordnete Buchstaben in Abkürzungen — im Französischen üblich, z. B.
M<sup>lle</sup>(Mademoiselle) oder1<sup>er</sup>.
Da die Bedeutung im Markup kodiert ist, können Screenreader und Suchmaschinen den hochgestellten Text korrekt interpretieren — etwas, das ein rein CSS-gestaltetes <span> nicht vermitteln kann.
Syntax
Der <sup>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<sup>) und dem schließenden (</sup>) Tag geschrieben.
Beispiel: Exponent in einer Formel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
</p>
</body>
</html>Im obigen Ergebnis wird die 2 kleiner und angehoben dargestellt, sodass der Ausdruck als „m c Quadrat" gelesen wird.
Beispiel: Ordinalzahlen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She finished 1<sup>st</sup>, ahead of the 2<sup>nd</sup> and 3<sup>rd</sup> place runners.</p>
</body>
</html>Beispiel: Fußnoten- / Referenzmarkierung
Ein verbreitetes Muster ist, eine kleine verlinkte Markierung in <sup> einzuwickeln, damit Leser zu einer Anmerkung am Seitenende springen können:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The first web browser was created in 1990<sup><a href="#fn1">[1]</a></sup>.
</p>
<hr />
<p id="fn1">[1] Tim Berners-Lee, WorldWideWeb, CERN.</p>
</body>
</html>Beispiel: Übergeordnete Buchstaben in Abkürzungen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>M<sup>lle</sup> Dupont est arrivée 1<sup>re</sup>.</p>
</body>
</html>Präsentationsalternative mit CSS gestalten
Die folgenden Beispiele zeigen den präsentationsbezogenen Ansatz. Wenn Ihr angehobener Text rein dekorativ ist und keine semantische Bedeutung trägt, bevorzugen Sie CSS gegenüber dem <sup>-Element, um unterstützende Technologien nicht in die Irre zu führen. Das folgende CSS zeigt auch, wie die Größe von echtem <sup>-Inhalt feinjustiert werden kann (standardmäßig verkleinern Browser ihn; das lässt sich überschreiben).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.raised {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Decorative raised text via CSS</h1>
<p>
Here is some text <span class="raised">lifted with CSS</span>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>Beispiel: <sup> zusammen mit <sub>
<sup> und <sub> werden oft nebeneinander verwendet — zum Beispiel in der Mathematik, wo man sowohl eine Potenz als auch einen Index benötigen kann:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The term a<sub>n</sub> can be written as a<sub>1</sub><sup>2</sup>.</p>
<p>Water is H<sub>2</sub>O, and the area of a square is s<sup>2</sup>.</p>
</body>
</html>Verwenden Sie hochgestellten Text nur für echte typografische Bedeutung. Missbrauchen Sie <sup> nicht, um wichtige Inhalte zu verstecken oder zu verkleinern — einige unterstützende Technologien überspringen, sprechen falsch aus oder lesen hochgestellten Text außerhalb des Kontexts, was den Text für Screenreader-Nutzer schwerer verständlich machen kann.
Attribute
Der <sup>-Tag unterstützt globale Attribute und die Ereignis-Attribute.
Siehe auch
<sub>— das tiefgestellte Gegenstück zu<sup>.- CSS
vertical-align— die präsentationsbezogene Möglichkeit, Inline-Text anzuheben oder abzusenken.