HTML <small>-Tag: Erstellen Sie kleineren Text für unterschiedliche Effekte

Was ist der HTML -Tag und wie wird er verwendet?

Der HTML <small>-Tag ist ein Semantik-Tag, das verwendet wird, um kleineren Text anzuzeigen. Er dient dazu, Text hervorzuheben oder zusätzliche Informationen bereitzustellen, ohne den Lesefluss des Haupttextes zu stören.

Verwendung des <small>-Tags

Um den <small>-Tag zu verwenden, fügst du ihn einfach um den Text ein, den du verkleinern möchtest.

<p>Dies ist der Haupttext.</p>
<small>Dies ist der kleinere Text.</small>

Der kleinere Text wird je nach Browser und Einstellungen des Benutzers in einer kleineren Schriftgröße angezeigt.

Auswirkungen des <small>-Tags auf den Text

Neben der Verkleinerung der Schriftgröße hat der <small>-Tag folgende Auswirkungen auf den Text:

• Farbe: Der Text kann in einer anderen Farbe als der Haupttext angezeigt werden.
• Abstand: Der Text kann einen geringeren Zeilenabstand haben.
• Ausrichtung: Der Text kann zentriert oder rechtsbündig ausgerichtet werden, abhängig von den CSS-Regeln.

Wann sollte man den -Tag einsetzen?

Wann immer du kleineren Text auf deiner Webseite anzeigen möchtest, ist der -Tag eine sinnvolle Option. Hier sind einige spezifische Situationen, in denen du den Tag in Erwägung ziehen solltest:

Für zusätzliche Informationen oder Hinweise

Wenn du zusätzliche Details oder Hinweise liefern möchtest, ohne den Haupttext zu stören, kann der -Tag verwendet werden, um diese Informationen unauffällig anzuzeigen.

Für Metadaten oder Fußnoten

Der -Tag eignet sich gut für die Anzeige von Metadaten wie Zeitstempeln, Autorennamen oder Copyright-Informationen. Zudem können damit Fußnoten oder Quellenangaben in einem kleineren Schriftgrad dargestellt werden.

Weitere Einzelheiten findest du in: Kontaktformulare in HTML: Ein umfassender Leitfaden zur Erstellung effektiver Formulare

Für Labels, Bildunterschriften und Textlinks

Labels, Bildunterschriften und Textlinks können mit dem -Tag in einer kleineren Größe dargestellt werden, um Platz zu sparen und den Fokus auf den Hauptinhalt zu lenken.

Für Text, der nicht so wichtig ist

Wenn du Text hast, der für den Gesamtzusammenhang nicht unbedingt erforderlich ist, wie z. B. Haftungsausschlüsse oder zusätzliche Notizen, kannst du den -Tag verwenden, um ihn weniger auffällig zu machen.

Für die Barrierefreiheit

Der -Tag kann dabei helfen, die Barrierefreiheit deiner Webseite zu verbessern, indem er Text bereitstellt, der für Personen mit Sehschwäche leichter zu lesen ist.

Welche Auswirkungen hat der -Tag auf den Text?

Der HTML -Tag weist deinen Browser an, den eingeschlossenen Text in einer kleineren Schriftgröße darzustellen. Diese kleinere Schriftgröße hat verschiedene Auswirkungen auf den Text:

Reduzierte Größe

Offensichtlich reduziert der -Tag die Größe des Textes, wodurch er dezenter und weniger auffällig wird. Dies kann nützlich sein, um sekundäre Informationen oder Hinweise hervorzuheben, die nicht so wichtig sind wie der Haupttext.

Weitere Informationen findest du in diesem Artikel: Superscript-Tag in HTML: Heben Sie Text in die Höhe

Rauscheffekt

Der -Tag kann auch einen Rauscheffekt erzeugen, der Inhalte in den Hintergrund treten lässt und sie optisch weniger prominent macht. Dies kann deinen Lesern die Konzentration auf die Hauptelemente deines Textes erleichtern.

Lesbarkeit

Je nach verwendeter Schriftart kann der -Tag die Lesbarkeit kleinerer Textpassagen verbessern. Dies kann für Dinge wie Fußnoten, rechtliche Hinweise oder andere sekundäre Informationen von Vorteil sein.

Gewichtung

Durch die Reduzierung der Schriftgröße kann der -Tag den Text visuell weniger wichtig erscheinen lassen. Dies kann nützlich sein, um Informationen zu de-emphatisieren, ohne sie vollständig auszublenden.

Begrenzungen

Beachte, dass der -Tag die Schriftgröße nur relativ zur Standardgröße des umgebenden Textes reduziert. Es gibt keine absolute Mindestgröße, die mit dem -Tag erreicht werden kann.

Unterschied zwischen <small> und anderen Tags für kleineren Text (z. B. <font size> und <span style>).

