Konzepterklärung
Diese Lektion konzentriert sich darauf, HTML so zu schreiben, dass es zuverlässig bleibt, wenn echte Benutzer, assistierende Technologien und zukünftige Teammitglieder damit interagieren. Sie üben, Elemente zu wählen, die Bedeutung klar kommunizieren, anfällige Strukturen vermeiden und Barrierefreiheit standardmäßig unterstützen. Die Hauptidee ist, dass zuverlässiges HTML nicht nur gültiges HTML ist; es ist Markup, das immer noch Sinn ergibt, wenn Stile fehlschlagen, Inhalte sich ändern oder jemand mit einer Tastatur oder einem Screenreader navigiert.
Wo der Code hingehört
- Beginnen Sie mit Variablen und Eingaben. Platzieren Sie Markup in semantischen Abschnitten mit klarer Struktur.
- Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
- Beenden Sie mit Ausgabe und schneller Validierung.
Befehlsreferenz
- Verwenden Sie Beschriftungen, Überschriften und Schaltflächentext, die ohne visuelle Formatierung klar bleiben.
- Prüfen Sie, dass jedes interaktive Element einen offensichtlichen Zweck und einen zugänglichen Namen hat.
- Überprüfen Sie die Dokumentstruktur als reinen Inhalt, nicht als visuelles Mockup.
- Suchen Sie nach anfälligen Markup-Entscheidungen wie klickbaren generischen Elementen oder fehlenden Beziehungen.
Schritt-für-Schritt-Anleitung
- Schreiben Sie das grundlegende Markup für einen kleinen interaktiven Bereich wie ein Formular oder ein Einstellungsfeld.
- Bestätigen Sie, dass Beschriftungen korrekt mit Eingabefeldern und Steuerelementen verbunden sind.
- Lesen Sie die Seite von oben nach unten und prüfen Sie, ob die Struktur auch ohne CSS noch Sinn ergibt.
- Ersetzen Sie vagen Text wie "Klicken Sie hier" durch eine spezifischere Formulierung.
- Überprüfen Sie abschließend, ob das Markup verständlich, navigierbar und leicht erweiterbar bleibt.
Übungsaufgaben
- Erstellen Sie ein Kontaktformular, das Beschriftungen, Pflichtfelder und klaren Schaltflächentext verwendet.
- Wandeln Sie einen visuell beschreibenden Block in Markup um, das auch beim Vorlesen noch Sinn ergibt.
- Erstellen Sie einen kleinen Einstellungsbereich mit Überschriften, gruppierten Steuerelementen und beschreibendem Text.
Coding-Challenges
- Identifizieren Sie drei Markup-Entscheidungen, die die Zuverlässigkeit verbessern, auch wenn sich das Design später ändert.
- Schreiben Sie ein schwaches Beispiel, das zu stark von der Formatierung abhängt, in starkes semantisches HTML um.
Kleine Übungsaufgaben
- Fügen Sie ein `required`-Attribut hinzu, wo es die Klarheit verbessert.
- Ändern Sie eine generische Beschriftung in eine spezifischere.
- Schreiben Sie eine schnelle Überprüfung, ob die Seite auch ohne CSS noch funktioniert.
Häufiger Fehler
Skipping input validation or mixing logic/output in one unstructured block.
Mini-Challenge aus der Praxis
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.