Als Body bezeichnet man den Körper einer HTML-Datei, also den Bereich im Quelltext einer Internetseite, dessen Inhalt im Hauptfenster des Browsers dargestellt wird. Beginn und Ende des Bodys einer HTML-Datei werden durch den öffnenden und schließenden Body-Tag ausgezeichnet. Dazwischen befinden sich die sichtbaren Inhalte einer Internetseite, etwa Texte, Überschriften, Links, Bilder und andere Medien. Zusätzlich enthält der Body wesentliche Elemente zur inhaltlichen Strukturierung einer Internetseite. Direkte Vorgaben für das Layout findet man heute eher selten im Body einer HTML-Datei, da die Gestaltung üblicherweise über CSS erfolgt.
Der Body als zentrales Element einer HTML-Datei
HTML (engl. Hypertext Markup Language) ist eine Sprache zur Beschreibung des strukturellen Aufbaus von elektronischen Dokumenten, meist in Form von Internetseiten. HTML-Dokumente sind hierarchisch aufgebaut. HTML dient vor allem der semantischen und strukturellen Auszeichnung der jeweiligen Elemente, während deren Darstellung überwiegend über CSS gesteuert wird. So kann man über HTML-Tags einen Textabschnitt als Überschrift, Absatz, Zitat, Listenelement usw. auszeichnen.
Dem Body kommt dabei eine zentrale Rolle zu. Er stellt die höchste Hierarchieebene aller im Browserfenster dargestellten Inhalte dar. Mit dem einleitenden Tag wird dem Browser mitgeteilt, dass die folgenden Elemente zum Dokumentkörper gehören. Auf gleicher Hierarchieebene wie der Body befindet sich nur noch der sogenannte Head, der hauptsächlich Meta-Informationen, Verweise auf Stylesheets und weitere technische Angaben enthält. Der Head ist nicht mit dem sichtbaren HTML-Element <header> zu verwechseln. Die höchste Ebene wird durch den HTML-Tag ausgezeichnet. Er markiert den Anfang und das Ende der HTML-Datei und beinhaltet im Regelfall den Head und den Body.
Beispiel: Dieses kleine HTML-Dokument trennt Metadaten und sichtbaren Seiteninhalt:1
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispielseite</title>
</head>
<body>
<main>
<h1>Unser Ratgeber</h1>
<p>Hier beginnt der sichtbare Inhalt.</p>
</main>
</body>
</html>Überschrift und Absatz stehen im body. Der Dokumenttitel und die Zeichencodierung gehören dagegen in den head; sie sind kein Fließtext der Seite.
Funktion des Bodys für das Layout
Für Einsteiger in die HTML-Programmierung birgt die Trennung von Struktur, Inhalt und Gestaltung sowie der hierarchische Aufbau einer HTML-Datei eine Reihe von Verständnisproblemen. Dazu gehört, dass der Body zwar die sichtbaren Inhalte einer Internetseite und auch die Elemente für deren Strukturierung enthält, die eigentlichen Layoutregeln aber überwiegend aus CSS stammen. Ein externes Stylesheet wird meist im Head eingebunden; CSS kann jedoch auch innerhalb des Dokuments oder direkt an einzelnen Elementen notiert sein.
Diese Fragen lassen sich am besten klären, wenn man die historische Entwicklung betrachtet. HTML war zunächst nur als reine Auszeichnungssprache zur Beschreibung der Struktur eines Dokumentes gedacht. Sie enthielt daher kaum Befehle zur physischen Beschreibung von Elementen, z.B. der Textfarbe oder der Schriftgröße. Wie ein Dokument dargestellt wird, das wurde hauptsächlich dem Browser überlassen. Daher sahen Internetseiten in den Anfangstagen des World Wide Webs in jedem Browser etwas anders aus.
Mit der Verbreitung des Internets kam bei den Webentwicklern schnell der Wunsch auf, das Layout von Internetseiten beeinflussen zu können. Die Möglichkeiten der physischen Auszeichnung von Elementen nahmen zu, außerdem wurden die Werkzeuge zur Textstrukturierung für das Layout zweckentfremdet. Tabellen wurden nicht mehr allein zur tabellarischen Darstellung von Daten verwendet, sondern dienten auch als Basis für mehrspaltige Layouts von Internetseiten.
Sauberer Body dank CSS
Diese Lösung war aber in jeder Hinsicht unbefriedigend. Den Webdesignern reichten die gestalterischen Möglichkeiten bei weitem nicht aus, während die Wächter über die Internetstandards besorgt waren, dass die ursprünglichen Ideen hinter HTML auf Dauer verwässert werden könnten. Dadurch, dass HTML die Struktur und Bedeutung eines Dokuments beschreibt, sollte die Ausgabe über unterschiedliche Medien ermöglicht werden, unter anderem auch für die Sprachausgabe bzw. Braille-Terminals für blinde Internetnutzer. Da alle Vorgaben für das Layout direkt im Body vieler Internetseiten integriert waren, wurde deren Darstellung jenseits der grafischen Browser erheblich erschwert. Der barrierefreie Zugang zum Internet wurde dadurch beeinträchtigt.
Zur Lösung dieses Problems wurde schon früh – Mitte der neunziger Jahre des letzten Jahrhunderts – ein neuer Standard entwickelt. CSS (engl. für Cascading Style Sheets – deutsch kaskadierende Formatvorlagen) sollte als ergänzende Gestaltungssprache die Möglichkeiten von HTML erweitern. Ein Ziel war es, den Body von Formatierungsangaben und physischen Auszeichnungen zu befreien. Dafür wurden die Vorgaben für das Layout aus dem Body entfernt und häufig in eine externe Text-Datei ausgelagert. Diese Stylesheet-Datei hat standardmäßig die Endung .css und wird üblicherweise im Head des HTML-Dokumentes verlinkt.
Die gestalterischen Möglichkeiten von CSS waren aber in den ersten Versionen noch eingeschränkt, außerdem unterstützte nicht jeder Browser jede CSS-Vorgabe, was die Entwicklung CSS-basierter Webprojekte für viele Webdesigner zunächst unattraktiv machte. Der Wandel vom tabellenbasierten Layout hin zu CSS-basierten Webseiten vollzog sich daher recht langsam. Inzwischen ist CSS als Standard aber weitgehend etabliert. Die Verwendung veralteter HTML-Attribute oder zweckentfremdeter Strukturelemente im Body, um das Layout einer Seite zu beeinflussen, gilt auch unter Hobbywebdesignern heute als schlechter und veralteter Programmierstil.
Ein sauber strukturierter Body ist außerdem für Barrierefreiheit und Suchmaschinenoptimierung relevant. Aussagekräftige Überschriften, Absätze, Listen und semantisch passende Elemente helfen Browsern, assistiven Technologien und Suchmaschinen dabei, die Gliederung und Bedeutung der Inhalte zu erfassen. Entscheidend sind unter anderem die Qualität, Zugänglichkeit und technische Verarbeitung der enthaltenen Informationen.
Gestaltung des Bodys
Wie jedes HTML-Element lässt sich auch der Body durch zusätzliche Angaben in seinem Aussehen und Verhalten verändern. Das geschieht vorzugsweise durch Regeln in einer Stylesheet-Datei, ist technisch aber auch durch CSS direkt im HTML-Code möglich. So kann man über CSS-Regeln für das Body-Element beispielsweise die Hintergrundfarbe, die Standardschrift, Textfarbe oder Außenabstände der Seite festlegen. Breiten- und Höhenangaben sind ebenfalls möglich, müssen bei responsiven Webseiten jedoch im Zusammenspiel mit dem Viewport und den enthaltenen Elementen beurteilt werden.
Soll für die gesamte Internetseite eine bestimmte Schriftart verwendet werden, genügt es häufig, diese dem Body zuzuweisen. Viele andere HTML-Elemente erben dann diese Eigenschaft – solange man ihnen keine eigene Schriftart zuweist. Das macht es sehr einfach, bestimmte Layoutvorgaben dokumentweit vorzugeben. Nicht jede CSS-Eigenschaft wird allerdings automatisch vererbt; Abstände, Rahmen oder Größen müssen beispielsweise oft gezielt für die jeweiligen Elemente definiert werden.
Zusammenfassung
Im Kern der HTML-Datei liegt der Body, der den Hauptbereich für sichtbare Inhalte auf einer Webseite bildet. Der Body enthält die Struktur und den Inhalt, während das Layout überwiegend durch CSS festgelegt wird. Er ist ein zentrales Element in der hierarchischen Struktur von HTML und fungiert als höchste Ebene für alle im Browser dargestellten Inhalte.
Die Trennung von Inhalt und Layout in HTML-Dateien kann für Anfänger verwirrend sein. Historisch war HTML primär zur Strukturierung elektronischer Dokumente gedacht, während die Darstellung dem Browser überlassen wurde. Mit der Zeit wuchs jedoch der Wunsch, mehr Kontrolle über das Layout zu haben, was zunächst durch Tabellen und dann durch CSS (Cascading Style Sheets) ermöglicht wurde.
CSS hat die Webentwicklung grundlegend verändert, indem es die Gestaltung von der Struktur trennte und häufig in eine externe Datei verlagerte. Diese Änderung erleichterte die Wartung und unterstützte den barrierefreien Zugang zu Webseiten. Inzwischen ist CSS weitgehend als Standard etabliert und die Verwendung veralteter Layout-Anweisungen direkt im Body gilt als überholt.
Zusätzlich bietet der Body Möglichkeiten zur Gestaltung, beispielsweise durch Festlegung der Hintergrundfarbe oder Schriftart für die gesamte Webseite. Diese Einstellungen können direkt im HTML-Code erfolgen, werden heute aber vorzugsweise über ein eingebundenes CSS-Stylesheet verwaltet.
Häufige Fragen und Antworten
Der Body einer HTML-Datei bezeichnet den Hauptbereich im Quelltext einer Internetseite, dessen Inhalte im Browserfenster dargestellt werden. Er enthält unter anderem Texte, Überschriften, Links, Bilder und andere Medien. Der Body wird durch den öffnenden und schließenden Body-Tag markiert.
Der Body dient in erster Linie dazu, die sichtbaren Inhalte einer Webseite aufzunehmen und zu strukturieren. Er stellt die höchste Hierarchieebene aller Elemente dar, die im Browserfenster angezeigt werden. Das Layout einer Webseite wird jedoch hauptsächlich durch CSS (Cascading Style Sheets) gesteuert, das häufig im Head der HTML-Datei eingebunden wird.
Die Gestaltung des Bodys wurde durch CSS (Cascading Style Sheets) grundlegend verändert. Vorher wurden viele Layoutvorgaben direkt im Body der HTML-Datei umgesetzt, was zu einer unübersichtlichen und schwer wartbaren Struktur führte. Mit CSS können Gestaltungsangaben in einer externen Stylesheet-Datei zentral verwaltet werden, was die Pflege und Änderung des Layouts einer Webseite deutlich erleichtert.
