L’élément HTML <body> contient tous les contenus visibles d’un document HTML. Il ne peut y avoir qu’une seule zone <body> par document.

Qu’est-ce que la balise HTML <body> et à quoi sert-elle ?

HTML <body> est un élément HTML qui permet d’afficher le contenu d’un document. Tous les contenus visibles comme les titres, les blocs de texte, les images, les tableaux, les hyperliens, les listes ainsi que d’autres éléments possibles sont déposés à l’intérieur de cette balise HTML, aussi parfois appelée tag. Dans chaque document, il ne peut y avoir qu’un seul tag HTML <body>. Celui-ci se trouve toujours sous la zone <head> et au-dessus du pied de page HTML. La balise <body> supporte tous les attributs HTML principaux.

Hébergement Web
Hébergement Web flexible, performant et sûr
  • Certificat SSL et protection DDoS
  • Sauvegarde et restauration des données
  • Assistance 24/7 et conseiller personnel

HTML <body> : syntaxe et fonctionnement

Avant de vous montrer le fonctionnement de HTML <body> à l’aide de quelques exemples simples, jetons un œil à la syntaxe de base de l’élément. Elle se présente comme suit :

<body>C’est ici que les contenus visibles du site Web se trouvent.</body>
html

Seuls les contenus situés entre la balise d’introduction (<body>) et la balise de fermeture (</body>) seront affichés ultérieurement sur le site Web.

Exemples d’utilisation du tag HTML <body>

Les exemples suivants montrent comment HTML <body> est utilisé dans la pratique.

Document HTML avec un simple élément <body>

Nous créons tout d’abord un document HTML simple avec une ligne de titre, un paragraphe de texte et une image, qui seront tous déposés à l’intérieur du corps. Voici le code correspondant :

<html>
<head>
<title>HTML body dans un document</title>
</head>
<body>
<h1>Voici votre ligne de titre.</h1>
<p>Le contenu de votre site Web se trouve ici.</p>
<img src="exemple.jpg" alt="Une image s’affiche ici.">
</body>
</html>
html

Créer une barre de navigation avec href

Dans l’exemple suivant, voici comment créer une barre de navigation pour votre site Web à l’aide de la balise HTML <body> et de l’attribut href. Voici le code approprié :

<!DOCTYPE html>
<html>
<head>
<title>Site Web avec une barre de navigation</title>
</head>
<body>
<nav>
<a href="#home">Accueil</a> |
<a href="#about">A propos</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Accueil</h2></section>
<section id="about"><h2>A propos</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Intégrer une vidéo via la balise HTML <body>

Pour intégrer une vidéo sur votre site Web, la zone <body> est l’endroit approprié (et le seul possible, par ailleurs) pour le faire ! Voici un exemple de code pour l’intégration :

<!DOCTYPE html>
<html>
<head>
<title>Site Web avec une vidéo</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="exemplefilm.mp4" type="video/mp4">
</video>
</body>
</html>
html

Modifier le design via le tag HTML <body>

À l’aide de CSS vous pouvez également utiliser la zone <body> pour personnaliser le design de votre site Web. L’exemple suivant montre comment cela fonctionne :

<!DOCTYPE html>
<html>
<head>
<title>HTML body avec des modifications graphiques</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Voici votre ligne de titre.</h1>
<p>Le contenu de votre site Web se trouve ici.</p>
</body>
</html>
html

Personnaliser l’arrière-plan avec HTML <body>

Si vous souhaitez simplement modifier votre arrière plan HTML avec CSS, cela se fait également au sein de la balise HTML <body>. Voici comment définir la couleur d’arrière-plan :

<!DOCTYPE html>
<html>
<head>
<title>HTML body avec une nouvelle couleur d’arrière-plan</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Voici votre ligne de titre.</h1>
<p><a href="https://www.exemple.com">Visitez exemple.com !</a></p>
</body>
</html>
html

Si vous souhaitez insérer une image à la place, voici le code nécessaire :

<!DOCTYPE html>
<html>
<head>
<title>HTML body avec une nouvelle image d’arrière-plan</title>
<style>
body {
background-image: url(exemple.png);
}
</style>
</head>
<body>
<h1>Voici votre ligne de titre.</h1>
<p><a href="https://www.exemple.com">Visitez exemple.com !</a></p>
</body>
</html>
html
Nom de domaine
Votre domaine en un clic
  • Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
  • 1 certificat SSL Wildcard par contrat
  • Boîte email de 2 Go
Cet article vous a-t-il été utile ?
Aller au menu principal