HTML body: Das HTML-Element für darstellbare Inhalte

Im HTML-<body>-Element sind sämtliche sichtbaren Inhalte eines HTML-Dokuments enthalten. Pro Dokument kann nur ein einziger <body>-Bereich existieren.

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

HTML <body> is ein HTML-Element, mit dessen Hilfe Inhalte eines Dokuments dargestellt werden. Sämtliche sichtbaren Inhalte wie Headlines, Textblöcke, Bilder, Tabellen, Hyperlinks, Listen sowie weitere mögliche Elemente werden innerhalb dieses HTML-Tags hinterlegt. 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 unterstützt alle globalen HTML-Attribute.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

HTML <body>: Syntax und Funktionsweise

Bevor wir Ihnen die Funktionsweise von HTML <body> anhand einiger einfacher Beispiele zeigen, lohnt sich ein Blick auf die grundsätzliche 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 einleitenden (<body>) und dem schließenden (</body>) Tag stehen, werden später auf der betreffenden Webseite angezeigt.

Beispiele für die Nutzung von HTML <body>

In den nachfolgenden Beispielen sehen Sie, wie das HTML-<body>-Tag in der Praxis eingesetzt wird.

HTML-Dokument mit simplem <body>-Element

Zunächst erstellen wir ein einfaches HTML-Dokument mit einer Headline, einem Textabschnitt und einem Bild, die alle innerhalb des Körpers hinterlegt werden. Dies ist der entsprechende 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 Navigationsleiste mit href anlegen

Im folgenden Beispiel sehen Sie, wie Sie mit dem HTML-<body>-Tag und dem Attribut href eine Navigationsleiste 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 beispielhafter Code für die Einbindung:

<!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 Webinhalte anzupassen. Wie das funktioniert, 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

Hintergründe anpassen im HTML <body>

Wenn Sie mit CSS lediglich Ihren HTML Background ändern möchten, passiert dies ebenfalls im HTML <body>. Hier sehen Sie, wie Sie die Hintergrundfarbe 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 stattdessen 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
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?