Mit <h>-Tags verleihen Sie Ihrem HTML-Dokument bzw. Ihren Inhalten die not­wen­di­ge Grund­struk­tur. Mithilfe der ver­schie­de­nen ver­füg­ba­ren Typen wie <h1> oder <h2> machen Sie die Hier­ar­chie Ihrer Webseiten für Such­ma­schi­nen und User glei­cher­ma­ßen greif­ba­rer.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

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

HTML-Heading-Tags sind HTML-Elemente, mit deren Hilfe Sie Über­schrif­ten in einem HTML-Dokument de­fi­nie­ren. Diese spe­zi­fi­sche Art von HTML-Tags ist für Webseiten sowohl von struk­tu­rel­ler als auch von se­man­ti­scher Bedeutung und erfüllt ins­be­son­de­re folgende Zwecke:

  • Hier­ar­chie und Struktur: Heading-Tags helfen Besuchern und Be­su­che­rin­nen sowie den Such­ma­schi­nen dabei, Ihre Inhalte und deren Struktur leichter zu verstehen.
  • Such­ma­schi­nen­op­ti­mie­rung: Der richtige Einsatz von HTML <h1> und Co. kann Ihr Ranking in den Such­ma­schi­nen positiv be­ein­flus­sen. Ins­be­son­de­re durch die Ver­wen­dung wichtiger Keywords in den Über­schrif­ten sammeln Sie ent­schei­den­de Plus­punk­te.
  • Layout und Design: Die HTML-Heading-Tags sind auch für eine bequeme grafische Ge­stal­tung un­ver­zicht­bar. Sie legen in Ihrem CSS-Style­sheet das Aussehen der einzelnen Heading-Typen zentral fest, und spätere An­pas­sun­gen im Design über­tra­gen sich sofort auf alle Über­schrif­ten mit HTML-<h>-Aus­zeich­nung.
  • Bar­rie­re­frei­heit: Screen­rea­der greifen auf HTML-Über­schrif­ten zurück, um Ihre Inhalte Menschen mit Seh­be­hin­de­run­gen sinnvoll und ver­ständ­lich vorlesen zu können.
Hinweis

Das Heading-Tag <h> für Über­schrif­ten ist nicht mit dem Header-Tag<header> zu ver­wech­seln. Letzterer wird dafür verwendet, den Kopf­be­reich eines HTML-Dokuments bzw. einer Webseite zu kenn­zeich­nen. Hier finden sich Elemente wie Logos und Mar­ken­na­men, eine Na­vi­ga­ti­on oder CTA-Elemente.

Welche Typen von HTML-Heading-Tags gibt es?

Für die Kenn­zeich­nung von HTML-Über­schrif­ten sind die Tags <h1> bis <h6> vor­ge­se­hen. <h1> stellt dabei die wich­tigs­te Über­schrift dar, die ty­pi­scher­wei­se im Layout auch durch die größte Schrift­art ge­kenn­zeich­net wird. Mit dem Typen <h6> definiert man die Über­schrift, die am un­wich­tigs­ten ist und in der Hier­ar­chie die unterste Stufe einnimmt:

  • HTML <h1>: Die <h1> bildet die Haupt­über­schrift einer Webseite. Sie sollte daher immer das Haupt­the­ma bzw. den Titel der gesamten Seite wi­der­spie­geln. Der Einsatz von Keywords ist hier besonders effizient und wichtig.
  • HTML <h2>: Mit dem Tag <h2> werden die wich­tigs­ten Un­ter­über­schrif­ten definiert. Sie leiten Ab­schnit­te ein, die im Zu­sam­men­hang mit dem in der <h1> an­ge­kün­dig­ten Haupt­the­ma stehen.
  • HTML <h3> bis <h6>: Die Tags <h3> bis <h6> verwendet man für Un­ter­über­schrif­ten, die Un­ter­ab­schnit­te oder ver­schach­tel­te Inhalte innerhalb eines <h2>-Ab­schnitts einleiten.

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

Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung

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

Die ver­füg­ba­ren HTML-Über­schrif­ten lassen sich immer nach dem gleichen, für HTML-Tags typischen Muster in ein Dokument einbinden: Mit einem ein­lei­ten­den Tag de­fi­nie­ren Sie den Start einer Über­schrift, ein ab­schlie­ßen­des Tag markiert das Ende der Über­schrift. Die Zahlen in den beiden Tags müssen dabei immer gleich sein. Die Syntax sieht also fol­gen­der­ma­ßen aus (hier ex­em­pla­risch für eine <h1>):

<h1>*TEXT*</h1>
html

Ab­schlie­ßend wollen wir die Ver­wen­dung von HTML-Heading-Tags anhand eines konkreten Beispiels ver­deut­li­chen. Die Inhalte einer ex­em­pla­ri­schen Kochseite werden mithilfe von Un­ter­über­schrif­ten der Typen <h2> und <h3> über­sicht­lich struk­tu­riert. Auf diese Weise können User bequem zwischen den ver­schie­de­nen Ka­te­go­rien von Rezepten na­vi­gie­ren:

<!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
Zum Hauptmenü