HTML Elemente nutzen
Semantisches HTML umsetzen
1. Die Bereiche der Webseite im HTML kennzeichnen
Kennzeichnen Sie den Hauptinhalt der Seite mit dem HTML-Element main. Verwenden Sie nav für die Navigation, header für den einleitenden Bereich und footer für den abschließenden Bereich. Die allgemeine Seitennavigation und der wiederkehrende Fußbereich stehen außerhalb des Hauptinhalts.
Verwenden Sie innerhalb des Hauptinhalts article für einen eigenständigen Beitrag. Fassen Sie thematisch zusammengehörige Abschnitte mit section zusammen und geben Sie ihnen eine passende Überschrift.
2. Die Überschriften nach ihrer Bedeutung ordnen
Kennzeichnen Sie die Hauptüberschrift der Seite mit h1. Verwenden Sie h2 für die Hauptabschnitte und h3 für Unterabschnitte innerhalb eines solchen Hauptabschnitts.
Wählen Sie die Überschriftenebene nach der Stellung des Abschnitts im Text. Prüfen Sie anschließend, ob die Reihenfolge der Überschriften erkennen lässt, welche Themen übergeordnet sind und welche Unterthemen dazugehören.
3. Definitionen, Listen und Tabellen passend auszeichnen
Wählen Sie für jedes Inhaltselement die HTML-Kennzeichnung, die seine Funktion beschreibt:
| Inhalt | HTML-Elemente |
|---|---|
Begriffe mit zugehörigen Erklärungen |
|
Aufeinanderfolgende Schritte |
|
Aufzählungen ohne festgelegte Reihenfolge |
|
Vergleichbare Angaben in Zeilen und Spalten |
|
Prüfen Sie, ob die Zuordnung der Inhalte auch im Code erkennbar ist. Bei einer Definitionsliste muss beispielsweise jede Erklärung dem richtigen Begriff zugeordnet sein.
4. Formularfelder mit ihren Beschriftungen verbinden
Geben Sie jedem Eingabefeld eine verständliche Beschriftung. Kennzeichnen Sie diese Beschriftung mit dem HTML-Element label.
Das Eingabefeld erhält über die Angabe id eine auf der Seite eindeutige Kennung. Tragen Sie dieselbe Kennung bei der Beschriftung in die Angabe for ein. Dadurch wird im HTML festgelegt, welche Beschriftung zu welchem Eingabefeld gehört.
Prüfen Sie diese Zuordnung für jedes Formularfeld.
5. Die Verwendung von div und span prüfen
Die HTML-Elemente div und span gruppieren Inhalte, ohne ihnen eine bestimmte inhaltliche Funktion zuzuweisen. Sie können beispielsweise für die Gestaltung verwendet werden.
Prüfen Sie, ob Überschriften, Listen oder andere Inhaltselemente lediglich mit div oder span gekennzeichnet sind. Verwenden Sie an diesen Stellen die jeweils passenden HTML-Elemente, damit die Funktion des Inhalts im Code erkennbar wird.
Mehr zu semantischem HTMLDie elf Schritte der Klartext-Methode
Wenn Sie Ihre Website mit der KI-Klartext-Methode inhaltlich und technisch überarbeiten möchten, vereinbaren Sie ein kostenloses Erstgespräch mit mir.