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 ge­brui­kers weer te geven. Alle zichtbare inhoud, zoals koppen, tekst­blok­ken, af­beel­din­gen, tabellen, hy­per­links, lijsten en andere elementen, wordt op­ge­sla­gen 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> on­der­steunt alle globale HTML-at­tri­bu­ten.

Wat is de syntaxis en func­ti­o­na­li­teit van HTML <body>?

Voordat we u aan de hand van enkele een­vou­di­ge voor­beel­den laten zien hoe HTML <body> werkt, is het de moeite waard om even naar de ba­sis­syn­taxis 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 slui­tingstag (</body>) wordt later op de be­tref­fen­de webpagina weer­ge­ge­ven.

HTML <body> voor­beel­den

In de volgende voor­beel­den kunt u zien hoe de HTML <body> in de praktijk wordt gebruikt.

HTML-document met <body> een­vou­di­ge elementen

Eerst gaan we een eenvoudig HTML-document maken met een koptekst, een tekst­ge­deel­te en een af­beel­ding, die allemaal in de hoofd­tekst worden geplaatst. Dit is de bij­be­ho­ren­de 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 na­vi­ga­tie­balk maken met href

Het volgende voorbeeld laat zien hoe u een na­vi­ga­tie­balk 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 web­con­tent 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

Ach­ter­gron­den aanpassen in HTML <body>

Als u uw HTML-ach­ter­grond met CSS wilt wijzigen, kunt u dat ook doen in HTML <body>. Hier volgt hoe u de ach­ter­grond­kleur 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 on­der­staan­de code om een af­beel­ding 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