Remplacer les conteneurs anonymes

Une page peut s’afficher correctement tout en restant difficile à comprendre dans son code. Si vous utilisez div pour chaque zone, le navigateur reçoit des conteneurs sans indication sur la fonction de leur contenu.

Dans cette leçon, vous allez repérer cette limite et apprendre à décider quand un conteneur doit être remplacé par un élément porteur de sens. Vous préparez ainsi la structure de la page de réservation, sans modifier encore ses zones principales.

Un conteneur générique ne décrit pas son contenu

L’élément div sert à regrouper des éléments lorsqu’aucun élément plus précis ne convient. Il n’indique, à lui seul, ni le sujet du groupe ni la fonction qu’il remplit dans la page. Un navigateur peut l’afficher, mais une personne qui lit le code doit examiner son contenu pour comprendre pourquoi ce groupe existe.

Un élément sémantique, au contraire, donne une indication sur le rôle du contenu qu’il contient. Cette information rend la structure plus compréhensible pour les personnes qui consultent le fichier et pour les outils qui interprètent le document. Le choix ne dépend donc pas de l’apparence souhaitée : celle-ci relève de la présentation, tandis que l’élément HTML décrit la nature du contenu.

Repérer un conteneur anonyme

Considérez ce fragment isolément : le conteneur entoure le nom et les coordonnées de l’atelier, mais rien dans la balise n’explique ce regroupement. Le fragment est valide, mais son organisation reste anonyme. Vous pouvez le constater sans vous appuyer sur une classe inventée ou sur une règle de style.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Fragment de réservation</title>
</head>
<body>
    <div>
        <p>Atelier créatif</p>
        <p>Durée : deux heures. Les places sont limitées.</p>
    </div>
</body>
</html>

Pour décider si le groupe a besoin d’un élément plus précis, formulez sa fonction en une phrase. Par exemple : « ce groupe présente l’atelier » ou « ce groupe contient les informations pratiques ». Si vous ne pouvez pas attribuer de rôle au groupe, vérifiez d’abord si le conteneur est nécessaire. S’il l’est, choisissez un élément adapté à ce rôle lorsqu’il en existe un.

Choisir selon la fonction, pas selon l’apparence

Ne remplacez pas chaque div par une balise sémantique au hasard. Une balise n’est utile que si son sens correspond au contenu qu’elle encadre. Un nom plus précis n’est pas automatiquement un meilleur choix si son rôle ne correspond pas à la zone concernée.

Dans votre projet, la page de réservation contient des zones distinctes : la présentation de l’atelier, les informations pratiques, le formulaire et les tarifs. Avant toute modification, identifiez le rôle de chacune. Les noms de classes prévus dans le contrat peuvent faciliter le repérage, mais ils ne changent pas le sens d’une balise HTML : c’est l’élément utilisé qui décrit la structure.

À retenir

• div regroupe du contenu sans en préciser le rôle.
• Un élément sémantique décrit la fonction du contenu qu’il contient.
• Décidez d’abord quel rôle joue une zone, puis choisissez l’élément correspondant.
• N’utilisez pas une balise sémantique uniquement pour modifier l’apparence.

Dans la prochaine leçon, vous appliquerez ce principe à l’en-tête du site et à sa navigation.