W3docs
de
Anmelden

HTML <sub> Tag

Das <sub>-Tag definiert tiefgestellten Text, der halbzeilig unter der Grundlinie erscheint und kleiner dargestellt wird. Beispiele und Syntax.

Das HTML-<sub>-Tag kennzeichnet tiefgestellten Text — Zeichen, die eine halbe Zeile unterhalb der Grundlinie sitzen und etwas kleiner dargestellt werden. Es ist ein inline-semantisches Element: Es teilt dem Browser (und Hilfstechnologien) mit, dass der enthaltene Text tiefgestellt ist, nicht nur, dass er optisch abgesenkt wirken soll.

Verwenden Sie <sub> nur dann, wenn die tiefere Position eine typografische Bedeutung trägt. Es ist kein Allzweckwerkzeug, um Text kleiner und tiefer zu machen — wenn Sie nur den visuellen Effekt ohne die Bedeutung benötigen, verwenden Sie stattdessen CSS (weiter unten beschrieben).

Wann <sub> verwenden

Tiefgestellter Text ist in mehreren Kontexten sinnvoll:

  • Chemische Formeln — die Anzahl der Atome: H2O, CO2, C2H5OH.
  • Mathematische Indizes und Tiefstellungen — Folgenglieder und Variablenindizes: x1, x2, …, an.
  • Logarithmusbasen — log2(n), log10(x).
  • Fußnoten- und Referenzmarkierungen, die konventionell tief statt hoch gesetzt werden.

In jedem Fall verändert das tiefgestellte Zeichen die Bedeutung des umgebenden Textes: CO2 und CO<sub>2</sub> werden unterschiedlich gelesen. Genau diesen semantischen Unterschied soll <sub> ausdrücken — und deshalb ist alleiniges CSS-Styling kein Ersatz dafür.

Tipp

Um hochgestellten Text zu definieren (über der Grundlinie, z. B. Exponenten wie x2 oder Ordinalzahlen wie 1st), verwenden Sie das <sup>-Tag.

<sub> vs. <sup>

Beide sind semantische typografische Elemente; sie unterscheiden sich nur in der Richtung und in den Konventionen, die bestimmen, wann jedes korrekt ist.

<sub> (tiefgestellt)<sup> (hochgestellt)
PositionUnterhalb der GrundlinieOberhalb der Grundlinie
Typische VerwendungAtomanzahlen (H2O), Mathematikindizes (xn), LogarithmusbasenExponenten (x2), Ordinalzahlen (2nd), Fußnotenmarkierungen
Aussprache„x sub n"„x hoch n", „2nd"

Wählen Sie das Element, das der etablierten Konvention für die Notation entspricht, nicht das, das „richtig aussieht" — eine chemische Anzahl ist immer tiefgestellt, ein Exponent ist immer hochgestellt.

Syntax

Das <sub>-Tag wird paarweise verwendet. Der tiefgestellte Inhalt wird zwischen dem öffnenden <sub> und dem schließenden </sub>-Tag geschrieben.

<p>Formula of water — H<sub>2</sub>O</p>

Beispiele

Chemische Formeln

<!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>OH</p>
  </body>
</html>
Probier es selbst »
Result

<sub> zusammen mit <sup>

Tiefgestellte und hochgestellte Zeichen erscheinen oft im selben Dokument — eines für chemische Anzahlen, das andere für Exponenten:

<!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>OH
    </p>
    <p>
      E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
    </p>
  </body>
</html>
Probier es selbst »

Wenn Sie nur den visuellen Effekt wünschen, verwenden Sie CSS

Wenn Text wie tiefgestellter Text aussehen soll, aber semantisch kein tiefgestellter Text ist, missbrauchen Sie <sub> nicht. Wenden Sie stattdessen CSS vertical-align mit dem Wert sub (und einem kleineren font-size) auf das entsprechende Element an. Das folgende Beispiel gestaltet gewöhnlichen Text rein für die Darstellung um — beachten Sie, dass kein <sub>-Element verwendet wird:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .lowered {
        vertical-align: sub;
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1>Lowered text without the sub tag</h1>
    <p>
      Here is some <span class="lowered">visually lowered</span> text.
    </p>
  </body>
</html>
Probier es selbst »

Barrierefreiheit

Screenreader geben tiefgestellte Zeichen nicht einheitlich aus — manche lesen H<sub>2</sub>O als „H zwei O" ohne Hinweis darauf, dass die 2 tiefer steht, andere machen eine Pause oder ändern die Tonhöhe, und viele ignorieren den Unterschied völlig. Da die Position eine Bedeutung tragen kann, die in der Sprache verloren geht, sollten Sie bei wichtigen Notationen eine klare, eindeutige Quelle bevorzugen:

  • Erwägen Sie bei komplexen Formeln und Gleichungen eine Klartextvariante oder eine sprachfreundliche Alternative anzubieten (schreiben Sie beispielsweise „Logarithmus zur Basis 2 von n" im umliegenden Text, oder verwenden Sie MathML für echtes mathematisches Markup).
  • Verlassen Sie sich nicht allein auf <sub>, um etwas zu vermitteln, das ein Leser unbedingt verstehen muss — stellen Sie sicher, dass der umgebende Satz noch korrekt klingt, wenn das tiefgestellte Zeichen flach vorgelesen wird.

Attribute

Das <sub>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute. Es hat keine eigenen Attribute.

<sub> gestalten

Browser verleihen <sub> standardmäßig eine kleinere Schrift und eine tiefere Position. Sie können das Erscheinungsbild mit CSS anpassen, während die Bedeutung des Elements erhalten bleibt:

sub {
  color: #555;
  font-size: 0.8em;
}

Hinweis: Dies überschreibt das Standard-Browser-Styling von <sub> nur zu Demonstrationszwecken — die tiefgestellte Bedeutung bleibt unverändert.

Übung

Übung
Was ist die korrekte Verwendung und Syntax des HTML-<sub>-Tags gemäß dem W3Docs-Leitfaden?
Was ist die korrekte Verwendung und Syntax des HTML-<sub>-Tags gemäß dem W3Docs-Leitfaden?
Was this page helpful?