HTML Body

HTML Body

Der HTML Body enthält alle sichtbaren Inhalte einer Webseite und ist zentral für SEO, Nutzererfahrung und semantische Struktur.

Was ist der HTML Body?

Der Body (geschrieben als <body>) ist der Bereich eines HTML-Dokuments, der alle sichtbaren Inhalte einer Webseite enthält. Alles, was ein Besucher auf einer Seite sieht und mit dem er interagiert, befindet sich innerhalb des Body-Tags: Texte, Überschriften, Bilder, Videos, Links, Buttons und Formulare.

Gemeinsam mit dem <head> bildet der Body die Grundstruktur jeder HTML-Seite. Während der Head unsichtbare Informationen wie Metadaten, den Seitentitel und Verweise auf CSS- und JavaScript-Dateien enthält, ist der Body der Teil, der tatsächlich auf dem Bildschirm dargestellt wird.

Wo steht der Body im HTML-Aufbau?

Der Body folgt im Dokument direkt auf den Head. Ein einfaches Grundgerüst sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispielseite</title>
</head>
<body>
  <header>
    <h1>Willkommen auf unserer Webseite</h1>
  </header>
  <main>
    <p>Hier finden Sie Informationen über unser Unternehmen.</p>
  </main>
  <footer>
    <p>Kontakt: info@beispielseite.de</p>
  </footer>
</body>
</html>

Der Body bildet also den Rahmen, in dem alle sichtbaren Bausteine der Seite untergebracht sind.

Semantische Struktur im Body

Moderne Webseiten gliedern den Inhalt im Body mit sogenannten semantischen HTML-Elementen. Diese geben dem Inhalt eine klare Bedeutung, statt nur einfache <div>-Container zu verwenden. Die wichtigsten sind:

  • <header>: Der Kopfbereich, oft mit Logo und Hauptnavigation.
  • <nav>: Navigationsbereiche mit Menülinks.
  • <main>: Der zentrale Hauptinhalt der Seite, der pro Seite nur einmal vorkommen sollte.
  • <section> und <article>: Thematisch zusammengehörige Inhaltsabschnitte.
  • <footer>: Der Fußbereich, meist mit Kontaktdaten, Impressum und rechtlichen Links.

Diese Struktur hilft nicht nur bei der Übersicht, sondern auch Suchmaschinen und Screenreadern, den Aufbau einer Seite besser zu verstehen.

Warum ist der Body für SEO relevant?

Der Body enthält den eigentlichen Inhalt, den Google bewertet. Eine durchdachte Struktur im Body wirkt sich direkt auf die Suchmaschinenoptimierung aus:

  • Überschriften-Hierarchie: Pro Seite sollte es genau eine <h1> geben, die das Hauptthema benennt. Unterthemen werden mit <h2>, <h3> und so weiter logisch gegliedert. Diese Hierarchie hilft Google, die inhaltliche Struktur zu erfassen.
  • Aussagekräftiger Textinhalt: Da Suchmaschinen den Text im Body auslesen, sollte er die Suchanfrage der Nutzer umfassend und verständlich beantworten.
  • Alt-Texte für Bilder: Bilder im Body sollten ein alt-Attribut haben, das den Bildinhalt beschreibt. Das verbessert die Zugänglichkeit und die Auffindbarkeit in der Bildersuche.
  • Sinnvolle Linktexte: Verlinkungen im Body sollten beschreibend sein (zum Beispiel "unsere Leistungen" statt "hier klicken").

Der Body im Zusammenspiel mit CSS und JavaScript

Der Body liefert die Inhalte, das Aussehen und das Verhalten werden jedoch von anderen Technologien gesteuert:

  • CSS bestimmt das Layout, die Farben, Schriftarten und Abstände der Elemente im Body. So entsteht aus dem reinen Inhalt eine ansprechend gestaltete Seite.
  • JavaScript macht die Inhalte interaktiv, etwa durch Animationen, das Nachladen von Inhalten oder die Reaktion auf Klicks. Bei Single-Page Applications mit Frameworks wie React oder Vue werden große Teile des Body-Inhalts dynamisch über JavaScript erzeugt und aktualisiert, ohne dass die Seite neu geladen wird.

Hinweis für WordPress-Nutzer

Wer eine Webseite mit WordPress oder einem ähnlichen CMS betreibt, kommt mit dem Body-Tag meist nicht direkt in Berührung. Das System erzeugt die HTML-Struktur automatisch im Hintergrund. Trotzdem ist das Grundverständnis hilfreich, etwa beim Einbinden von Tracking-Codes, bei der Fehlersuche oder bei individuellen Anpassungen am Theme.

Fazit

Der Body ist der inhaltliche Kern jeder Webseite. Eine saubere, semantisch strukturierte Gliederung mit klarer Überschriften-Hierarchie verbessert nicht nur die Lesbarkeit für Besucher, sondern hilft auch Suchmaschinen, den Inhalt richtig einzuordnen. Wer seine Inhalte im Body durchdacht aufbaut, schafft damit eine wichtige Grundlage für gute Rankings und eine angenehme Nutzererfahrung.

Zurück zum Glossar