HTML body • Sichtbarer Bereich der Webseite

HTML body tag

body kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite und ist das wichtigste Element: Die Browser zeigen nur den Inhalt zwischen dem öffnenden und schließenden body-Tag.

Innerhalb des body-Tags sollten keine Inhalte (character data) direkt stehen – alle Inhalte sollten in div-, p-, ul- oder ol-Tags, in table- oder andere Elemente geschrieben werden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Nur body ist sichtbar

Ein HTML-Dokument soll nur ein body-Element haben, das den gesamten sichtbaren Inhalt der Seite – Text und Bilder – enthält und ist immer das zweite Element des html-Tags.

Das body-Tag eignet sich für CSS-Stile, die global auf das Dokument einwirken sollen – font und padding sind nur ein Beispiel. Weniger geeignet sind CSS-Stile für die Positionierung des body-Elements. Die Positionierung des body-Tags wird nicht von allen Browsern vorgenommen.

Template: html, head und body

Vorlage für HTML5-Seiten
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Titel der Seite</title>
   <link rel="stylesheet" media="screen" … />
</head>
<body>

   <p>Browser stellen nur den Inhalt innerhalb des
   öffnenden und schließenden body-Tags dar.</p>
   
</body>
</html>

html, head- und body-Tag sind eigentlich nicht wirklich nötig. In einem HTML-Dokument ohne head und body würden die Browser selber ein head- und ein body-Element erzeugen, typische head-Elemente wie style und title dem head zuordnen und typische body-Element wie p und div sichtbar auf der Seite darstellen.

In den ersten HTML-Specs gab es diese Elemente auch noch nicht.

<title>Ein Dokument ohne body</title>
<style type="text/css" data-title="text/css">
body {font-family: Verdana, sans-serif; }
</style>
<p>Sichtbarer Bereich</p>

Ein Blick in die Console zeigt einen ordentliches DOM-Baum.

<html>
<head>
<title>
     Ein Dokument ohne body
</title>
<style type="text/css" data-title="text/css">
    body {font-family: Verdana, sans-serif; }
</style>
</head>
<body>
    <p>Dieser Teil hier sichtbar?</p>
</body>
</html>

Muss man head-, body- und html-Tag setzen? Diskussion auf Stackoverflow

CSS für body

Da das body-Element den vollständigen darstellbaren Inhalt enthält, eignet es sich gut, einer Webseite generelle CSS-Stile zuzuweisen: z.B. Schriftfamilie und Schriftgröße und Hintergrundfarbe bzw. Hintergrundbild.

Das HTML body-Element hat per Vorgabe einen Margin (Abstand vom Rand des Browserfensters) von 5 Pixeln. Wenn Elemente wie ein Banner ohne Abstand die gesamte Breite des Browserfensters einnehmen sollen, wird der Abstand mit CSS body { margin: 0 } entfernt.

body { 
    margin: 0;
    font-family: 'Roboto', Helvetica, sans-serif;
    line-height: 1.5;
}

body Attribute

Alle Attribute aus HTML4, die für das Layout der Seite bestimmt waren (alink, background, bgcolor, link, text und vlink), gelten in HTML5 als veraltet und unerwünscht und müssen von den Browsern nicht länger unterstützt werden.

body unterstützt weiterhin alle globalen Attribute wie class und id und Javascript-Events.