HTML <sub>-Tag
Das <sub>-Tag wird verwendet, um Tiefstellungstext zu definieren, der um etwa die Hälfte einer Zeichenhöhe unter der Grundlinie steht und in einer kleineren Schriftgröße dargestellt wird. Tiefstellungstext wird häufig zur Darstellung chemischer Formeln verwendet.
Das <sub>-Tag darf nur aus typografischen Gründen verwendet werden. Es sollte nicht zur optischen Gestaltung eingesetzt werden. Wenn Sie die vertikale Position eines Textes ändern möchten, können Sie die CSS vertical-align-Eigenschaft mit dem Wert „sub“ verwenden.
Erfolg
Um Hochstellungstext zu definieren, verwenden Sie das
<sup>-Tag.
Syntax
Das <sub>-Tag wird immer als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<sub>) und dem schließenden (</sub>) Tag geschrieben.
Beispiel für das HTML <sub>-Tag:
HTML <sub>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>O</p>
</body>
</html>Ergebnis
Beispiel für das HTML <sub>-Tag in Kombination mit dem <sup>-Tag:
Beispiel für das HTML <sub>-Tag mit dem <sup>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>O
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Beispiel für das HTML <sub>-Tag in Kombination mit der CSS-Eigenschaft vertical-align:
Beispiel für das HTML <sub>-Tag mit der CSS-Eigenschaft vertical-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sub tag</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,<sub> giving information on its origins</sub>, as well as a random Lipsum generator.
</p>
</body>
</html>Attribute
Das <sub>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Styling eines HTML <sub>-Tags
sub {
color: #555;
font-size: 0.8em;
}Hinweis: Dieses Beispiel überschreibt das Standard-Styling des Browsers nur zu Demonstrationszwecken.
Praxis
Wie ist die korrekte Verwendung und Syntax des HTML <sub>-Tags gemäß dem w3docs.com-Leitfaden?