Module 1Les bases du HTML
Chapitre 3 sur 13
Baliser le texte
Titres, paragraphes, mise en valeur, citations, code et entités HTML.
- ≈ 135 min
- 5 leçons
- 5 vidéos
- 3 exercices
Module 1Les bases du HTML
Chapitre 3 sur 13
Titres, paragraphes, mise en valeur, citations, code et entités HTML.
Objectifs
Avec ce chapitre, tu sauras…
<h1> à <h6> ;<strong> et <b>, <em> et <i>, et utiliser <mark>, <small>, <sub>, <sup>, <del>, <ins> ;Le texte est l'essentiel du web. Bien le baliser, c'est dire au navigateur, à Google et aux lecteurs d'écran ce que chaque morceau de texte signifie. Règle de base de tout ce chapitre : on choisit une balise pour son sens, jamais pour son apparence. L'apparence, c'est le travail du CSS.
Leçon 1
HTML propose six niveaux de titres, du plus important (<h1>) au moins important (<h6>). Ils forment le plan de ta page, comme le sommaire d'un livre.
<h1>Guide du voyageur à Marrakech</h1>
<h2>Que visiter ?</h2>
<h3>La place Jemaa el-Fna</h3>
<h3>Le jardin Majorelle</h3>
<h2>Où manger ?</h2>
<h3>Cuisine traditionnelle</h3>
<h3>Street food</h3><h1>Guide du voyageur à Marrakech</h1>
<h2>Que visiter ?</h2>
<h3>La place Jemaa el-Fna</h3>
<h3>Le jardin Majorelle</h3>
<h2>Où manger ?</h2>Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Leçon 2
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Leçon 3
| Balise | Sens | Affichage par défaut | Exemple d'usage |
|---|---|---|---|
<strong> | importance forte, urgence | gras | « Attention : ne débranchez pas » |
<em> | accentuation : on insiste en parlant | italique | « Je t'avais dit de sauvegarder » |
<mark> | texte surligné, pertinent dans ce contexte |
Leçon 4
| Balise | Rôle | Exemple |
|---|---|---|
<blockquote> | citation longue, en bloc | un extrait d'article |
<q> | citation courte, dans une phrase (guillemets automatiques) | il a dit <q>à demain</q> |
<cite> | titre d'une œuvre | <cite>L'Alchimiste</cite> |
<abbr> |
Leçon 5
| Caractère | Entité | Quand l'utiliser |
|---|---|---|
< | < (less than) | afficher une balise comme du texte |
> | > (greater than) | idem |
& | & | afficher un « et commercial » |
" | " |
1Combien de <h1> une page devrait-elle avoir ?
2Après un <h2>, un sous-titre s'écrit avec…
3Pour un avertissement important, on utilise…
4Comment afficher le texte <p> à l'écran ?
5Dans ton code, trois espaces entre deux mots donnent à l'écran…
6Quelle balise conserve les espaces et les retours à la ligne ?
L'essentiel du chapitre
<h1>, une hiérarchie sans saut de niveau, et jamais un titre choisi pour sa taille.<br> pour un retour à la ligne de contenu, <p> pour un paragraphe, le CSS pour l'espacement.<strong> = important, <em> = on insiste ; <b> et <i> sont seulement visuels.<mark>, <small>, <del>, <ins>, <sub>, <sup>, <blockquote>, <q>, <abbr>, <code>, <pre>, <kbd>.< > & ©. Avec UTF-8, les accents s'écrivent directement.| fond jaune |
| un mot recherché dans des résultats |
<small> | mentions légales, petits caractères | plus petit | « © 2026 — tous droits réservés » |
<del> | texte supprimé | barré | un ancien prix |
<ins> | texte ajouté | souligné | un nouveau prix |
<s> | texte qui n'est plus exact | barré | « Livraison en 5 jours » remplacé |
<sub> | indice | en bas | H2O |
<sup> | exposant | en haut | 210, 1er |
<b> | attire l'attention, sans importance particulière | gras | un nom de produit dans un test |
<i> | voix différente : terme étranger, pensée, titre d'œuvre | italique | « un smartphone », « le Petit Prince » |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
abréviation, avec sa signification dans title |
<abbr title="HyperText Markup Language">HTML</abbr> |
<code> | un morceau de code dans une phrase | la balise <code><p></code> |
<pre> | texte préformaté : les espaces et retours sont conservés | un bloc de code, un dessin ASCII |
<kbd> | touche du clavier | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
<address> | coordonnées de contact | adresse de l'auteur ou de l'entreprise |
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
| guillemet dans une valeur d'attribut |
| espace insécable | | empêcher un retour à la ligne : 50 DH, M. Alami |
© | © | copyright |
→ | → | flèche (ou tape directement → en UTF-8) |
Les titres de <h1> à <h6>. Après le segment, vérifie que tu peux énoncer les trois règles de l'encadré ci-dessus.
Un paragraphe s'écrit avec <p>. Le navigateur ajoute automatiquement un espace avant et après chaque paragraphe.
Plusieurs espaces, tabulations ou retours à la ligne consécutifs dans ton code sont affichés comme un seul espace. Pour aller à la ligne, il faut une balise : <br> (retour à la ligne simple) ou un nouveau <p> (nouveau paragraphe).
<p>Ce texte contient
beaucoup d'espaces
et des retours à la ligne.</p>
<p>Adresse :<br>
12, rue des Orangers<br>
20000 Casablanca</p>
<hr>
<p>Un nouveau sujet commence après la ligne horizontale.</p><p>Ce texte contient
beaucoup d'espaces
et des retours à la ligne.</p>
<p>Adresse :<br>12, rue des Orangers<br>20000 Casablanca</p>
<hr>
<p>Un nouveau sujet commence après la ligne horizontale.</p><br><br><br> pour espacer deux blocs est une mauvaise pratique. <br> sert uniquement aux retours à la ligne qui font partie du contenu : une adresse, un poème, des paroles. Pour espacer des blocs, on utilise la propriété CSS margin.
Les paragraphes. Arrête-toi à 1:00:48 : le chapitre suivant de la vidéo est la présentation d'une formation payante.
Tableau: Les balises de mise en valeur
Tableau: Les balises à connaître
Certains caractères ont un sens pour HTML : < ouvre une balise, & commence une entité. Pour les afficher, on écrit une entité : & + nom + ;.
Tableau: Les entités à connaître
Écris le HTML qui affiche exactement, sur deux lignes et en conservant l'indentation, le texte suivant :
<ul>
<li>Café & thé</li>Transforme ce texte brut en HTML correct : un titre principal, deux sous-titres, des paragraphes, et la bonne balise pour chaque mot signalé entre crochets.
Ma recette de msemen
Les ingrédients
Pour 10 msemen, il faut 500 g de farine, 1 c. à café de sel et de l'eau tiède.
[important] Ne jamais utiliser d'eau froide.
La préparation
Pétrir la pâte [on insiste: au moins] 10 minutes. Le prix du kilo de farine est passé de [ancien] 12 DH à [nouveau] 9 DH.Ce plan de page est incorrect. Explique les trois problèmes et réécris les titres.
<h2>Mon CV</h2>
<h1>Expériences</h1>
<h4>Stage chez OCP</h4>
<h1>Formation</h1><p><strong>Important :</strong> le devoir est à rendre <em>avant</em> vendredi.</p>
<p>Prix : <del>499 DH</del> <ins>349 DH</ins> — <mark>promotion</mark> limitée.</p>
<p>La formule de l'eau est H<sub>2</sub>O et 2<sup>10</sup> = 1024.</p>
<p><small>Offre valable jusqu'au 31 décembre 2026.</small></p><p><strong>Important :</strong> le devoir est à rendre <em>avant</em> vendredi.</p>
<p>Prix : <del>499 DH</del> <ins>349 DH</ins> — <mark>promotion</mark> limitée.</p>
<p>La formule de l'eau est H<sub>2</sub>O et 2<sup>10</sup> = 1024.</p>
<p><small>Offre valable jusqu'au 31 décembre 2026.</small></p>Non. Ils s'affichent tous les deux en gras, mais <strong> dit « ce texte est important » (un lecteur d'écran peut changer de ton), alors que <b> est purement visuel. Dans 90 % des cas, c'est <strong> que tu veux. Même logique : <em> (on insiste) plutôt que <i>.
Le formatage du texte. Pendant la vidéo, demande-toi pour chaque balise montrée : « quel sens apporte-t-elle ? », et compare avec le tableau ci-dessus.
En complément (anglais) : le chapitre « Text Basics » de Dave Gray, pour revoir les balises de texte avec d'autres exemples.
<blockquote cite="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">
<p>Le pouvoir du Web réside dans son universalité.</p>
</blockquote>
<p>— Tim Berners-Lee, inventeur du <abbr title="World Wide Web">WWW</abbr></p>
<p>Pour enregistrer, appuie sur <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<pre><code><p>Bonjour</p>
<p>Au revoir</p></code></pre><blockquote><p>Le pouvoir du Web réside dans son universalité.</p></blockquote>
<p>— Tim Berners-Lee, inventeur du <abbr title="World Wide Web">WWW</abbr></p>
<p>Pour enregistrer, appuie sur <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<pre><p>Bonjour</p>
<p>Au revoir</p></pre>D'autres balises HTML utiles présentées rapidement : un bon tour d'horizon pour compléter ce chapitre.
Avec <meta charset="UTF-8">, tu peux taper é, à, ç, € ou même des emojis directement. Les entités comme é sont des vestiges d'avant l'UTF-8 : tu les rencontreras dans du vieux code, mais tu n'en as plus besoin.
En typographie française, on met une espace avant : ; ? !. Pour éviter que le ? se retrouve seul en début de ligne, utilise : Ça va ?. C'est un détail, mais il montre un intégrateur soigneux.