HTML <body> Tag

Definitie en gebruik

<body> De tag definieert het hoofd van het document.

De metadata en documentinformatie van het HTML-document zijn verpakt in het head-element, terwijl de inhoud van het document wordt verpakt in het body-element.

De body-element volgt altijd direct op het head-element, het is de tweede onderliggende element van het html-element.

<body> Het element bevat alle inhoud van het HTML-document, zoals titels, paragrafen, afbeeldingen, hyperlinks, tabellen, lijsten, enz.

Let op:Er kan maar één element in een HTML-document zijn <body> Element.

Voorbeeld

Een eenvoudige maar volledige HTML-document:

<!DOCTYPE html>
<html>
  <head>
    <title>Dokumententitel</title>
  </head>
  <body>
    <h1>Dit is een titel</h1>
    <p>Dit is een paragraaf.</p>
  </body>
</html>

Probeer het zelf

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Globale attributen

<body> De tag ondersteunt ook Globale attributen in HTML.

Event-attributen

<body> De tag ondersteunt ook Event-attributen in HTML.

Standaard CSS-instellingen

De meeste browsers gebruiken de volgende standaardwaarden om te tonen <body> Element:

body {
  weergave: blok;
  marge: 8px;
}
body:focus {
  rand: geen;
}

Probeer het zelf

Meer voorbeelden

Voorbeeld 1

Voeg een achtergrondafbeelding toe aan het document (gebruik CSS):

<html>
<head>
<style>
body {
  achtergrondafbeelding: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">Bezoek codew3c.com!</a></p>
</body>

Probeer het zelf

Voorbeeld 2

Stel de achtergrondkleur van het document in (gebruik CSS):

<html>
<head>
<style>
body {
  achtergrondkleur: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">Bezoek codew3c.com!</a></p>
</body>

Probeer het zelf

Voorbeeld 3

Stel de kleur van de tekst van het document in (gebruik CSS):

<html>
<head>
<style>
body {
  kleur: groen;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Dit is een tekst.</p>
<p><a href="">Bezoek codew3c.com!</a></p>
</body>
</html>

Probeer het zelf

Voorbeeld 4

Stel de kleur van de ongeziene links in het document in (gebruik CSS):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML tutorial</a></p>
</body>
</html>

Probeer het zelf

Voorbeeld 5

Stel de kleur van de actieve links in het document in (gebruik CSS):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML tutorial</a></p>
</body>
</html>

Probeer het zelf

Voorbeeld 6

Stel de kleur van de bezochte links in het document in (gebruik CSS):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML tutorial</a></p>
</body>
</html>

Probeer het zelf

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning