HTML body • Sichtbarer Bereich der Webseite

HTML body tag

body kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite: Hier sitzen alle HTML-Tags für den Inhalt der Seite. Ein HTML-Dokument soll nur ein einziges body-Element für den gesamten sichtbaren Inhalt der Seite – Text und Bilder – enthalten

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

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.