HTML-Semantik, Formulare und Barrierefreiheit
"Struktur und Nutzereingaben mit passenden Elementen modellieren."
Konzepte verständlich erklärt (für Einsteiger jeden Alters)
Lernziele
Struktur und Nutzereingaben mit passenden Elementen modellieren. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.
Erklärung
HTML beschreibt Bedeutung und Struktur. Überschriften bilden eine Gliederung; Buttons führen Aktionen aus, Links navigieren. Formulare brauchen zugeordnete Labels, verständliche Namen und serverseitige Validierung. Semantische Elemente helfen Tastaturbedienung und Assistenztechnik.
Schrittweises Beispiel
<label for="email">E-Mail</label><input id="email" name="email" type="email"> bindet Beschriftung und Feld zusammen. Das name-Attribut wird Teil der Formularübermittlung.
<form>
<label for="email">E-Mail</label>
<input id="email" name="email" type="email">
<button type="submit">Senden</button>
</form>
Zusammenfassung
Bedeutung zuerst, Aussehen per CSS. Jede Eingabe braucht eine zugängliche Beschriftung.
Lerncheck & Übung
Etwa 30 Minuten · beginner
Das lernst du
- Erkläre die Kernidee von „HTML-Semantik, Formulare und Barrierefreiheit“ in eigenen Worten.
- Wähle eine passende Technik für einen konkreten Anwendungsfall.
- Erkenne mindestens eine typische Fehlerquelle.
Voraussetzungen
- Keine Zugriffsvoraussetzungen. Vorwissen wird in der Erklärung eingeführt.
Häufige Fehler
- Placeholder ist kein Ersatz für Label. Clientseitige Validierung ist hilfreich, aber manipulierbar. Verwende keine Überschrift nur wegen ihrer Schriftgröße.
Wissenscheck
Praktische Aufgabe
Ergänze ein Formular mit Label und E-Mail-Feld.
Quellen und Einordnung
Prüfe meine Erklärung zu „HTML-Semantik, Formulare und Barrierefreiheit“: Nenne eine fehlende Annahme und stelle mir eine Gegenfrage.
Interaktive Übung & lokaler Testlauf
Ergänze ein Formular mit Label und E-Mail-Feld.
Hinweise auf Wunsch anzeigen
- Zerlege die Aufgabe in Eingabe, Verarbeitung und erwartete Ausgabe.
- Prüfe auch einen leeren oder ungültigen Fall.