Neben dem <small>-Tag stehen dir noch andere Optionen zur Verfügung, um Text zu verkleinern. Im Folgenden findest du einen Vergleich dieser Optionen:

Für weitere Informationen, siehe auch: HTML-Tags: Bausteine für die Strukturierung und Gestaltung von Webseiten

Vergleichstabelle

<font size>: Veraltet und nicht barrierefrei

Der <font size>-Tag ist veraltet und wird nicht mehr empfohlen. Er ist auch nicht barrierefrei, da er keine semantische Bedeutung hat und Screenreadern keinen Kontext für den verkleinerten Text liefert.

<span style="font-size: x-small;">: Flexibel, aber nicht semantisch

Das <span>-Tag mit dem style-Attribut bietet mehr Flexibilität als <small>, da du die Schriftgröße genau angeben kannst. Allerdings ist es nicht semantisch, was bedeutet, dass es keine klare Bedeutung für den verkleinerten Text vermittelt.

<small>: Semantisch und barrierefrei

Im Vergleich zu den anderen Optionen ist <small> ein semantisches Tag, das speziell für die Erstellung von kleinerem Text gedacht ist. Es ist außerdem barrierefrei, sodass Screenreader den Zweck des verkleinerten Texts verstehen.

Fazit

Für die allgemeine Verwendung empfehlen wir dir die Verwendung des <small>-Tags. Es ist semantisch, barrierefrei und wird von allen gängigen Browsern gut unterstützt. Wenn du jedoch eine präzise Kontrolle über die Schriftgröße benötigst, kannst du das <span>-Tag mit dem style-Attribut verwenden.

Unterstützt der <small>-Tag Barrierefreiheit?

Ja, der <small>-Tag unterstützt die Barrierefreiheit, indem er Folgendes ermöglicht:

### Verständlichkeit

Der kleinere Text kann dazu beitragen, dass wichtige Informationen leichter identifiziert werden, ohne dass sie für alle Leser auffällig sind. Dies macht die Website für Menschen mit kognitiven Behinderungen zugänglicher.

Erfahre mehr unter: Das HTML main Tag: Der unverzichtbare Container für den Hauptinhalt deiner Webseite

### Begrenzung von visuellen Ablenkungen

Der kleinere Text kann genutzt werden, um zusätzliche Informationen oder Details bereitzustellen, ohne die Hauptinhalte zu überladen. Dies reduziert visuelle Ablenkungen für Menschen mit Aufmerksamkeitsstörungen oder Leseschwierigkeiten.

### Tastaturzugriff

Der <small>-Tag kann in Verbindung mit dem Attribut tabindex verwendet werden, um es Benutzern von Bildschirmlesegeräten zu ermöglichen, auf den kleineren Text zuzugreifen. Dies verbessert die Tastaturnavigation und die Bedienbarkeit für Menschen mit eingeschränkter Mobilität.

### Best Practices für die Barrierefreiheit

Um die Barrierefreiheit bei Verwendung des <small>-Tags zu gewährleisten, beachte die folgenden Best Practices:

• Vermeide die Verwendung von zu kleinem Text: Der Text sollte für alle Benutzer lesbar sein, auch für diejenigen mit Sehschwäche.
• Verwende den Text sparsam: Der <small>-Tag sollte nur für kurze, ergänzende Informationen verwendet werden, die nicht wesentlich für das Verständnis des Hauptinhalts sind.
• Kontrast sicherstellen: Der Kontrast zwischen dem kleineren Text und dem Hintergrund sollte ausreichend sein, um die Lesbarkeit zu gewährleisten.
• Alternativen bereitstellen: Erwäge, alternative Formate wie Audio oder Bilder für Informationen bereitzustellen, die im kleineren Text enthalten sind. Dies verbessert die Zugänglichkeit für Menschen mit Behinderungen.

Kompatibilität des -Tags mit verschiedenen Browsern und Versionen

Der -Tag wird von allen gängigen Browsern unterstützt. Zu den Browsern, die den -Tag unterstützen, gehören:

Moderne Browser

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari

Ältere Browser

• Internet Explorer (Versionen 8 und höher)

In allen diesen Browsern wird der -Tag wie vorgesehen gerendert, d. h. der Text wird kleiner als der umgebende Text dargestellt.

Für zusätzliche Informationen konsultiere: Deaktivieren und Deaktivieren von Links im HTML

Hinweise zur Kompatibilität

• Browser, die den -Tag nicht unterstützen, können den Text in der Standardgröße rendern oder vollständig ignorieren.
• In seltenen Fällen kann es vorkommen, dass der -Tag in älteren Browsern inkonsistent gerendert wird.
• Es wird empfohlen, in diesen Fällen auf alternative Methoden zur Textformatierung zurückzugreifen, z. B. CSS-Stile oder die Verwendung von -Tags.

