<h1>

Stell dir eine Webseite wie ein Buch vor: Das <h1> ist der Buchtitel auf dem Cover. Es gibt pro Buch nur einen Titel, und genauso sollte es pro Seite nur ein <h1> geben. Die <h2>-Elemente sind dann die Kapitelüberschriften, <h3> die Unterkapitel und so weiter.

• <h1> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
• Browser stellen <h1> standardmäßig in großer, fetter Schrift dar (ca. 2em)
• Es sollte einmal pro Seite verwendet werden und den Hauptinhalt der Seite beschreiben
• Suchmaschinen nutzen <h1> als starken Ranking-Faktor: Der Text darin sollte das Hauptthema der Seite widerspiegeln
• Screenreader ermöglichen Navigation über Überschriften: Nutzer können direkt von Überschrift zu Überschrift springen, um sich einen Überblick zu verschaffen

Seitenstruktur mit Überschriften-Hierarchie

Eine typische Seite beginnt mit einem <h1> als Hauptüberschrift und nutzt dann <h2> und <h3> für die Unterabschnitte. Die Hierarchie sollte logisch aufgebaut sein (keine Ebene überspringen):

<h1>HTML lernen für Anfänger</h1>
<p>In diesem Tutorial lernst du die Grundlagen von HTML.</p>

<h2>Was ist HTML?</h2>
<p>HTML steht für HyperText Markup Language.</p>

<h3>Die Geschichte von HTML</h3>
<p>HTML wurde 1993 erstmals veröffentlicht.</p>

<h2>Dein erstes HTML-Dokument</h2>
<p>Lass uns direkt loslegen!</p>

h1 mit weiteren Inline-Elementen

Du kannst innerhalb eines <h1> auch Inline-Elemente wie <span>, <em> oder <a> verwenden, um Teile der Überschrift zu betonen oder zu verlinken:

<h1>Alles über <em>CSS Grid</em></h1>

Überschriften sind eines der wichtigsten Navigationsmittel für Screenreader-Nutzer. Viele blinde Nutzer lassen sich zuerst alle Überschriften einer Seite vorlesen, um den Inhalt zu überblicken, ähnlich wie du ein Inhaltsverzeichnis überfliegst.

• Nur ein <h1> pro Seite: Mehrere <h1> verwirren Screenreader und Suchmaschinen. Nutze <h2> für die nächste Ebene.
• Keine Ebenen überspringen: Springe nicht von <h1> direkt zu <h3>. Screenreader-Nutzer könnten denken, dass ein Abschnitt fehlt.
• Überschriften nicht nur für die Optik: Verwende <h1> nicht, weil du großen Text willst. Dafür gibt es CSS. Die Überschriften-Ebene sollte immer die inhaltliche Struktur widerspiegeln.

• Mehrere h1 auf einer Seite: Auch wenn HTML5 technisch mehrere <h1> in verschiedenen <section>-Elementen erlaubt, raten sowohl Google als auch die Accessibility-Community davon ab. Verwende ein einziges <h1> für den Seitentitel und <h2> für die Hauptabschnitte.

• h1 für Styling missbrauchen: Wenn du einfach großen, fetten Text brauchst, verwende CSS (font-size, font-weight) statt ein <h1>. Die Überschriften-Ebene bestimmt die Dokumentstruktur, nicht das Aussehen.

• Überschriften-Ebenen überspringen: Von <h1> direkt zu <h4> zu springen, ist ungültiger Gebrauch. Die Hierarchie sollte immer lückenlos sein: h1 → h2 → h3 → h4.

Das h1-Element wird seit der allerersten HTML-Version von allen Browsern unterstützt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Überschriften funktionieren in den meisten Email-Clients, allerdings variiert das Standard-Styling. Inline-Styles sorgen für konsistente Darstellung.

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

  Outlook überschreibt teilweise die Standard-Margins und -Schriftgrößen von Überschriften. Verwende Inline-Styles für konsistentes Aussehen.

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett