Lektion 9: HTML-Grundlagen: Architektur-Check

Konzepterklärung

In dieser Lektion werden Sie HTML als den strukturellen Bauplan einer Seite betrachten. Anstatt sich auf das Aussehen zu konzentrieren, werden Sie Inhalte in sinnvolle Bereiche gliedern, damit das Dokument leichter zu lesen, zu pflegen und zu erweitern ist. Sie werden üben, eine lose Ansammlung von Elementen in eine bewusste Seitenstruktur mit klaren Abschnitten, vorhersehbaren Überschriftenebenen und semantischen Containern zu verwandeln, die den Rest des Projekts unterstützen.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Eingaben. Platzieren Sie das Markup in semantischen Abschnitten mit klarer Struktur.
2. Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Schließen Sie mit Ausgabe und schneller Validierung ab.

Befehlsreferenz

• Gruppieren Sie verwandte Inhalte in sinnvolle Seitenbereiche wie `header`, `nav`, `main`, `section` und `footer`.
• Prüfen Sie, ob Überschriftenebenen einer logischen Lesereihenfolge folgen.
• Überprüfen Sie, ob jeder größere Inhaltsblock eine klare Rolle auf der Seite hat.
• Vergleichen Sie eine flache Sammlung von Elementen mit einer Version, die eine bewusste Struktur aufweist.

Schritt-für-Schritt-Anleitung

1. Listen Sie die Hauptinhaltsbereiche auf, die die Seite benötigt, bevor Sie das Markup schreiben.
2. Erstellen Sie das Dokument unter Verwendung semantischer Container für diese Bereiche.
3. Fügen Sie Überschriftenebenen hinzu, die die tatsächliche Struktur des Inhalts widerspiegeln.
4. Überprüfen Sie das Ergebnis und fragen Sie sich, ob ein anderer Entwickler die Seite auf den ersten Blick verstehen könnte.
5. Schließen Sie mit einer kurzen Architekturprüfung ab: Rollen sind klar, Abschnitte sind gut gruppiert und die Struktur kann wachsen.

Übungsaufgaben

• Erstellen Sie ein Landingpage-Skelett mit Header, Navigation, Hauptinhalt und Footer.
• Nehmen Sie eine unstrukturierte Inhaltsliste und gliedern Sie sie in semantische Seitenbereiche.
• Erstellen Sie eine kleine Artikelseite mit einem klaren Titel, einer Zusammenfassung und einem Abschnitt für verwandte Links.

Coding-Challenges

• Entwerfen Sie eine Seitenstruktur, die von drei auf sechs Abschnitte skaliert werden kann, ohne unübersichtlich zu werden.
• Erklären Sie, warum Ihre gewählten Elemente die Seitenarchitektur besser kommunizieren als generische Wrapper.

Kleine Übungsaufgaben

• Fügen Sie ein semantisches Landmark hinzu, das Sie im ersten Entwurf vergessen haben.
• Prüfen Sie, ob Überschriftenebenen nicht unnötig übersprungen werden.
• Schreiben Sie einen Satz, der die Seitenstruktur von oben nach unten beschreibt.