# HTML <body> : 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/), 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/attributs-html/) principaux.

## 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 :

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

Seuls les contenus situés entre la balise d’introduction (&lt;body&gt;) et la balise de fermeture (&lt;/body&gt;) 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
<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`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/a-href-en-html/). Voici le code approprié :

```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 &lt;body&gt;

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 :

```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 &lt;body&gt;

À l’aide de [CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/) vous pouvez également utiliser la zone `<body>` pour personnaliser le design de votre site Web. L’exemple suivant montre comment cela fonctionne :

```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 &lt;body&gt;

Si vous souhaitez simplement modifier votre [arrière plan HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/backgrounds-html/) avec CSS, cela se fait également au sein de la balise HTML `<body>`. Voici comment définir la couleur d’arrière-plan :

```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 :

```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>
```


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-body/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-body/) for AI/LLM consumption.