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.