HTML Best Practices
HTML Best Practices
Saubere Struktur, gültiges HTML, Accessibility, SEO und Wartbarkeit. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- HTML-Dateien wartbar strukturieren
- häufige Qualitätsprobleme vermeiden
- Grundregeln für Accessibility und SEO anwenden
Erklärung
Gutes HTML ist verständlich, gültig und zweckmäßig. Es verwendet passende Elemente, vermeidet unnötige Verschachtelung und trennt Inhalt von Darstellung.
In Prüfungen zählt nicht nur, ob eine Seite im Browser irgendwie aussieht. Entscheidend ist auch, ob die Struktur korrekt, zugänglich und nachvollziehbar ist.
Beispiele
<main>
<h1>Projektübersicht</h1>
<section aria-labelledby="status-heading">
<h2 id="status-heading">Status</h2>
<p>Das Projekt ist in Umsetzung.</p>
</section>
</main>
Die Struktur ist klar und unterstützt auch assistive Technologien.
<div class="big-title">Projektübersicht</div>
<div onclick="location.href="/kontakt"">Kontakt</div>
Das ist schlechter: Bedeutung, Tastaturbedienung und Standardverhalten fehlen.
Typische Fehler
- Div-Suppe ohne semantische Struktur.
- Ungültige Verschachtelung, zum Beispiel Blockelemente an falschen Stellen.
- Interaktive Elemente ohne Tastaturbedienung.
Best Practices
- Validiere HTML regelmäßig.
- Verwende sprechende Überschriften und Linktexte.
- Nutze native Elemente, bevor du eigene Interaktion nachbaust.
Kleine Übung
Prüfe eine bestehende HTML-Seite: Markiere fünf Stellen, an denen Semantik, Labels, Linktexte oder Einrückung verbessert werden können.
Zusammenfassung
HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026