Template: html, head und body
body ist nach head das zweite Element des html-Elements.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titel der Seite</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> </head> <body> <p>Browser stellen nur den Inhalt innerhalb des öffnenden und schließenden body-Tags dar.</p> </body> </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 den Inhalt der typischen body-Tags wie p und div sichtbar auf der Seite darstellen.
In den ersten HTML-Specs gab es diese Elemente auch noch nicht.<!DOCTYPE html> <html lang="de"> <title>Ein Dokument ohne body</title> <p>Sichtbarer Bereich</p> </html>
Darin würde der Validator schon ein gültiges Dokument sehen. Ein Blick in die Console zeigt, dass der Browser head und body automatisch einbaut.
<html lang="de"> <head> <title>Ein Dokument ohne body</title> </head> <body> <p>Sichtbarer Bereich</p> </body> </html>
Jeder HTML-Editor wird aber direkt ein »ordentliches« HTML-Dokument wie am Anfang dieser Seite erzeugen.
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.
