HTML h1, h2, h3 … h6 • Überschrift / Titel

Inhalt logisch strukturieren

Ohne CSS stellen die Browser h1- bis h6-Header in abgestufen Größen dar, wobei h1 die größte und h6 die kleinste Schrift ist. Mit den alten HTML-Versionen waren Überschriften das einzige Mittel, um den Inhalt von Webseiten logisch zu strukturieren.

Für den Leser soll 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 die Schriftgröße 500 im Font vorhanden und geladen ist.

h-Elemente sollen nicht benutzt werden, um Fließtext größer oder kleiner darzustellen – 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-Elemente – sie erzeugen einen Zeilenumbruch. Die Browser geben dem h-Tag einen Abstand vor und nach dem Element durch CSS margin, um vorangehende und nachfolgende Absätze sichtbar von den Überschriften zu trennen.

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 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 einer Überschrift: 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- vs h-Element

HTML hat weitere Elemente mitgebracht und die Flut der neutralen div-Elemente durch semantische Tags eingedämmt: header, article, section.

header-Elemente enthalten Einleitungen und Banner, z.B. eine oder mehrere Überschriften h1 bis h6, u.U. ein Logo, Informationen zum Autor, Datum des Beitrags. Innerhalb einer Seite kann das header-Element mehrfach verwendet werden.

section-Elemente lassen sich mit Kapiteln vergleichen, sie können für eine Einleitung verwendet werden, Kommentare oder Kontaktinformationen einschließen.

article-Elemente sind in sich geschlossene Inhalte, z.B. die Beiträge im Content Management System, Produktbeschreibungen oder die Artikel eines Online-Magazins.

Header und Content Management Systeme

Die Überschriften von Blog-Posts in Content Management Systemen nutzen i.d.R. h1 für den Titel, h2 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 HTML, CSS und Javascript</h1>
   <h2>HTML 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.

article, section, nav und aside strukturieren die Seite und können mit einem HTML header-Element ausgestattet werden. In jedem header-Element 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.