Überschriften im HTML5

HTML5-Webseite und die Überschriften

Habe schon einen Artikel geschrieben fürs HTML: Überschriften im HTML

Bei HTML5 können Sie für Ihre Webseite bis zu sechs Überschrifts-Ebenen vergeben, um Ihre Seite zu unterteilen. Zeichnen Sie jede Überschrift mit einem der Elemente h1 bis h6 aus. Dabei ist h1 eine Überschrift erster Ordnung, h2 eine Unterüberschrift davon, h3 wiederum eine Unterüberschrift von h2 usw. Wie Sie bald erfahren, gehören Überschriften zu den wichtigsten HTML5-Elementen jeder Seite.

Stellen Sie sich die h1-h6-Überschriften ähnlich vor wie jene aus Nicht-HTML5-Dokumenten, die Sie sonst so verfassen, z.B. ein Verkaufsbericht, eine Hausarbeit, ein Produkthandbuch, ein Zeitungsartikel. Wenn Sie solche Arten von Dokumenten schreiben, kennzeichnen Sie jeden Hauptabschnitt des Inhalts passenderweise mit einer Überschrift und einer beliebigen Zahl von Unterüberschriften (und weiteren Unter-Unterüberschriften). Zusammengenommen repräsentieren diese Überschriften die Gliederung des Dokuments. Das Gleiche gilt für Ihre Webseiten.

Eine Webseite mit Überschriften strukturieren

• Im body-Abschnitt des HTML5-Dokuments tippen Sie <hn> ein, wobei abhängig von der Überschriftsebene, die Sie erstellen wollen, n für eine Zahl zwischen 1 bis 6 steht. h1 ist die wichtigste und h6 die am wenigsten wichtige Überschrift.
• Geben Sie den Inhalt der Überschrift ein.
• Tippen Sie </hn> ein, wobei n die gleiche Zahl ist wie in Schritt 1.

Hier sind HTML5 website and the headings und Heading levels in HTML5 – als h2-Elemente ausgezeichnet – Unterüberschriften der obersten Überschrift Headings in HTML5, weil diese ein h1 ist. (Der Teil lang="en" verweist darauf, dass der Inhalt auf Englisch ist – er wirkt sich nicht auf die Gliederung aus.) Wäre Heading levels in HTML5 stattdessen ein h3, wäre es eine Unterüberschrift von HTML5 website and the headings (und eine Unterunterüberschrift von Headings in HTML5.) Die leere Zeile zwischen den Überschriften ist optional und wirkt sich nicht auf die Darstellung der Inhalte aus. Wenn Sie gleich darauf den Rest der Seite schreiben würden, dann würden die damit zusammenhängenden Inhalte (Absätze, Bilder, Videos usw.) direkt nach jeder Überschrift folgen.

Überschriften im HTML5

Ihre Überschriften h1-h6 sind wegen ihrer Wirkung auf die Definition Ihrer Seitengliederung besonders wichtig. Standardmäßig stellen Browser Überschriften fortschreitend kleiner dar, wenn sie von h1 nach h6 gehen. Aber vergessen Sie nicht, Ihre Überschriftenebenen einzig danach auszurichten, welche Hierarchie für Ihren Inhalt passend ist, und nicht danach, wie groß oder klein der Text erscheinen soll. Damit wird Ihre Seite semantisch stärker, was im Gegenzug sowohl die SEO als auch die Accessibility (Zugänglichkeit) verbessert. Sie können die Überschriften z.B. mit einer bestimmten Schriftart, Schriftgröße bzw. Schriftfarbe usw. formatieren.

Suchmaschinen bewerten Ihre Überschriften sehr stark, vor allem solche in h1 (was nicht bedeutet, dass Sie Ihre Seite mit h1s vollstopfen sollten – dafür sind die Suchmaschinen zu clever). Mittlerweile nutzen Screenreader die Überschriften, um auf einer Seite per Tastatur navigieren zu können, weil man damit schnell auf die Inhalte einer Seite zugreifen und finden kann, was einen am meisten interessiert, ohne sich erst alles vorlesen lassen zu müssen. Noch ein weiterer Grund, sich eine logische Überschriftenhierarchie zuzulegen.

Gestalten Sie die Überschriftenebenen auf Ihrer Site durchgehend konsistent, um eine bessere Nutzererfahrung zu schaffen.

Sie können einer Überschrift auch ein id mitgeben, wenn Sie einen direkten Link auf diese Überschrift erstellen wollen.

HTML5 unterscheidet sechs Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Beispiel

<hgroup>
	<h1>
		Überschrift 1. Ordnung
	</h1>
	<h2>
		Überschrift 2. Ordnung
	</h2>
	<h3>
		Überschrift 3. Ordnung
	</h3>
	<h4>
		Überschrift 4. Ordnung
	</h4>
	<h5>
		Überschrift 5. Ordnung
	</h5>
	<h6>
		Überschrift 6. Ordnung
	</h6>
</hgroup>

Überschriften im HTML5

<h[1-6]> (h=heading=Überschrift) leitet eine Überschrift ein. Die Nummer steht für die Überschriftenebene. 1 ist die höchste Ebene, 6 die niedrigste. Dahinter folgt der Text der Überschrift.

</h[1-6]> beendet die Überschrift und steht am Ende des Überschriftentextes. Die Nummern bei einleitendem und abschließendem Tag müssen gleich sein.

In größeren Dokumenten kommt es häufig vor, dass zum Beispiel Überschriften 1., 2. und 3. Ordnung unmittelbar hintereinander notiert werden, bevor der erste Fließtextabsatz beginnt. Aufeinanderfolgende Überschriften ohne andere Elemente dazwischen können Sie wie im Beispiel oben in <hgroup> ... </hgroup> einschließen.

INFO

Während die Elemente h1 bis h6 schon immer zum HTML5-Standard gehörten, wurde das hgroup-Element erst mit HTML5 in den Standard aufgenommen.

Nutzen Sie Überschriften-Elemente nur, um Inhalte zu kennzeichnen, die von ihrer Bedeutung her tatsächlich Überschriften sind. Überschriften-Elemente sind nicht dazu gedacht, Text einfach groß und fett zu machen!

Verwenden Sie CSS bzw. CSS-Eigenschaften zur Formatierung und Gestaltung von Überschriften.