<body>

Zuletzt aktualisiert am 3. Februar 2026

Das <body>-Element enthält den gesamten sichtbaren Inhalt deiner Webseite. Alles, was Nutzer im Browser sehen und womit sie interagieren (Texte, Bilder, Links, Formulare, Videos), steht im <body>. Während der <head> die unsichtbaren Metadaten enthält, ist der <body> das, was deine Besucher tatsächlich erleben. Jedes HTML-Dokument hat genau einen <body>, und er ist das zweite direkte Kind-Element von <html>.

Grundlagen

Der <body> ist das Gegenstück zum <head>: Während der <head> dem Browser Informationen über die Seite gibt, enthält der <body> alles, was auf dem Bildschirm erscheint. Du schreibst deinen gesamten sichtbaren Seiteninhalt zwischen das öffnende <body> und das schließende </body>.

  • <body> enthält allen sichtbaren Inhalt: Texte, Bilder, Navigation, Formulare, also alles, was Nutzer sehen
  • Es darf pro Dokument nur ein einziges <body>-Element geben
  • Der <body> kommt immer nach dem <head> und ist das zweite Kind von <html>
  • Für eine gute Seitenstruktur sollte der Inhalt im <body> mit semantischen Elementen wie <header>, <nav>, <main> und <footer> gegliedert werden, nicht nur mit <div>-Elementen

Syntax

Grundsyntax
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>Dies ist der sichtbare Inhalt.</p>
  </body>
</html>
Vorschau

Beispiele

Semantisch strukturierter Body

Anstatt alles in <div>-Elemente zu packen, nutzt du semantische Elemente, um deinem <body> eine klare Struktur zu geben. Das hilft Screenreadern, die Seite zu verstehen, und macht deinen Code lesbarer:

Semantische Struktur
<body>
  <header>
    <h1>Meine Webseite</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <h2>Willkommen!</h2>
    <p>Dies ist die Hauptseite mit dem wichtigsten Inhalt.</p>
  </main>

  <footer>
    <p>© 2026 Meine Webseite</p>
  </footer>
</body>
Vorschau

Body mit Inline-Styles

Manchmal brauchst du schnell eine Hintergrundfarbe oder Schriftart für die gesamte Seite. Das kannst du direkt auf dem <body>-Element setzen. In einem echten Projekt würdest du das natürlich über eine CSS-Datei lösen:

Body mit Styling
<body style="font-family: system-ui, sans-serif;
             background-color: #f0f9ff;
             color: #1e293b;
             margin: 0;
             padding: 24px;">
  <h1>Gestylte Seite</h1>
  <p>Der Body hat eine Hintergrundfarbe und eine Systemschrift.</p>
</body>
Vorschau

Barrierefreiheit

Der <body> ist der Ausgangspunkt für die gesamte Barrierefreiheit deiner Seite. Screenreader beginnen hier mit dem Lesen und orientieren sich an der Landmark-Struktur innerhalb des Body. Verwende semantische Elemente wie <header>, <nav>, <main> und <footer>, damit Screenreader-Nutzer schnell zwischen den Seitenbereichen springen können.

Ein besonders nützliches Pattern ist der Skip-Link: Ein unsichtbarer Link am Anfang des <body>, der Tastatur- und Screenreader-Nutzer direkt zum Hauptinhalt springen lässt, ohne durch die gesamte Navigation tabben zu müssen. Er wird typischerweise als erstes Element im <body> platziert und erst beim Fokus sichtbar.

Achte darauf, dass der <body> eine logische Lesereihenfolge hat. Der HTML-Quellcode sollte die visuelle Reihenfolge widerspiegeln. CSS-Tricks wie order in Flexbox können die visuelle Reihenfolge ändern, aber Screenreader folgen weiterhin der DOM-Reihenfolge.

Häufige Fehler

  • Inhalte außerhalb des <body>: Wenn du versehentlich Text oder Elemente zwischen </head> und <body> oder nach </body> platzierst, versucht der Browser das zu korrigieren und verschiebt den Inhalt in den <body>. Das HTML ist dann technisch ungültig und kann in verschiedenen Browsern unterschiedlich interpretiert werden.

  • Mehrere <body>-Elemente: Ein Dokument darf nur einen einzigen <body> haben. Wenn du einen zweiten <body> einfügst, ignoriert der Browser ihn: der Inhalt wird trotzdem angezeigt, aber dein HTML ist ungültig.

  • Keine semantische Struktur: Alles direkt in den <body> zu werfen, ohne <header>, <main> und <footer> zu verwenden, funktioniert technisch, aber Screenreader können die Seitenstruktur nicht erkennen. Nutzer mit Sehbehinderung können dann nicht zwischen Navigation, Hauptinhalt und Fußbereich unterscheiden.

Browser-Kompatibilität

Das body-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Es gehört zur Grundstruktur jedes HTML-Dokuments.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Das body-Element wird in E-Mail-Clients unterschiedlich behandelt. Viele Clients ersetzen es durch eigene Container-Strukturen.

ClientUnterstützungHinweise
Apple MailKomplett—
GmailTeilweiseGmail entfernt das body-Element und bettet den Inhalt in einen eigenen Container ein. Styles auf dem body-Element werden ignoriert. Verwende stattdessen einen Wrapper-div.
OutlookTeilweiseOutlook ersetzt den body teilweise durch eigene Strukturen. Hintergrundfarben auf dem body werden oft nicht dargestellt.
ThunderbirdKomplett—
Yahoo MailTeilweiseYahoo Mail entfernt das body-Element und setzt den Inhalt in seine eigene Seitenstruktur ein. Inline-Styles auf dem body gehen verloren.

Verwandte Elemente

<html> <head> <header> <main> <footer>

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.