CSS, HTML und Javascript mit {stil}

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

h1, h2, h3, h4, h5, h6 – Überschrift

HTML h-Tags erzeugen Überschriften in HTML-Seiten. h1 steht für die wichtigste Überschrift, gefolgt von h2 … 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, für Suchmaschinen und Screenreader.

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. Das ist heute beim Einsatz von Content Management Systemen kaum noch umzusetzen.

<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 Überschrift mit font-weight: bold. Mit den abgestuften Gewichten der Webfonts kann bold 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 Ebene 1

Überschrift Ebene 2

Überschrift Ebene 3

Die exakte Schriftgröße hängt von dem jeweiligen Browser ab.

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.