Konzepterklärung
HTML zu testen bedeutet mehr, als nur zu prüfen, ob die Seite auf dem Bildschirm erscheint. Sie möchten auch die Struktur, die Textreihenfolge, Beschriftungen, Orientierungspunkte und Links überprüfen. In dieser Lektion üben Sie, eine einfache Checkliste zu verwenden, um Markup zu prüfen und Probleme frühzeitig zu erkennen. Der Fokus liegt darauf, die Gewohnheit zu entwickeln, HTML bewusst zu prüfen, anstatt davon auszugehen, dass es korrekt ist, nur weil es gerendert wird.
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.
- Schließen Sie mit der Ausgabe und einer schnellen Validierung ab.
Befehlsreferenz
- Prüfen Sie, ob jeder Abschnitt eine klare Überschrift oder eine zugängliche Beschriftung hat.
- Stellen Sie sicher, dass Links aussagekräftigen Text verwenden, anstatt vager Formulierungen wie „hier klicken“.
- Überprüfen Sie die Lesereihenfolge und bestätigen Sie, dass sie auch ohne CSS sinnvoll ist.
- Notieren Sie ein gefundenes Problem und wie Sie es behoben haben.
Schritt-für-Schritt-Anleitung
- Erstellen Sie das Beispiel-Markup und laden Sie es im Browser.
- Überprüfen Sie das HTML mit einer kurzen Checkliste: Überschriften, Links, Listen, Beschriftungen und Verschachtelung.
- Identifizieren Sie einen Normalfall und einen Grenzfall, wie z. B. fehlenden Text oder einen unbeschrifteten Abschnitt.
- Beheben Sie das Problem und führen Sie dieselben Prüfungen erneut durch.
- Schreiben Sie einen Satz darüber, warum HTML-Tests selbst auf einfachen Seiten wichtig sind.
Übungsaufgaben
- Erstellen Sie einen Kontaktblock und testen Sie, ob die Struktur ohne Styling klar ist.
- Überprüfen Sie ein kurzes Navigationsmenü und verbessern Sie schwache Linktexte.
- Erstellen Sie eine Checkliste zum Testen einer einfachen Artikelseite und wenden Sie diese auf Ihr eigenes Markup an.
Coding-Challenges
- Testen Sie zwei Versionen derselben Seite und erklären Sie, welche davon zugänglicher ist.
- Finden Sie drei strukturelle Probleme auf einer Übungsseite und beheben Sie diese, ohne den sichtbaren Inhalt zu stark zu verändern.
Kleine Übungsaufgaben
- Bestätigen Sie, dass jede Überschrift den darunterliegenden Inhalt einleitet.
- Prüfen Sie, ob Listen als Listen und nicht nur als Textzeilen ausgezeichnet sind.
- Beheben Sie ein kleines HTML-Problem und notieren Sie das Ergebnis.
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.