La balise HTML <body>
La balise <body> contient le contenu visible d'une page. Rôle, attributs dépréciés, remplaçants CSS et événements body.
La balise <body> définit le contenu d'une page web — tout ce que le visiteur voit réellement, comme le texte, les images, les liens, les listes, les tableaux et les formulaires. Elle est placée à l'intérieur de l'élément <html>, immédiatement après l'élément <head>. Un document HTML ne peut contenir qu'une seule balise <body>.
Le rôle de <body> dans le document
Tout document HTML est divisé en deux parties à l'intérieur de l'élément racine <html> :
- Le
<head>contient les métadonnées relatives à la page — son titre, le jeu de caractères, les feuilles de style liées et les scripts. Rien dans le<head>n'est rendu dans la zone de la page. - Le
<body>contient le contenu rendu de la page — la partie que le navigateur affiche à l'écran.
Ainsi, le <body> constitue la zone de contenu visible. Lorsque vous écrivez un titre, un paragraphe ou une image devant apparaître sur la page, cela va à l'intérieur du <body>.
Des classes CSS sont couramment ajoutées à l'élément <body>, permettant aux développeurs et aux designers de cibler facilement une page entière (par exemple, une classe theme-dark qui redéfinit le style de tout ce qui se trouve en dessous). Même si ces classes ne sont jamais utilisées, elles ne posent aucun problème.
Syntaxe
La balise <body> fonctionne par paires. Le contenu est écrit entre les balises ouvrante <body> et fermante </body>.
Exemple de la balise HTML <body> :
Balise HTML <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
</body>
</html>Résultat
Exemple de la balise HTML <body> utilisée avec les propriétés CSS color et line-height :
Exemple de la balise HTML <body> avec les propriétés CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: #444444;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>HTML body tag example</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Attributs dépréciés
Dans les anciennes versions de HTML, la balise <body> portait des attributs de présentation permettant de définir les couleurs à l'échelle de la page et l'image d'arrière-plan. Ces attributs sont dépréciés en HTML5 — ne les utilisez pas. Chacun possède un équivalent CSS :
| Attribut | Valeur | Rôle | Équivalent CSS moderne |
|---|---|---|---|
| bgcolor | couleur | Couleur d'arrière-plan de la page | background-color |
| text | couleur | Couleur du texte par défaut | color |
| background | URL | Image d'arrière-plan | background-image |
| link | couleur | Couleur des liens non visités | a:link { color: … } |
| vlink | couleur | Couleur des liens visités | a:visited { color: … } |
| alink | couleur | Couleur du lien actif (en cours de clic) | a:active { color: … } |
La méthode CSS
Au lieu d'attributs de présentation, stylisez le <body> avec une feuille de style. Cela sépare le contenu de la présentation et garde le balisage propre :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<style>
body {
background-color: #f5f5f5;
color: #333333;
background-image: url("paper.png");
}
a:link { color: #0645ad; }
a:visited { color: #663399; }
a:active { color: #d04437; }
</style>
</head>
<body>
<p>Styled with CSS instead of deprecated <code><body></code> attributes.</p>
<p><a href="https://www.w3docs.com">A link</a></p>
</body>
</html>La balise <body> prend également en charge les attributs globaux standard (class, id, style, lang, etc.) ainsi que les attributs d'événements.
Attributs d'événements spécifiques au body
La plupart des attributs d'événements (comme onclick) s'appliquent à n'importe quel élément, mais quelques-uns n'ont de sens que sur <body> car ils réagissent à des événements sur l'ensemble de la fenêtre ou du document :
| Attribut | Se déclenche quand |
|---|---|
| onload | La page a terminé de se charger (tout le contenu et les ressources). |
| onunload | L'utilisateur navigue ailleurs et la page est déchargée. |
| onresize | La fenêtre du navigateur est redimensionnée. |
Exemple — exécuter du code une fois que la page est prête, puis à nouveau chaque fois que la fenêtre est redimensionnée :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body onload="report('loaded')" onresize="report('resized')">
<p id="status">Waiting…</p>
<script>
function report(message) {
document.getElementById("status").textContent = "Window " + message;
}
</script>
</body>
</html>Dans le code moderne, ces événements sont souvent attachés via JavaScript à la place, par exemple window.addEventListener("load", …), ce qui maintient le comportement en dehors du balisage.
Accessibilité
Le <body> est la racine de tout le contenu rendu ; il prépare donc le terrain pour les technologies d'assistance :
- L'attribut
langsur l'élément<html>(par exemplelang="en") indique aux lecteurs d'écran quelle langue utiliser pour annoncer tout ce qui se trouve à l'intérieur du<body>. Le définir correctement améliore la prononciation. - Étant donné que le
<body>abrite à la fois la navigation et le contenu principal, fournissez un lien de saut de navigation comme premier élément focalisable afin que les utilisateurs de clavier et de lecteur d'écran puissent accéder directement au contenu principal :
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- site navigation --></nav>
<main id="main">
<h1>Page title</h1>
<p>Main content…</p>
</main>
</body>Le lien de saut est généralement masqué visuellement jusqu'à ce qu'il reçoive le focus clavier, mais il reste disponible pour les technologies d'assistance en permanence.