Structure d'une page web avec les balises
HTML du body
Le <body> est l'élément qui contient tout le contenu visible d'une page web. C'est à l'intérieur de
cette balise que vous structurez l'information que vos utilisateurs verront. Voici un guide détaillé
des balises qui permettent d'organiser efficacement le contenu d'une page web.
1. Balises de structure principale
<header>
Représente l'en-tête d'une section ou de la page entière. Contient généralement le logo, le titre
principal et la navigation.
html
<header>
<img src="[Link]" alt="Logo du site">
<h1>Titre du site</h1>
<nav>
<!-- Menu de navigation -->
</nav>
</header>
<nav>
Définit une section contenant des liens de navigation.
html
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
<main>
Contient le contenu principal de la page. Une page ne devrait avoir qu'un seul élément <main>.
html
<main>
<h2>Titre de la section principale</h2>
<p>Contenu principal du site...</p>
</main>
<article>
Représente un contenu autonome et indépendant (article de blog, commentaire, post de forum,
etc.).
html
<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article...</p>
<footer>
<p>Écrit par Jean Dupont - <time datetime="2023-05-15">15 mai 2023</time></p>
</footer>
</article>
<section>
Définit une section thématique dans un document.
html
<section>
<h2>Nos services</h2>
<p>Description des services...</p>
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</section>
<aside>
Représente du contenu indirectement lié au contenu principal (sidebars, encarts publicitaires,
etc.).
html
<aside>
<h3>À propos de l'auteur</h3>
<p>Biographie courte...</p>
<h3>Articles connexes</h3>
<ul>
<li><a href="#">Article lié 1</a></li>
<li><a href="#">Article lié 2</a></li>
</ul>
</aside>
<footer>
Définit le pied de page d'une section ou de la page entière.
html
<footer>
<p>© 2025 - Tous droits réservés</p>
<nav>
<a href="[Link]">Mentions légales</a>
<a href="[Link]">Politique de confidentialité</a>
</nav>
</footer>
2. Balises de contenu textuel
<h1> à <h6>
Définissent les titres hiérarchiques, <h1> étant le plus important et <h6> le moins important.
html
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Titre de niveau 3</h3>
<p>
Définit un paragraphe de texte.
html
<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs phrases et explications.</p>
<blockquote>
Représente une citation externe.
html
<blockquote cite="[Link]
<p>Ceci est une citation provenant d'une source externe.</p>
<footer>— Auteur de la citation</footer>
</blockquote>
<ul>, <ol> et <li>
Définissent des listes non ordonnées (<ul>), ordonnées (<ol>) et les éléments de ces listes
(<li>).
html
<ul>
<li>Élément non ordonné 1</li>
<li>Élément non ordonné 2</li>
</ul>
<ol>
<li>Premier élément ordonné</li>
<li>Deuxième élément ordonné</li>
</ol>
<dl>, <dt> et <dd>
Créent des listes de définitions avec termes (<dt>) et descriptions (<dd>).
html
<dl>
<dt>HTML</dt>
<dd>Langage de balisage utilisé pour créer des pages web.</dd>
<dt>CSS</dt>
<dd>Langage de style utilisé pour mettre en forme les pages HTML.</dd>
</dl>
3. Balises pour le contenu interactif
<div>
Conteneur générique sans valeur sémantique particulière, utilisé pour le style ou pour regrouper
des éléments.
html
<div class="container">
<div class="row">
<div class="column">Contenu de la colonne 1</div>
<div class="column">Contenu de la colonne 2</div>
</div>
</div>
<span>
Conteneur en ligne générique, utilisé pour appliquer des styles à une portion de texte.
html
<p>Ceci est un <span class="highlight">mot mis en évidence</span> dans un
paragraphe.</p>
<button>
Définit un bouton cliquable.
html
<button type="button" onclick="maFonction()">Cliquez ici</button>
<form>, <input>, <textarea>, <select>
Créent des formulaires interactifs.
html
<form action="/traitement" method="post">
<div>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
</div>
<div>
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<div>
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="suisse">Suisse</option>
</select>
</div>
<button type="submit">Envoyer</button>
</form>
4. Balises pour le contenu multimédia
<img>
Insère une image.
html
<img src="[Link]" alt="Description de l'image" width="300" height="200">
<figure> et <figcaption>
Encapsulent un contenu multimédia avec sa légende.
html
<figure>
<img src="[Link]" alt="Graphique des ventes annuelles">
<figcaption>Figure 1: Évolution des ventes entre 2020 et 2025</figcaption>
</figure>
<video> et <audio>
Intègrent des fichiers vidéo et audio.
html
<video controls width="500">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Votre navigateur ne prend pas en charge la lecture vidéo.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Votre navigateur ne prend pas en charge la lecture audio.
</audio>
5. Balises pour les tableaux
<table>, <tr>, <th> et <td>
Créent des tableaux de données.
html
<table>
<caption>Titre du tableau</caption>
<thead>
<tr>
<th>En-tête colonne 1</th>
<th>En-tête colonne 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donnée ligne 1, colonne 1</td>
<td>Donnée ligne 1, colonne 2</td>
</tr>
<tr>
<td>Donnée ligne 2, colonne 1</td>
<td>Donnée ligne 2, colonne 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Notes de bas de tableau</td>
</tr>
</tfoot>
</table>
Exemple complet d'une structure de page
Voici un exemple complet montrant comment ces balises peuvent être utilisées ensemble pour
créer une page web bien structurée :
html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<img src="[Link]" alt="Logo du site">
<h1>Mon Site Web</h1>
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<h2>Bienvenue sur notre site</h2>
<p>Introduction et présentation...</p>
</section>
<section id="services">
<h2>Nos Services</h2>
<div class="service-grid">
<article class="service-card">
<h3>Service 1</h3>
<p>Description du service 1...</p>
<a href="[Link]">En savoir plus</a>
</article>
<article class="service-card">
<h3>Service 2</h3>
<p>Description du service 2...</p>
<a href="[Link]">En savoir plus</a>
</article>
</div>
</section>
<section id="temoignages">
<h2>Témoignages clients</h2>
<blockquote>
<p>Un témoignage très positif d'un client satisfait.</p>
<footer>— Marie Dupont, Cliente depuis 2022</footer>
</blockquote>
</section>
</main>
<aside>
<section class="newsletter">
<h3>Abonnez-vous à notre newsletter</h3>
<form action="/subscribe" method="post">
<input type="email" name="email" placeholder="Votre adresse email" required>
<button type="submit">S'abonner</button>
</form>
</section>
<section class="contact-info">
<h3>Nous contacter</h3>
<address>
123 Rue Exemple<br>
75000 Paris<br>
<a href="[Link] 23 45 67 89</a><br>
<a href="[Link]
</address>
</section>
</aside>
<footer>
<p>© 2025 Mon Site Web - Tous droits réservés</p>
<nav class="footer-nav">
<a href="[Link]">Mentions légales</a>
<a href="[Link]">Politique de confidentialité</a>
<a href="[Link]">Plan du site</a>
</nav>
<div class="social-links">
<a href="[Link]
<a href="[Link]
<a href="[Link]
</div>
</footer>
<script src="[Link]"></script>
</body>
</html>
Cette structure utilise de manière appropriée les balises sémantiques pour créer une page web
claire, accessible et bien organisée qui sera à la fois facile à maintenir pour les développeurs et
facile à comprendre pour les robots d'indexation.