Im HTML-<body>-Element sind sämtliche sicht­ba­ren Inhalte eines HTML-Dokuments enthalten. Pro Dokument kann nur ein einziger <body>-Bereich exis­tie­ren.

Was ist das HTML-<body>-Tag und wofür wird es genutzt?

HTML <body> is ein HTML-Element, mit dessen Hilfe Inhalte eines Dokuments dar­ge­stellt werden. Sämtliche sicht­ba­ren Inhalte wie Headlines, Text­blö­cke, Bilder, Tabellen, Hy­per­links, Listen sowie weitere mögliche Elemente werden innerhalb dieses HTML-Tags hin­ter­legt. In jedem Dokument kann es nur einen einzigen HTML <body> geben. Dieser befindet sich immer unter dem Bereich <head> und über dem HTML footer. Das <body>-Tag un­ter­stützt alle globalen HTML-Attribute.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

HTML <body>: Syntax und Funk­ti­ons­wei­se

Bevor wir Ihnen die Funk­ti­ons­wei­se von HTML <body> anhand einiger einfacher Beispiele zeigen, lohnt sich ein Blick auf die grund­sätz­li­che Syntax des Elements. Diese sieht wie folgt aus:

<body>Hier werden sämtliche sichtbaren Inhalte der Website hinterlegt.</body>
html

Nur Inhalte, die zwischen dem ein­lei­ten­den (<body>) und dem schlie­ßen­den (</body>) Tag stehen, werden später auf der be­tref­fen­den Webseite angezeigt.

Beispiele für die Nutzung von HTML <body>

In den nach­fol­gen­den Bei­spie­len sehen Sie, wie das HTML-<body>-Tag in der Praxis ein­ge­setzt wird.

HTML-Dokument mit simplem <body>-Element

Zunächst erstellen wir ein einfaches HTML-Dokument mit einer Headline, einem Text­ab­schnitt und einem Bild, die alle innerhalb des Körpers hin­ter­legt werden. Dies ist der ent­spre­chen­de Code:

<html>
<head>
<title>HTML body in einem Dokument</title>
</head>
<body>
<h1>Dies ist Ihre Headline</h1>
<p>Hier steht der Inhalt Ihrer Website.</p>
<img src="beispiel.jpg" alt="Hier wird ein Bild gezeigt">
</body>
</html>
html

Eine Na­vi­ga­ti­ons­leis­te mit href anlegen

Im folgenden Beispiel sehen Sie, wie Sie mit dem HTML-<body>-Tag und dem Attribut href eine Na­vi­ga­ti­ons­leis­te für Ihre Website anlegen. Dies ist der passende Code:

<!DOCTYPE html>
<html>
<head>
<title>Website mit einer Navigationsleiste</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Kontakt</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Kontakt</h2></section>
</body>
</html>
html

Video einbinden über das HTML-<body>-Tag

Auch wenn Sie ein Video auf Ihrer Website einbinden möchten, ist der <body>-Bereich der richtige (und einzig mögliche) Platz dafür. Dies ist ein bei­spiel­haf­ter Code für die Ein­bin­dung:

<!DOCTYPE html>
<html>
<head>
<title>Website mit einem Video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="beispielfilm.mp4" type="video/mp4">
</video>
</body>
</html>
html

Design ändern via HTML-<body>-Tag

Mit Hilfe von CSS können Sie den <body>-Bereich auch dazu verwenden, das Design Ihrer Web­in­hal­te an­zu­pas­sen. Wie das funk­tio­niert, sehen Sie im folgenden Beispiel:

<!DOCTYPE html>
<html>
<head>
<title>HTML body mit optischen Anpassungen</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Hier steht Ihre Headline</h1>
<p>Hier steht der Inhalt Ihrer Website.</p>
</body>
</html>
html

Hin­ter­grün­de anpassen im HTML <body>

Wenn Sie mit CSS lediglich Ihren HTML Back­ground ändern möchten, passiert dies ebenfalls im HTML <body>. Hier sehen Sie, wie Sie die Hin­ter­grund­far­be festlegen:

<!DOCTYPE html>
<html>
<head>
<title>HTML body mit neuer Hintergrundfarbe</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Hier steht Ihre Headline</h1>
<p><a href="https://www.beispielseite.com">Besuchen Sie Beispielseite.com!</a></p>
</body>
</html>
html

Möchten Sie statt­des­sen ein Bild einfügen, ist dies der passende Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML body mit neuem Hintergrundbild</title>
<style>
body {
background-image: url(beispiel.png);
}
</style>
</head>
<body>
<h1>Hier steht Ihre Headline</h1>
<p><a href="https://www.beispielseite.com">Besuchen Sie Beispielseite.com!</a></p>
</body>
</html>
html
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü