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.
- 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>
htmlNur 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>
htmlEine 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>
htmlVideo 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>
htmlDesign ä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>
htmlHintergrü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>
htmlMö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- Inklusive Wildcard-SSL-Zertifikat
- Inklusive Domain Lock
- Inklusive 2 GB E-Mail-Postfach