Module 2Structurer et enrichir une page
Chapitre 7 sur 13
Les boîtes : div, span, block et inline
Éléments block et inline, div, span, class, id et la divite.
- ≈ 150 min
- 6 leçons
- 3 vidéos
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 7 sur 13
Éléments block et inline, div, span, class, id et la divite.
Objectifs
Avec ce chapitre, tu sauras…
<div> comme conteneur générique de bloc ;<span> comme conteneur générique en ligne ;class et id pour préparer le CSS ;<div> partout au lieu de balises qui ont un sens.Jusqu'ici, chaque balise avait un sens précis : un titre, un paragraphe, une liste. Mais pour mettre en page, il faut parfois regrouper des éléments dans une boîte, sans leur ajouter de sens : une carte de profil, une colonne, une bannière. C'est le rôle de <div> et <span>. Ce chapitre est le pont entre le HTML et le CSS.
Leçon 1
<p>Premier paragraphe (block).</p>
<p>Deuxième paragraphe, avec <strong>du gras</strong> et <a href="#">un lien</a> (inline).</p><p style="border:1px solid #6d4fc2; padding:2px 4px; margin:4px 0">Premier paragraphe (block).</p>
<p style="border:1px solid #6d4fc2; padding:2px 4px; margin:4px 0">Deuxième paragraphe, avec <strong style="border:1px solid #d65a1f">du gras</strong> et <a href="#" style="border:1px solid #d65a1f">un lien</a> (inline).</p>Tableau: Les éléments les plus courants
| Block (nouvelle ligne, toute la largeur) | Inline (dans la ligne, largeur du contenu) |
|---|---|
<div>, <p>, <h1> à <h6> | <span>, <a>, <strong>, <em> |
<ul>, <ol>, <li>, <dl> | <img>, <br>, <code>, <abbr> |
<blockquote>, <pre>, <figure>, <hr> | <mark>, <small>, <sub>, <sup> |
<table>, <form> | <input>, <button>, <label>, <select> |
<header>, <nav>, <main>, <section>, <footer> | <q>, <cite>, <kbd>, <time> |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Leçon 2
Leçon 3
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Leçon 4
Leçon 5
class | id | |
|---|---|---|
| combien par page ? | autant d'éléments qu'on veut | un seul élément |
| plusieurs valeurs ? | oui, séparées par des espaces : class="carte carte-premium" | non |
| sélecteur CSS | .carte | #contact |
| usage principal | mise en forme (CSS) |
Leçon 6
| Français | Anglais | Définition |
|---|---|---|
| élément de bloc | block element | commence sur une nouvelle ligne, prend toute la largeur |
| élément en ligne | inline element | reste dans le flux du texte |
| conteneur | container, wrapper | élément qui en regroupe d'autres |
| classe | class |
1Un élément block…
2Lequel est inline par défaut ?
3Combien d'éléments peuvent avoir id="menu" dans une page ?
4Pour mettre en couleur un seul mot d'une phrase, sans lui donner de sens :
5Un <p> peut-il contenir un <ul> ?
6Le meilleur nom de classe est…
L'essentiel du chapitre
div, p, h1, ul…). Inline : dans la ligne (span, a, strong, img…).<div> = boîte de bloc sans sens ; <span> = boîte en ligne sans sens. On les utilise quand aucune balise sémantique ne convient.<p> ne contient aucun block.class : réutilisable, pour le CSS · id : unique, pour les ancres et JavaScript.ancres (href="#contact"), JavaScript, formulaires |
| nom réutilisable pour cibler des éléments en CSS |
| divite | divitis | abus de <div> sans sens |
Block ou inline, c'est le comportement par défaut du navigateur. En CSS, la propriété display peut le changer : un <li> peut devenir inline pour faire un menu horizontal, un <a> peut devenir block. Tu le verras dans la formation CSS (chapitre « display et flux »).
Les blocks. Pendant le segment, repère dans la vidéo quels éléments passent à la ligne et lesquels restent dans la ligne, puis compare avec le tableau.
Les éléments de base, juste avant le segment sur les blocks : un bon rappel des balises vues dans les chapitres 3 à 5.
<div> (division) est un conteneur block qui n'a aucun sens : il sert seulement à regrouper des éléments pour les mettre en forme ensemble avec le CSS.
<div class="carte-profil">
<img src="images/anas.jpg" alt="Portrait d'Anas" width="120" height="120">
<div class="carte-infos">
<h3>Anas El Amrani</h3>
<p>Développeur front-end junior</p>
<p><a href="mailto:anas@exemple.ma">anas@exemple.ma</a></p>
</div>
</div>Sans CSS, ce code s'affiche comme une simple suite d'éléments. Mais les deux <div> et leurs classes permettront au CSS d'écrire : « la carte a un fond blanc et une ombre, l'image est à gauche, les infos à droite ».
<span> est l'équivalent inline de <div> : il entoure un morceau de texte pour le mettre en forme, sans lui donner de sens.
<p>Prix : <span class="prix">349 DH</span> au lieu de <del>499 DH</del></p>
<p>Statut de la commande : <span class="statut statut-livre">livrée</span></p>
<p lang="fr">Le mot <span lang="ar">مرحبا</span> signifie « bienvenue ».</p>Pose-toi les questions dans cet ordre :
<strong>, <nav>, <article>, <time>…) ? Si oui, utilise-la.<div>.<span>.Les balises div et span, avec leurs différences. C'est le segment principal du chapitre.
<p> ne peut contenir aucun élément block : ni <div>, ni <ul>, ni <h2>, ni un autre <p> ;<a> peut entourer des éléments block (par exemple toute une carte cliquable), tant qu'il ne contient pas d'autre lien ou de bouton.<p>Nos services :
<ul>
<li>Création de sites</li>
</ul>
</p>Quand le navigateur rencontre <ul> dans un <p>, il ferme automatiquement le paragraphe juste avant. Ton </p> final devient orphelin, et le navigateur crée un paragraphe vide. Résultat : des espaces inattendus et un CSS qui ne s'applique pas où tu crois. Écris plutôt <p>Nos services :</p> puis la liste.
Tableau: class ou id ?
La divite (divitis) est la maladie du débutant qui met des <div> partout : <div class="titre">, <div class="menu">, <div class="lien">… Ça s'affiche, mais la page n'a plus aucun sens pour Google et pour les lecteurs d'écran.
<div class="entete">
<div class="titre">Mon blog</div>
<div class="menu">
<div><a href="/">Accueil</a></div>
<div><a href="/articles">Articles</a></div>
</div>
</div><header>
<h1>Mon blog</h1>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/articles">Articles</a></li>
</ul>
</nav>
</header><header> et <nav> sont des balises sémantiques : c'est tout le sujet du chapitre 8.
Tableau: Le vocabulaire du chapitre
Trouve les trois problèmes de ce code et corrige-le.
<p class="intro">Bienvenue !
<div class="bloc">Découvrez nos offres.</div>
</p>
<span><h2>Nos offres</h2></span>
<div id="offre">Offre 1</div>
<div id="offre">Offre 2</div>Classe ces éléments en deux colonnes, block ou inline : h2, a, li, img, section, em, table, button, blockquote, code.
Écris le HTML d'une carte produit : une image, le nom du produit en titre de niveau 3, une description, un prix dans un <span class="prix">, et un lien « Voir le produit ». Le tout regroupé dans une <div class="carte-produit">. Fais ensuite trois cartes dans une <div class="grille-produits">.
class="alerte" plutôt que class="texte-rouge" (et si demain l'alerte devient orange ?) ;carte-profil, menu-principal ;carte, carte__titre, carte--premium. Tu la découvriras dans la formation CSS.