HTML: Überschriften formatieren mit HTML-Heading-Tags

Mit <h>-Tags verleihen Sie Ihrem HTML-Dokument bzw. Ihren Inhalten die notwendige Grundstruktur. Mithilfe der verschiedenen verfügbaren Typen wie <h1> oder <h2> machen Sie die Hierarchie Ihrer Webseiten für Suchmaschinen und User gleichermaßen greifbarer.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

Was sind HTML-Heading-Tags und welche Bedeutung haben sie?

HTML-Heading-Tags sind HTML-Elemente, mit deren Hilfe Sie Überschriften in einem HTML-Dokument definieren. Diese spezifische Art von HTML-Tags ist für Webseiten sowohl von struktureller als auch von semantischer Bedeutung und erfüllt insbesondere folgende Zwecke:

  • Hierarchie und Struktur: Heading-Tags helfen Besuchern und Besucherinnen sowie den Suchmaschinen dabei, Ihre Inhalte und deren Struktur leichter zu verstehen.
  • Suchmaschinenoptimierung: Der richtige Einsatz von HTML <h1> und Co. kann Ihr Ranking in den Suchmaschinen positiv beeinflussen. Insbesondere durch die Verwendung wichtiger Keywords in den Überschriften sammeln Sie entscheidende Pluspunkte.
  • Layout und Design: Die HTML-Heading-Tags sind auch für eine bequeme grafische Gestaltung unverzichtbar. Sie legen in Ihrem CSS-Stylesheet das Aussehen der einzelnen Heading-Typen zentral fest, und spätere Anpassungen im Design übertragen sich sofort auf alle Überschriften mit HTML-<h>-Auszeichnung.
  • Barrierefreiheit: Screenreader greifen auf HTML-Überschriften zurück, um Ihre Inhalte Menschen mit Sehbehinderungen sinnvoll und verständlich vorlesen zu können.
Hinweis

Das Heading-Tag <h> für Überschriften ist nicht mit dem Header-Tag<header> zu verwechseln. Letzterer wird dafür verwendet, den Kopfbereich eines HTML-Dokuments bzw. einer Webseite zu kennzeichnen. Hier finden sich Elemente wie Logos und Markennamen, eine Navigation oder CTA-Elemente.

Welche Typen von HTML-Heading-Tags gibt es?

Für die Kennzeichnung von HTML-Überschriften sind die Tags <h1> bis <h6> vorgesehen. <h1> stellt dabei die wichtigste Überschrift dar, die typischerweise im Layout auch durch die größte Schriftart gekennzeichnet wird. Mit dem Typen <h6> definiert man die Überschrift, die am unwichtigsten ist und in der Hierarchie die unterste Stufe einnimmt:

  • HTML <h1>: Die <h1> bildet die Hauptüberschrift einer Webseite. Sie sollte daher immer das Hauptthema bzw. den Titel der gesamten Seite widerspiegeln. Der Einsatz von Keywords ist hier besonders effizient und wichtig.
  • HTML <h2>: Mit dem Tag <h2> werden die wichtigsten Unterüberschriften definiert. Sie leiten Abschnitte ein, die im Zusammenhang mit dem in der <h1> angekündigten Hauptthema stehen.
  • HTML <h3> bis <h6>: Die Tags <h3> bis <h6> verwendet man für Unterüberschriften, die Unterabschnitte oder verschachtelte Inhalte innerhalb eines <h2>-Abschnitts einleiten.

Mit Ausnahme von <h1> können Sie alle HTML-Heading-Typen mehrmals pro Seite verwenden. Wichtig ist dabei, dass Sie keine Stufe überspringen – auf einen <h2>-Abschnitt sollte also kein Content unter einer <h4>-Überschrift folgen.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Syntax der HTML-<h>-Tags inkl. Code-Beispiel

Die verfügbaren HTML-Überschriften lassen sich immer nach dem gleichen, für HTML-Tags typischen Muster in ein Dokument einbinden: Mit einem einleitenden Tag definieren Sie den Start einer Überschrift, ein abschließendes Tag markiert das Ende der Überschrift. Die Zahlen in den beiden Tags müssen dabei immer gleich sein. Die Syntax sieht also folgendermaßen aus (hier exemplarisch für eine <h1>):

<h1>*TEXT*</h1>
html

Abschließend wollen wir die Verwendung von HTML-Heading-Tags anhand eines konkreten Beispiels verdeutlichen. Die Inhalte einer exemplarischen Kochseite werden mithilfe von Unterüberschriften der Typen <h2> und <h3> übersichtlich strukturiert. Auf diese Weise können User bequem zwischen den verschiedenen Kategorien von Rezepten navigieren:

<!DOCTYPE html>
<html>
<body>
<h1>Rezepte-Tipps für Vorspeisen, Hauptgerichte und Desserts</h1>
<p>Entdecken Sie köstliche Rezepte und kulinarische Tipps.</p>
	<h2>Snacks und Vorspeisen</h2>
	<p>Kleine Gerichte und Appetithäppchen für zwischendurch.</p>
		<h3>Salate</h3>
		<p>Frische und knackige Salatideen.</p>
		<h3>Dips und Aufstriche</h3>
		<p>Rezepte für leckere Dips und Aufstriche.</p>
	<h2>Hauptgerichte</h2>
	<p>Leckere und herzhafte Hauptgerichte für jede Gelegenheit.</p>
		<h3>Vegetarische Gerichte</h3>
		<p>Gesunde und schmackhafte vegetarische Rezepte.</p>
		<h3>Fleischgerichte</h3>
		<p>Rezepte für saftige und aromatische Fleischgerichte.</p>
	<h2>Desserts</h2>
	<p>Süße Verführungen und Nachspeisen für den perfekten Abschluss.</p>
		<h3>Kuchen und Torten</h3>
		<p>Backrezepte für köstliche Kuchen und Torten.</p>
		<h3>Eis und Sorbets</h3>
		<p>Erfrischende und leckere Eisrezepte.</p>
</body>
</html>
html
War dieser Artikel hilfreich?