W3docs
de
Anmelden

HTML <sub>-Tag

The <sub> tag is used to define the subscript text that appears half a character below the line, and is rendered in a smaller font. See examples and Syntax.

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>
Probier es selbst »

Ergebnis

Beispiel für sub

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>
Probier es selbst »

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>
Probier es selbst »

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

Übung

Wie ist die korrekte Verwendung und Syntax des HTML &lt;sub&gt;-Tags gemäß dem w3docs.com-Leitfaden?