<body>

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

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:

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

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

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.

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

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Teilweise

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

• Outlook

  Teilweise

  Outlook ersetzt den body teilweise durch eigene Strukturen. Hintergrundfarben auf dem body werden oft nicht dargestellt.

• Thunderbird

  Komplett

• Yahoo Mail

  Teilweise

  Yahoo Mail entfernt das body-Element und setzt den Inhalt in seine eigene Seitenstruktur ein. Inline-Styles auf dem body gehen verloren.