Het HTML <body> -element bevat alle zichtbare inhoud van een HTML-document. Er kan slechts één <body> per HTML-document zijn.

Wat is de HTML <body> -tag en waarvoor wordt deze gebruikt?

HTML <body> is een HTML-element dat wordt gebruikt om de inhoud van een document aan gebruikers weer te geven. Alle zichtbare inhoud, zoals koppen, tekstblokken, afbeeldingen, tabellen, hyperlinks, lijsten en andere elementen, wordt opgeslagen in deze HTML-tag. Er kan slechts één HTML <body> in elk document voorkomen. Deze bevindt zich altijd onder het <head> en boven de HTML-voettekst. De <body> ondersteunt alle globale HTML-attributen.

Wat is de syntaxis en functionaliteit van HTML <body>?

Voordat we u aan de hand van enkele eenvoudige voorbeelden laten zien hoe HTML <body> werkt, is het de moeite waard om even naar de basissyntaxis van het element te kijken. Deze ziet er als volgt uit:

<body>This is where all the visible website content is stored.</body>
html

Alleen inhoud tussen de openings- (<body>) en sluitingstag (</body>) wordt later op de betreffende webpagina weergegeven.

HTML <body> voorbeelden

In de volgende voorbeelden kunt u zien hoe de HTML <body> in de praktijk wordt gebruikt.

HTML-document met <body> eenvoudige elementen

Eerst gaan we een eenvoudig HTML-document maken met een koptekst, een tekstgedeelte en een afbeelding, die allemaal in de hoofdtekst worden geplaatst. Dit is de bijbehorende code:

<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
</body>
</html>
html

Een navigatiebalk maken met href

Het volgende voorbeeld laat zien hoe u een navigatiebalk voor uw website kunt maken met behulp van de HTML <body> tag en het href-attribuut. Hier is de code:

<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Video insluiten via de HTML <body> -tag

Als u een video op uw website wilt insluiten, is sectie <body> de juiste (en enige) plaats om dat te doen. Hieronder vindt u een voorbeeld van hoe u een video kunt insluiten:

<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
</body>
</html>
html

Het ontwerp van inhoud wijzigen via HTML <body> -tag

Met behulp van CSS kunt u ook het gebied <body> gebruiken om het ontwerp van uw webcontent aan te passen. In het volgende voorbeeld kunt u zien hoe dit werkt:

<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
</body>
</html>
html

Achtergronden aanpassen in HTML <body>

Als u uw HTML-achtergrond met CSS wilt wijzigen, kunt u dat ook doen in HTML <body>. Hier volgt hoe u de achtergrondkleur instelt:

<html>
<head>
<title>HTML body with new background colour</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html

Gebruik de onderstaande code om een afbeelding in te voegen:

<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html
Ga naar hoofdmenu