Ausführbare HTML-Docs: HTML Header

Q: Was ist der Unterschied zwischen head und header in HTML?

ist der unsichtbare Teil des Dokuments mit , -Tags und Links zu Stylesheets, und davon gibt es genau einen. ist sichtbarer Inhalt in , und eine Seite kann mehrere haben.

Q: Wie bleibt ein Header beim Scrollen oben?

Gib ihm position: sticky; top: 0; plus eine Hintergrundfarbe und einen z-index, damit der Inhalt darunter durchscrollt. Sticky funktioniert nur, solange das Elternelement des Headers höher ist als der Header, und ein Vorfahre mit overflow: hidden verhindert, dass er an der Seite kleben bleibt.

So erstellst du einen Header in HTML

Pack den oberen Teil deiner Seite (Logo, Name der Website, Hauptmenü) in ein <header>-Element. Es ist ein Block ohne Standardaussehen, ein paar Zeilen CSS machen daraus also eine Leiste:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto am Logo schiebt Menü und Button ans andere Ende der Leiste. Entferne das <style>-Element, und du hast immer noch einen Header: Das Tag macht ihn dazu, nicht der dunkle Hintergrund.

header vs. head vs. h1

Drei Namen, die ähnlich klingen und verschiedene Aufgaben haben:

Element	Wo	Sichtbar	Wie viele
`<head>`	Direkt in `<html>`, vor `<body>`	Nein: enthält `<title>`, `<meta>`, `<link>`	Genau einer
`<header>`	In `<body>`	Ja: einleitender Inhalt einer Seite oder eines Abschnitts	Beliebig viele
`<h1>` bis `<h6>`	Überall in `<body>`	Ja: eine Überschrift	Beliebig viele

Der <head> unten legt den Seitentitel fest, den ein Browser in seinem Tab anzeigt. Alles, was du in der Vorschau sehen kannst, kommt aus <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Ein Header enthält oft eine Überschrift, muss aber nicht, und eine Überschrift braucht keinen Header um sich herum.

Header in Artikeln

<header> leitet seinen nächstgelegenen Artikel oder Abschnitt ein, nicht nur die Seite. Eine Liste von Blogbeiträgen, in der jeder Beitrag seinen eigenen Header hat, ist gültig und verbreitet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Für Screenreader wird nur der Header auf Seitenebene (einer, der nicht in article, aside, main, nav oder section steht) zur Landmark banner. Die Artikel-Header sind einfache Gruppen, du landest also nicht bei mehreren Bannern.

position: sticky hält den Header oben, während der Inhalt darunter scrollt. Scroll im Kasten unten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Drei Details sorgen dafür, dass es funktioniert: top: 0 (ohne Versatz bewirkt sticky nichts), eine Hintergrundfarbe (sonst scheinen die Zeilen durch) und z-index, damit positionierter Inhalt nicht darüber gezeichnet wird. Auf einer echten Seite ist der scrollende Kasten die Seite selbst, der Header steht also direkt in <body>.

Ein Header mit position: fixed bleibt auch an seinem Platz, verlässt aber den Seitenfluss, der Inhalt rutscht also darunter und braucht oben einen Innenabstand. Sticky behält seinen Platz im Layout.

Was in einen Header darf

Ein Header kann fast jeden Inhalt enthalten: Überschriften, ein Logo-Bild, ein <nav>, ein Suchformular, einen Button. Er darf keinen weiteren <header> und keinen <footer> enthalten und nicht in einem <footer>, einer <address> oder einem anderen <header> stehen.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Wenn das Logo ein Link zur Startseite ist, sollte sein alt-Text sagen, wohin der Link führt („Acme home“), denn genau das sagt ein Screenreader an.

Häufige Fehler

<header> mit <head> verwechseln. Metadaten kommen in <head>; sichtbarer Inhalt nie.
<header> für jede Überschrift verwenden. Eine einzelne Überschrift braucht keinen Header drumherum. Nimm <header>, wenn es eine Gruppe einleitender Inhalte gibt.
Ein Sticky Header ohne Hintergrund. Der Seitentext scrollt sichtbar hindurch. Setz einen background.
Sticky, das nicht klebt. Ein Vorfahre mit overflow: hidden oder overflow: auto wird zum Scroll-Kasten für sticky, der Header klebt also in diesem Kasten (oder gar nicht). Prüf die Vorfahren.
Das Menü der Website in ein <div> im Header setzen. Nimm <nav>, damit Screenreader-Nutzer direkt dorthin springen können.

Häufig gestellte Fragen

Was ist das header-Tag in HTML?

<header> ist ein semantisches Element für einleitende Inhalte: ein Website-Logo und ein Menü oben auf der Seite oder Titel und Autorenzeile oben in einem Artikel. Es ist ein normaler Block ohne Standardstyling.

Was ist der Unterschied zwischen head und header in HTML?

<head> ist der unsichtbare Teil des Dokuments mit <title>, <meta>-Tags und Links zu Stylesheets, und davon gibt es genau einen. <header> ist sichtbarer Inhalt in <body>, und eine Seite kann mehrere haben.

Darf eine Seite mehr als ein header-Element haben?

Ja. Eine Seite hat meistens einen Website-Header, und jedes <article> oder <section> kann einen eigenen <header> für seinen Titel und seine Metainformationen haben. Nur ein Header, der nicht in article, aside, main, nav oder section steht, zählt für Screenreader als Banner der Seite.

Gehört die nav in den header?

Sie kann dort stehen, und oft tut sie das, wenn das Hauptmenü oben auf der Seite sitzt. <nav> außerhalb von <header> ist ebenfalls gültig; entscheide nach deinem Layout.

Wie bleibt ein Header beim Scrollen oben?

Gib ihm position: sticky; top: 0; plus eine Hintergrundfarbe und einen z-index, damit der Inhalt darunter durchscrollt. Sticky funktioniert nur, solange das Elternelement des Headers höher ist als der Header, und ein Vorfahre mit overflow: hidden verhindert, dass er an der Seite kleben bleibt.

Verwandte Konzepte