Good Website Inspector

making the web better

Regeln

Regel: Nutze Überschriften-Tags

Es sollten die Überschriften-Tags <h1> - <h6> für Überschriften und Unterüberschriften genutzt werden.

In einer (X)HTML basierten Seite sollten <h1>-Tags nur den Titel der Website einmal darstellen, jede Artikelüberschrift sollte in einem <h2>-Tag platziert und alle Unterüberschriften sollten semantisch korrekt untergliedert mit <h3>-Tags beginnend bis <h6>-Tags (5. Unterüberschriftenebene) je nach Verschachtelungstiefe gegliedert werden.

In HTML5 können Artikelüberschriften, die in <article>-Tags eingebettet sind, ebenfalls in <h1>-Tags gebettet werden. Alle anderen Unterüberschriften können ab <h2> beginnend je nach Verschachtelungstiefe platziert werden. In HTML5 sollten ausserdem zusammenhängende Überschriften (z.B. Kicker oder Subline) mittels dem <hgroup>-Tag zusammengefasst werden, um unnötige Verschachtelungstiefen vorzubeugen.

Vermeidung nicht semantischer Verschachtelung

Überschriftenstrukturen mit Lücken zwischen den Unterüberschriften sollten vermieden werden. Überschriften sollten in der korrekten semantischen Reihenfolge, beginnen von <h1> als höchste und wichtigste Überschrift bis zu <h6> als niedrigste Unterüberschrift, genutzt werden. Alle Überschriftenstrukturen sollten keine Lücken zwischen den unterschiedlichen Überschriftengrößen aufweisen.

Regel: Vermeide <img>-Tags in Überschriften-Tags

<img>-Tags innerhalb Überschriftentags <h1> - <h6> sollten vermieden werden, da sie weniger gut les- und bewertbar für Suchmaschinen sind.

Um Bilder in Überschriften für weichere und abwechslungsreichere Schriften zu nutzen, sollten diese nur via CSS und Hintergrundbildern gesetzt werden.

Übliche HTML-Konstruktionen sind z.B. folgende:

<h2><span>Meine wichtige Überschrift</span></h2>

Mögliche Überschriftentags sind:

h1, h2, h3, h4, h5, h6

Regel: Nutze Semantische HTML-Tags

Eine gute Website sollte semantische HTML-Tags nutzen. Semantische HTML-Tags beschreiben bereits den darin platzierten Inhalt. Ein Absatz muss z.B. in <p>-Tags eingebettet sein, der für den englischen "Paragraph" steht.

Der Umfang der semantsichen Tags wurde mit HTML5 stark erweitert und Webentwickler können guten Frontend-HTML-Code mit nur wenigen nicht beschreibenden und nicht semantischen Tags wie <div> oder <span> produzieren.

Warum sollt eine Website semantischen HTML-Code nutzen?

Google und andere Suchmaschinen lieben sie, da man den Suchmaschinen Arbeit beim Interpretieren der Websiteinhalte abnimmt, um die wesentlichen Inhalte zu finden. Suchmaschinen belohnen gutes, semantisches HTML einer Website mit einer besseren Positionierung in den Suchergebnissen.

Erforderliche semantische HTML-Tags

In XHTML

Erforderliche HTML-Tags:

h1, p

Empfohlene HTML-Tags:

strong, em, blockquote, q, ul, ol, dl, dt, abbr, address, dfn, h2, h3, h4, h5, h6

In HTML5

Erforderliche HTML-Tags:

h1, p, header, footer, section, article, nav

Empfohlene HTML-Tags:

strong, em, blockquote, q, ul, ol, dl, dt, abbr, address, dfn, h2, h3, h4, h5, h6, aside, audio, video, canvas, command, details, embed, figure, figcaption, hgroup, mark, output, summary, time, wbr

Daneben gibt es in HTML5 neue Eingabefeld-Typen, deren Nutzung ebenfalls stark empfohlen wird:

color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week

Der Good Website Inspector wurde von Hubert Burda Media entwickelt.
Autor: Stefan Seifarth, Media Innovation Lab GmbH, Hubert Burda Media, Impressum & Datenschutz