Best Practices für die Verwendung des -Tags

Um sicherzustellen, dass du den -Tag effektiv nutzt, beachte die folgenden Best Practices:

Verwende ihn sparsam

Der -Tag soll diskrete Hinweise oder zusätzliche Informationen liefern. Vermeide eine Überbeanspruchung, da dies zu einem unübersichtlichen und schwer lesbaren Text führen kann.

Konsistenz beibehalten

Verwende den -Tag konsistent für ähnliche Informationen im gesamten Dokument. Dies trägt zur visuellen Einheitlichkeit bei und erleichtert den Lesern die Unterscheidung zwischen Haupttext und Zusatzinformationen.

Semantische Bedeutung beachten

Der -Tag soll semantisch verwendet werden, d. h. er sollte Informationen kennzeichnen, die tatsächlich kleiner sind oder eine untergeordnete Bedeutung haben. Vermeide es, ihn als Stilwerkzeug zu verwenden, um Text unterschiedlich groß darzustellen.

Barrierefreiheit berücksichtigen

Stell sicher, dass der Text innerhalb des -Tags für Benutzer mit Sehbehinderungen zugänglich ist. Erhöhe gegebenenfalls die Schriftgröße oder verwende Hilfsmittel wie Bildschirmlesegeräte.

Mit anderen Tags kombinieren

Du kannst den -Tag in Kombination mit anderen Tags für kleineren Text wie , oder CSS-Regeln wie "font-size: smaller;" verwenden, um unterschiedliche Ebenen der Verkleinerung zu erzielen.

Vorsicht bei der Verwendung von verschiedenen Browsern

Beachte, dass die Darstellung des -Tags in verschiedenen Browsern und Versionen variieren kann. Teste deine Webseite gründlich auf mehreren Browsern, um die Konsistenz sicherzustellen.

Mehr Informationen findest du hier: Die span-Elemente in HTML: Struktur und Semantik auf dem Bildschirm

Beispiele für die effektive Nutzung des -Tags

Um dir dabei zu helfen, das volle Potenzial des -Tags auszuschöpfen, haben wir einige bewährte Anwendungsfälle zusammengestellt:

Metadaten bereitstellen

Nutze , um zusätzliche Informationen wie Datum, Autor oder Copyright anzugeben, ohne den Haupttext zu überladen. Beispiel:

<p>
  Dieser Artikel wurde von Jane Doe am 10. März 2023 verfasst.
  <small>© 2023 Jane Doe</small>
</p>

Nebeninformationen hervorheben

Heb Nebeninformationen wie Fußnoten, Zitate oder Quellen hervor, die nicht Teil des Hauptarguments sind. Beispiel:

<p>
  Das Unternehmen XYZ konnte seinen Umsatz im letzten Quartal um 10 % steigern.
  <small>Basierend auf Daten aus dem Finanzbericht des Unternehmens für das vierte Quartal 2022.</small>
</p>

Text in Formularen kennzeichnen

Verwende , um Beschriftungen, Anweisungen oder Erläuterungen in Formularen zu formatieren. Beispiel:

<label for="email">
  E-Mail-Adresse:
  <small>(Geben Sie eine gültige E-Mail-Adresse ein)</small>
</label>

Text in Tabellen und Listen stylen

Formatiere Text in Tabellen- und Listenzeilen, um zusätzliche Informationen oder Details zu liefern. Beispiel:

Mehr dazu in diesem Artikel: Das HTML-Element <article>: Struktur und Verwendung

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
      <th>Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane Doe</td>
      <td>35</td>
      <small>Managerin</small>
    </tr>
  </tbody>
</table>

Aufmerksam auf Details lenken

Hebe bestimmte Wörter oder Phrasen hervor, um die Aufmerksamkeit auf wichtige Details oder Begriffe zu lenken. Beispiel:

<p>
  Der <small>Verantwortliche</small> für das Projekt ist John Smith.
</p>

Verwandte Artikel

• Semantisches HTML: Verbesserter Inhalt für Suchmaschinen und Barrierefreiheit
• Die Bedeutung von : Der Ankerpunkt im HTML-Code
• HTML -Tag: Eine umfassende Anleitung zur Markierung von Textinhalten
• Das Element in HTML: Bedeutung, Verwendung und Beispiele
• HTML-Abkürzung: Verbessern Sie die Benutzerfreundlichkeit mit dem abbr-Tag
• Anchor-Tags in HTML: So erstellst du Hyperlinks
• Das
• aria-Attribute: Barrierefreiheit und Benutzerfreundlichkeit für alle
• thead: Das Kopfzeilenelement für HTML-Tabellen
• Das readonly-Attribut für HTML-Eingabefelder: Unveränderliche Daten in Webformularen