W3docs
de
Anmelden

HTML <small>-Tag

Das <small>-Tag verkleinert die Schriftgröße um eine Stufe gegenüber der Basis-Schriftgröße des Dokuments (z. B. von medium zu small).

Das HTML-<small>-Tag kennzeichnet Nebenkommentare und Kleingedrucktes – Inhalte von untergeordneter Bedeutung wie Urheberrechtshinweise, rechtliche Haftungsausschlüsse, Lizenzinformationen, Quellenangaben und das Kleingedruckte neben einem Preis. Browser stellen es etwa eine Größe kleiner als den umgebenden Text dar (ungefähr 80 % der übergeordneten Schriftgröße), doch sein eigentlicher Wert liegt in der Semantik: Es teilt Browsern und Hilfstechnologien mit, dass der Text eine Randbemerkung ist und keine Überschrift oder Hauptaussage.

Wann <small> verwenden (und wann nicht)

Dies ist die wichtigste Unterscheidung, die viele Entwickler übersehen. In HTML5 ist <small> kein allgemeines Werkzeug, um Text optisch zu verkleinern. Wenn Sie die visuelle Größe von Text nur aus gestalterischen Gründen ändern möchten, verwenden Sie stattdessen CSS font-size.

Verwenden Sie <small>, wenn der Inhalt tatsächlich Kleingedrucktes oder ein Nebenkommentar ist:

  • Urheberrechtszeilen in einer Fußzeile
  • Rechtliche Haftungsausschlüsse und Bedingungen („Es gelten die AGB")
  • Die mit Sternchen versehene Anmerkung neben einem Preis oder Zinssatz
  • Quellenangaben und Lizenzhinweise

Greifen Sie stattdessen auf CSS font-size zurück, wenn Sie schlicht kleineren Text wünschen, der keine Bedeutung als „Nebenkommentar" trägt – zum Beispiel eine rein stilistisch kleine Bildunterschrift oder Beschriftung.

Wie die Tags <i>, <b>, <sub> und <sup> ist <small> in HTML5 vollständig semantisch und verstößt nicht gegen das Prinzip der Trennung von Struktur und Präsentation. Es ist ein Inline-Element und fügt sich daher in eine Textzeile ein, anstatt einen neuen Block zu beginnen.

Syntax

Das <small>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<small>) und dem schließenden (</small>) Tag geschrieben.

Beispiel des HTML-<small>-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Usage of the SMALL tag</title>
  </head>
  <body>
    <p>The interest rate is only 10%*</p>
    <small>*  per day</small> /
  </body>
</html>
Probier es selbst »

Beispiel des HTML-<small>-Tags innerhalb eines <div>-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Usage of the SMALL tag</title>
  </head>
  <body>
    <h1>Small tag example</h1>
    <p>This is some standard paragraph text.</p>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <small>This is a small text.</small>
    </div>
  </body>
</html>
Probier es selbst »

Praxisbeispiele

Urheberrechtszeile in der Fußzeile

Ein Urheberrechtshinweis ist klassisches Kleingedrucktes und gehört daher in ein <small>-Element:

<footer>
  <small>&copy; 2024 Example Inc. All rights reserved.</small>
</footer>

Kleingedrucktes neben einem Preis

Verwenden Sie <small> für den Haftungsausschluss, der einen Preis oder Zinssatz einschränkt:

<p>
  $9.99/month
  <small>Billed annually. Taxes not included.</small>
</p>

Verschachteltes <small> für weitere Verkleinerung

Sie können ein <small>-Element in ein anderes <small>-Element einbetten. Jede Ebene reduziert die Schriftgröße erneut relativ zum übergeordneten Element – je tiefer die Verschachtelung, desto kleiner der Text:

<p>
  Main text
  <small>
    smaller side note
    <small>even smaller detail</small>
  </small>
</p>

Attribute

Das <small>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.

Wie man ein HTML-<small>-Tag gestaltet

Die Standard-Größe des Browsers für <small> stammt aus CSS und lässt sich daher mit der Eigenschaft font-size überschreiben. Das folgende Beispiel behält die semantische Bedeutung des Kleingedruckten bei und steuert gleichzeitig das genaue Erscheinungsbild:

<!DOCTYPE html>
<html>
  <head>
    <title>Styling the small tag</title>
    <style>
      small {
        font-size: 0.75em;
        color: #777;
      }
    </style>
  </head>
  <body>
    <p>
      Subscribe today!
      <small>Cancel anytime.</small>
    </p>
  </body>
</html>

Beachten Sie den Unterschied: Verwenden Sie das <small>-Element, wenn der Text bedeutet, dass es sich um Kleingedrucktes oder einen Nebenkommentar handelt, und verwenden Sie die CSS-Eigenschaft font-size, wenn Sie nur die visuelle Größe von gewöhnlichem Text ändern möchten.

Übungen

Übung
Was ist der Zweck des HTML-Tags small und wie wird es verwendet?
Was ist der Zweck des HTML-Tags small und wie wird es verwendet?
Was this page helpful?