Feb 2008

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

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

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

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.

h-Tags sollen nicht dazu benutzt werden, den Text größer rendern zu lassen – dafür ist CSS besser geeignet. h1, h2, h3 … 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.

Alle 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.

<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<h3>Lorem ipsum</h3>
html_beispiele/h.html

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

Header in Content Management Systemen

Vorsichtige Webmaster nutzen nur einen h1-Header.

Die Überschriften von Blog-Posts 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, h2, h3 … und Suchmaschinen-Optimierung

Immer wieder lesen wir, dass eine Webseite nur ein h1-Tag als Überschrift enthalten soll. 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.

Attribute und Events für h1, h2, h3 …

AttributeEvents