CSS, HTML und Javascript mit {stil}

body • Sichtbarer Bereich der HTML-Seite

HTML body tag

HTML body kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite. Browser stellen nur den Inhalt zwischen dem öffnenden und schließenden body-Tag im Browserfenster sichtbar dar.

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 Block-Tags geschrieben werden.

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.

Wenn das Dokument Frames benutzt, wird das <frameset>-Tag anstelle des <body>-Tags gesetzt.

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" 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" 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 besonders gut, einer Webseite generelle CSS-Stile zuzuweisen: z.B. Schriftfamilie und Schriftgröße und Hintergrundfarbe bzw. Hintergrundbild.

Die Browser geben dem body-Tag von Haus aus eigene CSS-Eigenschaften: einen Abstand gegen den Rand des Browserfensters.

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

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