Konzepterklärung
Beim Refactoring in HTML geht es hauptsächlich darum, die Struktur zu verbessern, ohne die Bedeutung der Seite zu ändern. In dieser Lektion beginnen Sie mit einem einfachen Markup-Block und wandeln ihn in saubereres, semantischeres HTML um. Ziel ist es, generische Elemente zu erkennen, die durch passendere Tags ersetzt werden können, zusammengehörige Inhalte klarer zu gruppieren und das Dokument später leichter lesbar, wartbar und stilistisch anpassbar zu machen.
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
- Ersetzen Sie mindestens zwei nicht-semantische Container durch Tags, die den Inhalt besser beschreiben.
- Führen Sie die Seite aus und bestätigen Sie, dass die Browserausgabe immer noch der ursprünglichen Absicht entspricht.
- Erklären Sie eine Refactoring-Entscheidung in einfacher Sprache, z. B. warum `<article>` oder `<header>` besser passt.
- Überprüfen Sie das finale Markup und prüfen Sie, ob ein anderer Entwickler es schnell verstehen könnte.
Schritt-für-Schritt-Anleitung
- Lesen Sie das Ausgangs-Markup und markieren Sie die Teile, die zu generisch oder repetitiv wirken.
- Schreiben Sie die Struktur mit semantischen Elementen wie `header`, `main`, `article`, `section` oder `footer` neu, wo es angebracht ist.
- Öffnen Sie die Seite und bestätigen Sie, dass der sichtbare Inhalt nach dem Refactoring nicht beschädigt wurde.
- Vergleichen Sie die alte und neue Version und notieren Sie, welche leichter zu überblicken ist.
- Schreiben Sie einen Satz darüber, wie semantisches HTML die Wartbarkeit verbessert.
Übungsaufgaben
- Refaktorieren Sie eine einfache Event-Karte, die mit `div`-Elementen erstellt wurde, in eine aussagekräftigere semantische Struktur.
- Nehmen Sie einen kurzen Produktbeschreibungsblock und reorganisieren Sie ihn mithilfe von Überschriften-, Absatz-, Listen- und `footer`-Elementen.
- Erstellen Sie eine zweite Version derselben Seite mit saubererer Struktur, aber dem gleichen sichtbaren Inhalt.
Coding-Challenges
- Erstellen Sie zwei gültige semantische Lösungen für denselben Inhalt und vergleichen Sie, welche davon klarer lesbar ist.
- Refaktorieren Sie einen überladenen Seitenabschnitt, während Sie das Markup zugänglich und später leicht stilistisch anpassbar halten.
Kleine Übungsaufgaben
- Ersetzen Sie einen generischen Wrapper durch ein semantisches Tag.
- Überprüfen Sie, ob Überschriften einer logischen Reihenfolge folgen.
- Fassen Sie in einer Zeile zusammen, was sich beim Refactoring geändert hat.
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.