Les balises HTML – Édition numérique

Introduction

Le HTML distingue les balises :
- les balises sémantiques, qui décrivent le sens du contenu,
- les balises de présentation, qui ne font que modifier l’apparence visuelle.
- les balises neutres qui ne sont ni des balises de présentation (elles ne définissent pas de style visuel comme <b> ou <i>) ni sémantiques car elles ne décrivent pas le sens du contenu qu’elles contiennent
Cette distinction est essentielle pour :
- l’accessibilité (lecture par les technologies d’assistance),
- la cohérence éditoriale (ePub, web),
- le référencement (moteurs de recherche).

Pourquoi privilégier les balises sémantiques ?

Elles permettent aux logiciels, navigateurs et lecteurs d’écran de comprendre la structure et la fonction du contenu.
Elles améliorent :
- la navigation (repérage par sections, titres, menus),
- la cohérence typographique lors des conversions (vers ePub, XML),
- la maintenance du code.

Les principales balises sémantiques de HTML5

Structure du document

Balise	Rôle	Exemple d’utilisation
`<header>`	En-tête du document ou d’une section	Logo, titre, navigation
`<nav>`	Zone de navigation	Liste de liens de menu
`<main>`	Contenu principal du document	Exclut en-têtes, menus, pieds de page
`<article>`	Contenu autonome	Article, billet, critique, fiche
`<section>`	Partie thématique	Chapitre, sous-partie, rubrique
`<aside>`	Contenu complémentaire	Encadré, note, biographie
`<footer>`	Pied de page	Mentions légales, liens de bas de page

Contenu textuel

