CSS, HTML UND JAVASCRIPT MIT {STIL}

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>

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 …

Attribute	Events
class dir id lang style title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup