HTML-Tag label: Die optimale Lösung für Barrierefreiheit und mehr Usability
Mit dem label-Tag in HTML verbessern Sie die Usability Ihrer Website und schaffen einen barrierefreien Zugang. label kann u. a. für Eingabefelder, Checkboxen und Buttons verwendet werden und funktioniert mit globalen Attributen, Event-Attributen sowie for und form.
Günstige Webhosting-Pakete von IONOS!
Vertrauen Sie auf flexibel skalierbares und zuverlässiges Webhosting inklusive persönlichem Berater mit IONOS!
Wofür wird das HTML-Tag label verwendet?
Für Übersichtlichkeit und Barrierefreiheit auf einer Website ist das HTML-Tag label besonders wichtig. Es kommt in Formularen zum Einsatz und fügt Elementen wie Eingabefeldern, Buttons oder Checkboxen eine erläuternde Beschriftung bzw. ein Etikett hinzu.
Dies ist insbesondere für zwei Anwendungsfälle sehr wichtig. Zum einen erleichtert es Besucherinnen und Besuchern, die Probleme mit kleinen Flächen haben, die Navigation auf einer Website: Weil sich der klickbare Bereich vergrößert, wird auch das Klicken einfacher. Für Nutzerinnen und Nutzer, die einen Screen-Reader verwenden, sorgt das HTML-label-Tag zum anderen dafür, dass die Beschriftung vorgelesen werden kann. Das verbessert die Usability für alle Besucherinnen und Besucher Ihrer Onlinepräsenz.
Wie wird das label-Tag in HTML eingesetzt?
Es gibt zwei Möglichkeiten, das label-Tag in HTML einzusetzen. Mit dem for-Attribut können Sie label logisch direkt mit dem Eingabefeld zu verknüpfen. Alternativ bauen Sie das Formular neben der Beschriftung direkt innerhalb des HTML-label-Tags ein. Zur besseren Veranschaulichung nachfolgend beide Optionen von label in HTML.
Für Checkboxen:
<p>
<input type="checkbox" name="gelesen" id="read" value="ja" />
<label for="read">Ich habe die Bedingungen gelesen</label>
</p>
Wichtig ist dabei, dass das for-Attribut, das im HTML-label-Tag verwendet wird, denselben Wert hat wie das id-Attribut des Eingabefeldes.
Für Buttons:
<input type="radio" id="radio" value="zustimmen" />
<label for="read">Zustimmen</label>
Bei der zweiten Option wird die Beschriftung eingeschlossen. Das sieht beispielsweise so aus:
<p>
<label>
<input type="checkbox" name="gelesen" value="ja" />
Ich habe die Bedingungen gelesen
</label>
</p>
Welche Elemente werden mit dem HTML-Tag für label ausgezeichnet?
Um z. B. Nutzerinnen und Nutzern mit Screen-Readern den barrierefreien Zugang zu Ihrer Seite zu ermöglichen, sollten folgende Elemente in HTML mit einem label-Tag ausgezeichnet werden:
- Eingabefelder: <input type="text" />, <input type="password" />, <testarea>
- Checkboxen: <input type="checkbox" />
- Buttons: <input type="radio" />
- Auswahllisten: <select>
- Felder für Uploads: <input type="file" />
Welche Attribute unterstützt das label-Tag?
Das HTML-Tag label unterstützt alle globalen HTML-Attribute sowie Event-Attribute. Dazu können folgende Attribute mit dem HTML-Tag verbunden werden:
for: Über das Attribut for wird die ID des Input-Elements bestimmt, mit dem die Beschriftung verbunden werden soll. Das bedeutet auch, dass in einem Dokument das erste Input-Element, das diesem Wert entspricht, automatisch in Zusammenhang mit der Beschriftung steht.
form: Das Attribut form definiert, welches Form-Element dem label-Tag in HTML zugeordnet werden soll. In der Praxis sieht das beispielsweise so aus:
<form id="teilnehmer">
<label class="h2" form="teilnehmer">Name</label>
<label for="vorname">Vorname</label>
<input name="vorname" id="vorname" maxlength="25">
<label for="nachname">Nachname</label>
<input name="nachname" id="nachname" maxlength="30">
<button>Angaben bestätigen</button>
</form>
Gestalten Sie Ihre Website ganz nach Ihren individuellen Wünschen! Mit dem Homepage-Baukasten von IONOS bauen Sie Ihre professionellen Onlinepräsenz ohne großes Vorwissen einfach selbst. Sie können stattdessen auch auf die Expertise unserer Entwicklerinnen und Entwickler zurückgreifen. Wählen Sie einfach die Lösung, die für Ihre Zwecke am besten passt!
Ähnliche Artikel
div in HTML: Alles Wichtige zur Verwendung des div-Containers
Da das div-Tag keine eigenen semantischen Merkmale hat, wird seit der Einführung von HTML5 sein Einsatz nur dann empfohlen, wenn keine passenderen Elemente verfügbar sind. Hier erfahren Sie alles über den div-Container, lernen anhand praktischer Beispiele, wie er eingesetzt wird, und warum div in HTML kaum noch eine Rolle spielt.
HTML-Tag img: So fügen Sie Bilder auf Ihrer Website ein
Um Bilder und Grafiken in Ihre Website einzubauen, verwenden Sie das HTML-Tag img. Dieses erlaubt es Ihnen, die Bilder einfach zu positionieren. Mit unterschiedlichen Attributen sorgen Sie dann dafür, dass die Grafik optimal in Ihre Seite passt. Wir erklären Ihnen, wie das img-Tag aufgebaut ist und mit welchen Attributen es verwendet werden kann.
_target: Linkziele definieren in HTML
Möchten Sie Verlinkungen auf Ihrer Website einbauen, können Sie mit dem HTML-Attribut target festlegen, wo der Link geöffnet werden soll. Dabei entscheiden Sie, ob die Nutzer und Nutzerinnen auf Ihrer Onlinepräsenz bleiben oder zur nächsten Website weitergehen sollen. Hier erfahren Sie, wie Sie _target verwenden und was Sie dabei beachten sollten.
HTML-Tag style: So gestalten Sie das Aussehen von Elementen
Das HTML-Tag style ist die beste Möglichkeit, das Aussehen einzelner Elemente auf einer Website zu gestalten und die Seite so optimal aufzubauen. Hier erfahren Sie, wofür das style-Tag in HTML genau verwendet wird, wie es aufgebaut ist und welche HTML-Attribute mit ihm kompatibel sind. Damit können Sie das Tag einfach in Ihren Code einbetten.
