HTML h1, h2, h3 … h6 • Überschrift (Header)

h1 bis h6-Tags erzeugen Überschriften in HTML-Seiten. h1 steht für die wichtigste Überschrift, gefolgt von h2, h3 usw.. Ohne CSS stellen die h1- bis h6-Header einen Text in abgestufen Größen dar, wobei h1 die größte und h6 die kleinste Schrift benutzt.

Die Überschriften bilden hierarchische Bereiche und strukturieren die Seite – für den Leser, die Suchmaschinen und Screenreader.

HTML h1, h2, h3, h4, h5, h6 Überschriften

h1 bis h6

Mit den HTML-Versionen vor HTML5 waren Überschriften das einzige Mittel, um den Inhalt von Webseiten logisch zu strukturieren.

Für den Leser sollte die Struktur des Inhalts durch Größe und Farbe der Überschriften klar erkennbar sein; für Screenreader und Suchmaschinen anhand der Hierarchie der h1, h2, h3-Tags. In der HTML4-Spezifikation stand auch noch, dass keine Überschriftsebenen übersprungen werden sollten.

<h1>Webseiten mit HTML, CSS und Javascript</h1>

   <h2>HTML für die Struktur</h2>
      <h3>HTML-Tags für den header</h3>
         <h4>meta Informationen zum Dokument</h4>
         <h4>link- und title-Tag</h4>
      <h3>Tags für den body</h3>
         <h4>h1, h2 … Überschriften</h4>
         <h4>p, pre, ul, ol</h4>
         
   <h2>CSS für Layout und Typografie</h2>
	
   <h2>Javascript für Animationen</h2>

Per Vorgabe rendern die Browser Überschriften mit font-weight : bold bzw. font-weight : 700. Mit den abgestuften Gewichten der Webfonts kann der Fettschnitt gemildert werden.

h1, h2, h3, h4, h5, h6 { font-weight: 500 }

Natürlich nur, wenn der Schriftstil 500 vorhanden und geladen ist.

h-Tags sollen nicht benutzt werden, den Text größer rendern zu lassen – dafür ist CSS zuständig. h1 bis h6 sind für Überschriften aus logischer Sicht vorgesehen. Dabei ist das h1-Tag das Pendant zur Schlagzeile in der Zeitung.

h1, h2, h3, … sind Block-Tags – sie erzeugen einen Zeilenumbruch. Die Browser geben dem h-Tag einen Abstand durch die Eigenschaft margin vor und nach dem Element, so dass vorangehende und nachfolgende Absätze anhand der Überschrift getrennt werden.

Überschrift H1
2em
Überschrift H2
1.5em
Überschrift H3
1.17em
Überschrift H4
1em
Überschrift H5
0.83em
Überschrift H6
0.75em

1em entspricht 16 Pixel – die Breite des Buchstaben M. Die exakte Schriftgröße hängt allerdings von dem jeweiligen Browser ab.

Heading Content

h1 bis h6-Tags sind Heading Content, und sollen keine Elemente des Flow Content wie div, p, figure oder ul-Elemente enthalten. Mit dem entsprechenden CSS würden die Überschriften zwar wie gewünscht im Browser erscheinen, aber diese Elemente durchbrechen die logische Gliederung des Dokuments.

Die Fehlermeldung des Validators kann man zwar getrost ignorieren, aber für Screenreader und auch für die Suchmaschinen wird die logische Struktur des Dokuments aufgelöst.

Kein Problem ist Phrasing Content in einem h1 bis h6-Tag: a-Tags, input, em, span und <br> und auch Embedded Content wie img, svg oder canvas ist unproblematisch.

Mehr zum Content-Modell von HTML 5: Korrektes HTML.

Header und Content Management Systeme

Die Überschriften von Blog-Posts in Content Management Systemen nutzen i.d.R. h2-Tags; h3 unterteilt dann den Hauptinhalt in Sektionen. h3, h4, h5 und h6 sollten den Lesen schnell über den Inhalt informieren und Seiten in überschaubare Abschnitte unterteilen.

Insgesamt sollen die h1, h2, h3-Tags den Leser durch die Seite führen und durch einen prägnanten Text schnell über den Inhalt informieren.

Die Folge der header-Tags kann sich an den Inhaltsverzeichnissen von Sachbüchern orientieren.

<h1>Webseiten mit HTML5, CSS und Javascript</h1>
   <h2>HTML5 für modernes Webdesign</h2>
      <h3>HTML Syntax und Attribute</h3>
      <h3>HTML-Tags </h3>
   <h2>CSS für das Design von Webseiten</h2>
      <h3>Einführung in CSS</h3>
      <h3>CSS-Selektoren</h3>
   <h2>Javascript für Webseiten</h2>
      <h3>Javascript-Programmierung</h3>
      <h3>Funktionen in Javascript</h3>

h1 und Suchmaschinen-Optimierung

Bis einschließlich XHTML sollte eine Seite nur eine Überschrift h1 enthalten. Der Text des h1-Tags spielt eine besondere Rolle in der Suchmaschinen-Optimierung.

Suchmaschinen werten eine Seite nicht automatisch ab, wenn es mehr als eine h1-Überschrift gibt – wenn die sich h1-Tags nicht geradezu häufen: YouTube-Video von Matt Cutts zur Frage, ob mehrere h1-Tags auf einer Seite schädlich sind.

Wordpress bringt von Haus aus die Überschriften von Beiträgen (Posts) auf der Startseite in h1. Bing allerdings empfiehlt, sich auf ein h1 pro Seite zu beschränken.

Mit HTML5 strukturieren article, section, nav und aside die Seite und können mit einem HTML5 header-Tag ausgestattet werden. In jedem header darf theoretisch ein h1-Tag sitzen. Empfehlenswert ist so eine Struktur nicht.

Der Validator gibt zwar keine Fehlermeldung, aber eine Warnung aus:

Consider using the h1 element as a top-level heading only

Dahinter steckt, dass viele Screen Reader unter h1 den Top Level Header erwarten. h1 bis h6 strukturieren die Seite für den Leser.