HTML <body>-Tag
Das <body>-Tag enthält den sichtbaren Seiteninhalt. Erfahren Sie seine Rolle, veraltete Attribute, CSS-Ersatz und Body-Ereignisattribute.
Das <body>-Tag definiert den Inhalt einer Webseite — alles, was der Besucher tatsächlich sieht, wie Text, Bilder, Links, Listen, Tabellen und Formulare. Es wird innerhalb des <html>-Elements platziert, unmittelbar nach dem <head>-Element. Ein HTML-Dokument darf nur ein einziges <body>-Tag enthalten.
Die Rolle von <body> im Dokument
Jedes HTML-Dokument ist innerhalb des Wurzelelements <html> in zwei Teile gegliedert:
- Das
<head>-Element enthält Metadaten über die Seite — Titel, Zeichensatz, verknüpfte Stylesheets und Skripte. Nichts im<head>wird im Seitenbereich gerendert. - Das
<body>-Element enthält den gerenderten Inhalt der Seite — den Teil, den der Browser auf dem Bildschirm darstellt.
Das <body> ist also der sichtbare Inhaltsbereich. Wenn Sie eine Überschrift, einen Absatz oder ein Bild schreiben, das auf der Seite erscheinen soll, gehört es in das <body>.
CSS-Klassen werden häufig dem <body>-Element hinzugefügt, damit Entwickler und Designer eine ganze Seite einfach ansprechen können (zum Beispiel eine theme-dark-Klasse, die alles darunter neu gestaltet). Selbst wenn solche Klassen nie genutzt werden, verursachen sie keine Probleme.
Syntax
Das <body>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden <body> und dem schließenden </body>-Tag geschrieben.
Beispiel des HTML-<body>-Tags:
HTML-<body>-Tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
</body>
</html>Ergebnis
Beispiel des HTML-<body>-Tags mit den CSS-Eigenschaften color und line-height:
Beispiel des HTML-<body>-Tags mit den CSS-Eigenschaften
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: #444444;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>HTML body tag example</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Veraltete Attribute
In älterem HTML trug das <body>-Tag präsentationale Attribute, die seitenweite Farben und das Hintergrundbild festlegten. Diese sind in HTML5 veraltet — verwenden Sie sie nicht. Jedes hat einen CSS-Ersatz:
| Attribut | Wert | Zweck | Modernes CSS-Äquivalent |
|---|---|---|---|
| bgcolor | color | Hintergrundfarbe der Seite | background-color |
| text | color | Standardtextfarbe | color |
| background | URL | Hintergrundbild | background-image |
| link | color | Farbe nicht besuchter Links | a:link { color: … } |
| vlink | color | Farbe besuchter Links | a:visited { color: … } |
| alink | color | Farbe des aktiven (angeklickten) Links | a:active { color: … } |
Der CSS-Weg
Anstatt präsentationale Attribute zu verwenden, sollte das <body>-Element mit einem Stylesheet gestaltet werden. Dies trennt Inhalt von der Darstellung und hält das Markup sauber:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<style>
body {
background-color: #f5f5f5;
color: #333333;
background-image: url("paper.png");
}
a:link { color: #0645ad; }
a:visited { color: #663399; }
a:active { color: #d04437; }
</style>
</head>
<body>
<p>Styled with CSS instead of deprecated <code><body></code> attributes.</p>
<p><a href="https://www.w3docs.com">A link</a></p>
</body>
</html>Das <body>-Tag unterstützt außerdem die standardmäßigen Globalen Attribute (class, id, style, lang usw.) sowie die Ereignisattribute.
Body-spezifische Ereignisattribute
Die meisten Ereignisattribute (wie onclick) gelten für jedes Element, aber einige sind nur am <body> sinnvoll, weil sie auf Ereignisse des gesamten Fensters bzw. Dokuments reagieren:
| Attribut | Wird ausgelöst, wenn |
|---|---|
| onload | Die Seite vollständig geladen wurde (alle Inhalte und Ressourcen). |
| onunload | Der Nutzer die Seite verlässt und sie entladen wird. |
| onresize | Das Browserfenster in der Größe verändert wird. |
Beispiel — Code ausführen, sobald die Seite bereit ist, und erneut, wenn das Fenster in der Größe verändert wird:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body onload="report('loaded')" onresize="report('resized')">
<p id="status">Waiting…</p>
<script>
function report(message) {
document.getElementById("status").textContent = "Window " + message;
}
</script>
</body>
</html>In modernem Code werden diese oft stattdessen per JavaScript angehängt, zum Beispiel window.addEventListener("load", …), was das Verhalten aus dem Markup heraushält.
Barrierefreiheit
Das <body>-Element ist die Wurzel aller gerenderten Inhalte und legt damit die Grundlage für assistive Technologien:
- Das
lang-Attribut am<html>-Element (zum Beispiellang="en") teilt Screenreadern mit, welche Sprache bei der Ausgabe aller Inhalte innerhalb des<body>verwendet werden soll. Eine korrekte Angabe verbessert die Aussprache. - Da im
<body>sowohl Navigation als auch Hauptinhalt untergebracht sind, sollte ein Skip-Navigations-Link als erstes fokussierbares Element eingefügt werden, damit Tastatur- und Screenreader-Nutzer direkt zum Hauptinhalt springen können:
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- site navigation --></nav>
<main id="main">
<h1>Page title</h1>
<p>Main content…</p>
</main>
</body>Der Skip-Link wird visuell meist ausgeblendet, bis er den Tastaturfokus erhält, steht aber assistiven Technologien jederzeit zur Verfügung.