Balise	Sens / fonction	Exemple
`<p>`	Paragraphe	`<p>Texte courant</p>`
`<h1>` à `<h6>`	Titres hiérarchiques	`<h2>Sous-titre</h2>`
`<em>`	Emphase (mise en relief du sens)	`<em>mot important</em>`
`<strong>`	Importance forte (alerte, conclusion)	`<strong>à retenir</strong>`
`<cite>`	Titre d’œuvre, référence bibliographique	`<cite>Le Deuxième Sexe</cite>`
`<q>`	Citation courte	`<q>Le beau est partout</q>`
`<blockquote>`	Citation longue	`<blockquote>Texte cité…</blockquote>`
`<abbr>`	Abréviation avec développement	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<dfn>`	Terme défini pour la première fois	`<dfn>XML</dfn> est un langage de balisage.`
`<code>`	Fragment de code informatique	`<code><p></code>`
`<var>`	Nom de variable	`<var>x</var> = 2`
`<kbd>`	Entrée clavier	`<kbd>Ctrl</kbd> + <kbd>S</kbd>`
`<mark>`	Mise en surbrillance pour insistance	`<mark>mot clé</mark>`
`<sup>`	Exposant	`10<sup>2</sup>`
`<sub>`	Indice	`H<sub>2</sub>O`
`<small>`	Remarques, notes secondaires	`<small>note marginale</small>`
`<time>`	Information temporelle	`<time datetime="2025-11-10">10 nov. 2025</time>`
`<address>`	Coordonnées ou contact	`<address>contact@exemple.fr</address>`
`<br>`	Saut de ligne	—
`<hr>`	Séparation thématique	—
`<ul>`	Liste non ordonnée	`<ul><li>Pomme</li><li>Banane</li></ul>`
`<ol>`	Liste ordonnée	`<ol><li>Allumer le four</li> <li>Préchauffer à 180°C</li> <li>Enfourner le gâteau</li></ol>`
`<li>`	Élément de liste	`<li>Item 1</li>`

Contenu multimédia

Balise	Fonction	Exemple
`<figure>`	Élément illustratif (image, graphique)	`<figure><img src="image.jpg" alt="..." /></figure>`
`<figcaption>`	Légende de figure	`<figcaption>Vue d’ensemble</figcaption>`
`<audio>`	Contenu sonore	`<audio controls src="extrait.mp3"></audio>`
`<video>`	Contenu vidéo	`<video controls src="film.mp4"></video>`
`<source>`	Fichier source média	`<source src="extrait.ogg">`
`<track>`	Sous-titres, description	`<track kind="subtitles" src="ss_fr.vtt">`

Contenu interactif

Balise	Rôle	Exemple
`<a>`	Lien hypertexte	`<a href="URL">Texte du lien</>`
`<button>`	Bouton interactif	`<button>Envoyer</button>`
`<label>`	Étiquette de champ	`<label for="email">Adresse e-mail</label>`
`<input>`	Champ de saisie	`<input type="text">`
`<textarea>`	Zone de texte multi-ligne	`<textarea></textarea>`
`<form>`	Formulaire	`<form action="..."></form>`

Les balises de présentation

Avant HTML5, certaines balises étaient utilisées uniquement pour la mise en forme visuelle, sans signification sémantique.
Elles ne doivent plus être utilisées que dans des cas typographiques spécifiques.

Balise	Fonction	Remplacée par / Alternative sémantique
`<b>`	Texte en gras sans signification particulière	`<strong>` pour indiquer l’importance
`<i>`	Texte en italique sans emphase	`<em>` pour l’emphase sémantique
`<u>`	Texte souligné (souvent confus avec lien)	CSS : `text-decoration: underline;`
`<font>`	Définition de la police, taille, couleur	CSS (propriété `font`)
`<center>`	Centrage du texte	CSS : `text-align: center;`

Les balises neutres

Utiliser uniquement quand aucune autre balise sémantique n’est appropriée.
Toujours lui associer un rôle clair (par un identifiant ou une classe CSS).

Balise	Type d’affichage	Description	Exemple d’utilisation
<div>	Bloc	Conteneur générique pour regrouper des éléments en bloc.	<div class= »conteneur »>…</div>
<span>	En ligne	Conteneur générique pour regrouper du texte ou des éléments en ligne.	<p>Ce <span class= »rouge »>mot</span> est en rouge.</p>

Exemple comparatif

❌ Approche (présentationnelle)

<p><b>Claude Monet</b> est un <i>peintre impressionniste</i> français.</p>

✅ Approche sémantique

<p><strong>Claude Monet</strong> est un <em>peintre impressionniste</em> français.</p>

👉 Ici, <strong> et <em> expriment une valeur de sens : importance et emphase — pas seulement un effet visuel.

Bonnes pratiques

Utiliser les balises selon leur rôle.
Remplacer les balises présentationnelles ou neutres par des balises de sens

Exercice

Remplacer les balises présentationnelles et neutres par des balises sémantiques

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Recette de cuisine</title>
</head>
<body>
    <!-- En-tête -->
    <div class="en-tete">
        <div class="titre">
            <b>Recette : Gâteau au chocolat</b>
        </div>
        <div class="sous-titre">
            <i>Un classique indémodable !</i>
        </div>
    </div>

    <!-- Menu de navigation -->
    <div class="menu">
        <div>Accueil</div>
        <div>Recettes</div>
        <div>Contact</div>
    </div>

    <!-- Contenu principal -->
    <div class="contenu-principal">
        <div class="introduction">
            <p>Voici une recette simple pour un <span class="gras">gâteau au chocolat moelleux</span>.</p>
        </div>

        <div class="ingredients">
            <p><b>Ingrédients :</b></p>
            <div>- 200g de chocolat noir</div>
            <div>- 150g de beurre</div>
            <div>- 3 œufs</div>
            <div>- 100g de sucre</div>
        </div>

        <div class="etapes">
            <p><b>Étapes :</b></p>
            <div>1. Préchauffez le four à 180°C.</div>
            <div>2. Faites fondre le chocolat et le beurre au bain-marie.</div>
            <div>3. Ajoutez les œufs et le sucre, puis mélangez.</div>
            <div>4. Versez la pâte dans un moule et enfournez pendant 25 minutes.</div>
        </div>

        <div class="astuce">
            <p><i>Astuce :</i> Pour un gâteau encore plus moelleux, ajoutez une cuillère à soupe de café.</p>
        </div>

        <div class="variantes">
            <p><b>Variantes possibles :</b></p>
            <div>• Avec des noix</div>
            <div>• Avec des pépites de chocolat</div>
            <div>• Sans gluten (remplacez la farine par de la poudre d'amande)</div>
        </div>

        <figure><img src="https://formation.naimaeditions.com/wp-content/uploads/2025/11/part_gateau_chocolat.jpg" width="40%"><figcaption>Photo d'un gâteau</figcaption></figure>

    </div>

    <!-- Pied de page -->
    <div class="pied-de-page">
        <p>&copy; 2025 - Mon site de recettes</p>
    </div>
</body>
</html>