Balise HTML <body>

Définition et utilisation

<body> La balise définit le corps du document.

Les métadonnées du document HTML et les informations du document sont enveloppées dans l'élément head, et le contenu du document est enveloppé dans l'élément body.

L'élément body suit toujours l'élément head, il est le deuxième élément fils de l'élément html.

<body> L'élément contient tout le contenu du document HTML, par exemple des titres, des paragraphes, des images, des liens hypertextes, des tableaux, des listes, etc.

Attention :Un document HTML ne peut en contenir qu'un. <body> Élément.

Exemple

Un document HTML simple mais complet :

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Ceci est un titre</h1>
    <p>Ceci est un paragraphe.</p>
  </body>
</html>

Essayer par vous-même

Astuce :Plus d'exemples sont disponibles en bas de la page.

Attributs globaux

<body> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<body> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <body> Élément :

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

Essayer par vous-même

Plus d'exemples

Exemple 1

Ajouter une image de fond au document (utilisez CSS) :

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p><a href="">Visitez codew3c.com !</a></p>
</body>

Essayer par vous-même

Exemple 2

Définir la couleur de fond du document (utilisez CSS) :

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p><a href="https://www.codew3c.com">Visitez codew3c.com !</a></p>
</body>

Essayer par vous-même

Exemple 3

Définir la couleur du texte du document (utilisez CSS) :

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ceci est un texte.</p>
<p><a href="">Visitez codew3c.com !</a></p>
</body>
</html>

Essayer par vous-même

Exemple 4

Définir la couleur des liens non visités dans le document (en utilisant 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/">Tutoriel HTML</a></p>
</body>
</html>

Essayer par vous-même

Exemple 5

Définir la couleur des liens actifs dans le document (en utilisant 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/">Tutoriel HTML</a></p>
</body>
</html>

Essayer par vous-même

Exemple 6

Définir la couleur des liens visités dans le document (en utilisant 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/">Tutoriel HTML</a></p>
</body>
</html>

Essayer par vous-même

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support