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 alle Inhalte einer Internetseite, entweder in Textform oder als Link, wenn es sich um Bilder oder andere Medien handelt. 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.
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 enthält dabei standardmäßig keine Angaben zur Darstellung der jeweiligen Elemente, sondern nur Auszeichnungen für die hierarchische und strukturelle Funktion des jeweiligen Elements. 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 er alle folgenden Elemente im Hauptfenster darstellen soll. Auf gleicher Hierarchieebene wie der Body befindet sich nur noch der sogenannte Header, der aber hauptsächlich Meta-Informationen und technische Vorgaben für die Darstellung der Internetseite enthält. Die höchste Ebene wird durch den HTML-Tag ausgezeichnet. Er markiert den Anfang und das Ende der HTML-Datei, beinhaltet aber außer dem Body und dem Header keine eigenen Elemente.
Funktion des Bodys für das Layout
Für Einsteiger in die HTML-Programmierung birgt die strikte Trennung von Struktur und Inhalt und der hierarchische Aufbau einer HTML-Datei eine Reihe von Verständnisproblemen. Dazu gehört, dass der Body zwar alle Inhalte einer Internetseite und auch alle Daten für deren Strukturierung enthält, aber keine Angaben zum Layout. Diese befinden sich im Header, der aber wiederum keine Inhalte enthält.
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 nur die Struktur eines Textes 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 war nicht mehr gewährleistet.
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 „stufenförmig verschachtelte Gestaltungsvorlagen“) sollte als ergänzende Formatierungssprache die Möglichkeiten von HTML erweitern. Ein Ziel war es, den Body von Formatierungsangaben und psychischen Auszeichnungen zu befreien. Dafür wurden die Vorgaben für das Layout aus dem Body entfernt und eine externe Text-Datei ausgelagert. Diese Stylesheet-Datei hat standardmäßig die Endung .css und wird im Header 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 von HTML-Befehlen im Body um das Layout einer Seite zu beeinflussen gilt auch unter Hobbywebdesignern heute als schlechter und veralteter Programmierstil.
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 entweder durch Angaben in der Stylesheet-Datei oder durch direkte Auszeichnung im HTML-Code. So kann man über die Gestaltung des Body-Tags die Hintergrundfarbe der Internetseite festlegen oder eine feste Breite und Höhe der Seite einstellen.
Soll für die gesamte Internetseite eine bestimmte Schriftart verwendet werden, genügt es, diese dem Body zuzuweisen. Alle anderen HTML-Elemente erben dann diese Eigenschaften – solange man ihnen keine eigene Schriftart zuweist. Das macht es sehr einfach bestimmte Layoutvorgaben dateiweit vorzugeben.
Zusammenfassung
Im Kern der HTML-Datei liegt der Body, der den Hauptbereich für Inhalte auf einer Webseite bildet. Der Body definiert die Struktur und den Inhalt, jedoch nicht das Layout der Webseite. 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 revolutioniert, indem es die Gestaltung von der Struktur trennte und in eine externe Datei verlagerte. Diese Änderung förderte auch den barrierefreien Zugang zu Webseiten. Inzwischen ist CSS weitgehend als Standard etabliert und die Einbettung von Layout-Anweisungen direkt im Body gilt als veraltet.
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 entweder direkt im HTML-Code oder durch Verlinkung eines externen CSS-Stylesheets erfolgen.
Häufige Fragen und Antworten
Was ist der Body einer HTML-Datei?
Der Body einer HTML-Datei bezeichnet den Hauptbereich im Quelltext einer Internetseite, der im Browserfenster angezeigt wird. Er enthält alle Inhalte einer Internetseite, ob in Textform oder als Bilder oder andere Medien. Der Body wird durch den öffnenden und schließenden Body-Tag markiert.
Welche Funktion hat der Body für das Layout einer Webseite?
Der Body dient in erster Linie dazu, die Inhalte einer Webseite im Hauptfenster des Browsers darzustellen. 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 im Header der HTML-Datei eingebunden wird.
Wie hat sich die Gestaltung des Bodys durch CSS verändert?
Die Gestaltung des Bodys wurde durch CSS (Cascading Style Sheets) grundlegend verändert. Vorher wurden Layoutvorgaben direkt im Body der HTML-Datei gemacht, 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.