Ausführbare HTML-Docs: Überschriften

Q: Wie viele Überschriften-Tags gibt es in HTML?

Sechs: , , , , und . ist die wichtigste (der Seitentitel) und die unwichtigste. Ein gibt es nicht; so ein Tag wird als unbekanntes Inline-Element behandelt.

Q: Wie groß sind HTML-Überschriften standardmäßig?

Bei der Standardschriftgröße von 16px stellen Browser h1 mit 32px (2em) dar, h2 mit 24px (1.5em), h3 mit 18.72px (1.17em), h4 mit 16px (1em), h5 mit 13.28px (0.83em) und h6 mit 10.72px (0.67em), alle fett.

Q: Darf eine Seite mehr als ein h1 haben?

HTML erlaubt es, aber ein einziges , das die Seite benennt, ist die klarste Struktur für Screenreader-Nutzer und Suchmaschinen. Nimm für die Hauptabschnitte darunter.

Q: Wie ändere ich die Größe einer Überschrift?

Setz font-size im CSS, zum Beispiel h2 { font-size: 20px; }, oder gib einer einzelnen Überschrift eine Klasse. Wähle eine Überschriftenebene nie wegen ihrer Standardgröße.

Die sechs HTML-Überschriften-Tags

HTML hat sechs Überschriftenebenen, <h1> bis <h6>. <h1> ist die oberste Ebene (der Titel der Seite) und <h6> die unterste. Browser zeigen jede Ebene kleiner als die vorherige an, alle fett und jede in einer eigenen Zeile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Tag	Standardgröße	Bei 16px Text
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> und <h6> sind standardmäßig kleiner als normaler Text, was viele überrascht. Die Größe ist nur ein Standardwert, und die nächsten Abschnitte zeigen, warum du die Ebene nie nach der Größe auswählen solltest.

Überschriften sind die Gliederung der Seite

Überschriften sind keine Dekoration. Zusammen bilden sie die Gliederung der Seite, wie das Inhaltsverzeichnis eines Buchs. Screenreader-Nutzer springen von Überschrift zu Überschrift, um zu finden, was sie suchen, und Suchmaschinen lesen sie, um die Themen der Seite zu verstehen.

Die Regel ist einfach: ein <h1> für den Seitentitel, <h2> für jeden Hauptabschnitt, <h3> für Unterabschnitte innerhalb eines <h2> und so weiter, ohne Ebenen zu überspringen. Dieses Beispiel baut aus den Überschriften ein Inhaltsverzeichnis, genau so, wie Hilfstechnologien sie sehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Ändere das zweite <h3> in <h5>, und die Gliederung zeigt eine Lücke: Wer über Überschriften navigiert, würde sich fragen, wo h4 geblieben ist.

Die Größe einer Überschrift ändern

Wähle die Ebene nach der Position in der Gliederung und leg das Aussehen dann mit CSS fest. Ein Titel in der Seitenleiste muss vielleicht ein <h2> sein, soll aber klein aussehen; ein Titel im Hero-Bereich kann ein <h1> sein, das sehr groß ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Das gilt auch umgekehrt: Nimm kein Überschriften-Tag, nur um Text groß oder fett zu machen. Für fette Wörter in einem Satz nimmst du <strong>, und für großen Text, der keine Überschrift ist, ein <p> mit einer Klasse. Die Text-Tags findest du auf der Seite zu fettem Text.

Untertitel und Slogans

Ein Untertitel direkt unter einer Überschrift ist meistens selbst keine Überschrift: Er beginnt keinen neuen Abschnitt. Nimm einen Absatz und fasse das Paar bei Bedarf mit <hgroup> zusammen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Die Gliederung bleibt sauber (ein h1, dann h2-Abschnitte), und der Slogan steht optisch trotzdem beim Titel.

Auf eine Überschrift verlinken

Gib einer Überschrift eine id, und jeder Link mit #id im href springt direkt dorthin. So funktionieren Inhaltsverzeichnisse und Buttons wie „Link zum Abschnitt kopieren“:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Häufige Fehler

Die Ebene nach der Größe auswählen. Wähle nach der Position in der Gliederung und style dann mit CSS.
Ebenen überspringen. Ein Sprung von <h2> direkt zu <h4> stört die Navigation für Screenreader-Nutzer.
Überschriften zur Betonung. Eine fette Zeile in einem Absatz ist <strong>, nicht <h4>.
Kein <h1> oder ein Logo als einziges <h1>. Das <h1> sollte den Inhalt der Seite benennen, etwa den Titel des Artikels oder Produkts.
Leere Überschriften. Eine Überschrift mit nur einem Icon oder gar nichts darin wird als leer angesagt. Schreib echten Text hinein.

Häufig gestellte Fragen

Wie viele Überschriften-Tags gibt es in HTML?

Sechs: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. <h1> ist die wichtigste (der Seitentitel) und <h6> die unwichtigste. Ein <h7> gibt es nicht; so ein Tag wird als unbekanntes Inline-Element behandelt.

Wie groß sind HTML-Überschriften standardmäßig?

Bei der Standardschriftgröße von 16px stellen Browser h1 mit 32px (2em) dar, h2 mit 24px (1.5em), h3 mit 18.72px (1.17em), h4 mit 16px (1em), h5 mit 13.28px (0.83em) und h6 mit 10.72px (0.67em), alle fett.

Darf eine Seite mehr als ein h1 haben?

HTML erlaubt es, aber ein einziges <h1>, das die Seite benennt, ist die klarste Struktur für Screenreader-Nutzer und Suchmaschinen. Nimm <h2> für die Hauptabschnitte darunter.

Darf ich Überschriftenebenen überspringen, etwa von h2 zu h4?

Lieber nicht. Screenreader-Nutzer navigieren nach Überschriftenebene, und ein Sprung von h2 zu h4 deutet auf einen fehlenden Abschnitt hin. Wähle die Ebene nach der Position in der Gliederung und ändere die Größe mit CSS.

Wie ändere ich die Größe einer Überschrift?

Setz font-size im CSS, zum Beispiel h2 { font-size: 20px; }, oder gib einer einzelnen Überschrift eine Klasse. Wähle eine Überschriftenebene nie wegen ihrer Standardgröße.

Verwandte Konzepte