# 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.

## 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/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](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-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](https://www.ionos.de/digitalguide/websites/web-entwicklung/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](https://www.ionos.de/digitalguide/online-marketing/verkaufen-im-internet/was-ist-ein-call-to-action-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.

## 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>`):

```html
<h1>*TEXT*</h1>
```

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:

```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>
<div class="hash d-none" hidden>hash_02686c1dc9a1d6d8dba43592b83b775d43d917a7</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ueberschriften/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ueberschriften/) for AI/LLM consumption.