HTML <sup>-Tag
Das <sup>-Tag wird verwendet, um hochgestellten Text zu definieren, der etwa halb ein Zeichen über der normalen Grundlinie steht und kleiner als der umgebende Text dargestellt wird. Das Tag wird häufig für Fußnoten und Formeln verwendet.
Das <sup>-Tag sollte ausschließlich aus typografischen Gründen verwendet werden. Es ist nicht für Styling-Zwecke gedacht. Wenn Sie die vertikale Position von Text ändern möchten, können Sie die CSS-Eigenschaft vertical-align mit dem Wert super verwenden.
Erfolg
Das
<sub>-Tag wird verwendet, um tiefgestellten Text zu definieren.
Hier sind einige Anwendungsfälle für ein <sup>-Element:
- Darstellung von hochgestellten Buchstaben in bestimmten Sprachen oder Abkürzungen.
- Darstellung von Exponenten (z. B. "x²").
- Darstellung von Ordinalzahlen (z. B. "5." statt "fifth").
Hinweis: Verwenden Sie hochgestellten Text nur aus typografischen Gründen. Vermeiden Sie es, wichtige Informationen damit zu verstecken, da assistive Technologien ihn möglicherweise überspringen oder falsch vorlesen.
Syntax
Das <sup>-Tag wird immer paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<sup>) und dem schließenden (</sup>) Tag geschrieben.
Beispiel für das HTML <sup>-Tag:
HTML <sup>-Tag
<!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>Ergebnis
Beispiel für das HTML <sup>-Tag in Kombination mit der CSS-Eigenschaft vertical-align:
Beispiel für das HTML <sup>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Example of the sup tag</h1>
<p>
Here is some text <sup>with the sup tag</sup>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.
</p>
</body>
</html>Beispiel für das HTML <sup>-Tag in Kombination mit dem <sub>-Tag:
Beispiel für das HTML <sup>-Tag in Kombination mit dem <sub>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sup and sub tags</h1>
<p>
Here is some text
<sub>with the sub tag</sub>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.</p>
</body>
</html>Attribute
Das <sup>-Tag unterstützt Globale Attribute und Ereignisattribute.
Praxis
Was ist die korrekte Verwendung und der Zweck des HTML <sup>-Tags?