Das HTML-<body>-Element umfasst alle sicht­ba­ren Teile deines HTML-Dokuments. Jedes Dokument darf dabei genau einen -Bereich besitzen.

Was ist das HTML-<body>-Tag und wozu dient es?

Der HTML-ist ein zentrales HTML-Element, um die Inhalte deiner Website dar­zu­stel­len. Alle sicht­ba­ren Kom­po­nen­ten wie Über­schrif­ten, Texte, Bilder, Tabellen, Links und Listen werden innerhalb dieses HTML-Tags platziert. Pro Dokument ist nur ein einziger HTML- zulässig. Er befindet sich stets nach dem <head>-Bereich und vor dem HTML-footer. Das <body>-Tag ist mit allen globalen HTML-At­tri­bu­ten kom­pa­ti­bel.

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

Bevor wir uns die Funk­ti­ons­wei­se von HTML <body> in der Praxis ansehen, werfen wir einen Blick auf die grund­le­gen­de Syntax des Elements. Diese ist simpel aufgebaut:

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

Nur jene Inhalte, die du zwischen dem öffnenden (<body>) und dem schlie­ßen­den (</body>) Tag einfügst, er­schei­nen später auf deiner Website.

Pra­xis­bei­spie­le für HTML <body>

Die folgenden Beispiele zeigen dir, wie du das HTML-<body>-Tag konkret einsetzt.

HTML-Dokument mit einfachem <body>-Element

Hier erstellen wir ein Basis-Dokument mit einer Über­schrift, einem Absatz und einem Bild. Alle Elemente liegen im Body-Bereich. So sieht der Code aus:

<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

Na­vi­ga­ti­ons­me­nü mit href erstellen

In diesem Beispiel erfährst du, wie du mithilfe des HTML-<body>-Tags und dem Attribut href eine Na­vi­ga­ti­on für dein Projekt baust:

<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

Videos via HTML-<body>-Tag einbetten

Möchtest du ein Video auf deiner Seite zeigen, ist der <body>-Bereich der vor­ge­se­he­ne Platz dafür. Hier ist ein Beispiel für die Ein­bin­dung:

<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

Optik anpassen über das HTML-<body>-Tag

Mithilfe von CSS nutzt du den <body>-Bereich, um das Design deiner Inhalte zu de­fi­nie­ren. Das folgende Beispiel ver­deut­licht das Prinzip:

<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­grund im HTML <body> gestalten

Um mittels CSS den HTML Back­ground an­zu­pas­sen, ist ebenfalls der HTML <body> zuständig. So de­fi­nierst du eine Hin­ter­grund­far­be:

<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

Falls du lieber ein Hin­ter­grund­bild verwenden möchtest, nutzt du diesen Code:

<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
Zum Hauptmenü