HTML : l’élément HTML pour les contenus visibles
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.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
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>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>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>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>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>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>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>- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée