Sie sind hier: Startseite -> HTML-Grundlagen -> h1 - h6 (Text -> Überschrift)

HTML Überschriften (H1 bis H6)

H1 bis H6: die Überschriften in HTML

Ein wichtiges Tool für die Gestaltung einer Webseite ist die Möglichkeit der Überschrift. In HTML werden standardmäßig sechs Stück bereitgestellt, wobei man über CSS noch zusätzliche Texte als Absatz oder mit dem span-Tag definieren könnte. Aber mit den sechs Standardangaben sollte man eigentlich das Auslangen finden.

Die Standardangaben sind in die Tags H1 bis H6 unterteilt, wobei H1 die größte Überschrift ist, H6 die kleinste. Würde man keine CSS-Definitionen zum Einsatz bringen und man schreibt zwischen den Tags die Überschrift "ich bin eine Überschrift" und wiederholt dies mit dem H6-Tag, dann sieht man die originale Einstellung.

HTML Überschriften auf der Webseite

Wann nutze ich welche Überschrift?


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


Die 6 Überschriften haben verschiedene Wertungen. Von h3 bis h6 kann man so viele Überschriften einsetzen, wie man will, aber bei h1 und h2 ist das nicht so. Die größte Überschrift h1 soll das Thema wiedergeben und wird auch von den Suchmaschinen eingefordert.

Der Titel der Seite via title-Tag, die Beschriftung mit dem description meta-tag im Kopfteil der Seite und die h1-Überschrift sollten eine Einheit sein und das gleiche Thema umschreiben, sodass die Suchmaschinen erkennen, worum es wirklich auf dieser Seite geht. Die h1-Überschrift darf nicht fehlen, sie darf aber auch nur einmal benutzt werden. Zwei h1-Überschriften sind ungültig. Auch die h2-Überschrift soll nur einmal genutzt werden. Ab h3 kann man viele Überschriften wählen.

Der Tipp ist, eine große h1-Überschrift zu wählen, weil dann auch die Besucherinnen und Besucher sofort sehen, worum es hier geht. Die h2-Überschrift kann man als Unterüberschrift mit zusätzlicher Ergänzung einbauen und die Zwischenüberschriften mitten im Text werden meist mit h3 definiert. Die Überschriften h4 bis h6 verwendet kaum jemand, weil zu viele Überschriften verwirren eher.

Überschriften mit CSS gestalten

Modernes Webdesign macht sich deshalb die vielseitigen Möglichkeiten von CSS zunutze und so kann man die Überschriften mit bestimmten Schriftgrößen definieren, man kann den Abstand zum nächsten Text oder Bild auf Pixel genau anführen und hat so viel mehr Gestaltungsfreiraum. Weiterhin kann man unterschiedlich große Überschriften wählen, wobei man durch CSS auch dafür sorgen könnte, dass die H2-Überschrift größer ist als die H1. Das macht aber wenig Sinn und sorgt nur für Verwirrung.


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


In Kombination mit den CSS-Befehlen lassen sich unterschiedlich farblich gestaltete Überschriften mit verschiedener Schriftgröße erstellen, die zum Gelingen des Layouts beitragen.

Lesen Sie auch

Der Text ist der eigentliche Inhalt, wobei es nicht immer Text sein muss. Manche Webseiten bestehen aus einem einzigen Forum, andere aus verschiedenen Bildergalerien. Aber der Text ist meistens im Mittelpunkt und damit auch seine mögliche Gestaltung. Ein wesentlicher Faktor ist die gewählte Textgröße und dann ist man auch schon bei der Schriftgestaltung von Fett bis Kursiv oder dem Unterstreichen angelangt.

Und dann gibt es die Themen, die bei der generellen Gestaltung wichtig sind. Dazu gehört die Überschrift, dazu gehört die Entscheidung zwischen Absatz und Zeilenumbruch sowie die Links als weiterführende Technik auf die nächsten Seiten, in der Navigation oder auch zu externen Quellen.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Überschrift in HTMLArtikel-Thema: HTML Überschriften (H1 bis H6)
Beschreibung: Die 🌍 Überschriften werden in HTML für die Webseite mit ✅ sechs Stufen definiert, die jeweils über CSS eigens gestaltet werden können.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel