Les titres et les paragraphes

Un texte sans structure ne se lit pas. En HTML, on ne choisit pas une taille de police : on annonce ce que chaque morceau est, et le navigateur s'occupe de l'apparence.

🎯 Objectifs

À la fin de ce cours, tu seras capable de :

1. Choisir le bon niveau de titre pour construire le plan d'une page.
2. Découper un texte en paragraphes.
3. Forcer un retour à la ligne au bon endroit.
4. Mettre un mot en valeur et expliquer pourquoi <strong> vaut mieux que <b>.

Six niveaux de titre

Le HTML propose six balises de titre, de <h1> à <h6>. Le h vient de 🇬🇧 heading, en-tête.

<h1>Introduction à la cybersécurité</h1>
<h2>C'est quoi, au juste ?</h2>
<h3>Les trois choses à protéger</h3>

Elles ne servent pas à choisir une taille de texte. Elles dessinent le plan du document, comme les chapitres et les sections d'un livre :

• <h1> : le sujet de la page. Un seul par page.
• <h2> : les grandes parties.
• <h3> : les subdivisions d'un <h2>.

On descend d'un niveau à la fois. Après un <h2> vient un <h3>, jamais un <h5> — même si sa taille te plaît davantage. Pour la taille, il y aura le CSS.

🧠 À retenir : ce plan n'est pas décoratif. Google s'en sert pour comprendre de quoi parle ta page, et un lecteur d'écran l'utilise pour permettre à une personne aveugle de sauter de section en section.

Le paragraphe

<p> — pour 🇬🇧 paragraph — découpe le texte en blocs. Chaque paragraphe s'affiche sur ses propres lignes, avec un peu d'espace au-dessus et en dessous.

<p>Rome, trois jours en mai.</p>
<p>Lisbonne, deux jours en juillet.</p>

Voici le point qui déroute tout le monde au début : le navigateur ignore complètement les retours à la ligne que tu tapes dans ton code. Tu peux appuyer dix fois sur Entrée, écrire ton paragraphe sur douze lignes ou sur une seule : le résultat à l'écran est identique.

<p>Rome,
       trois jours
   en mai.</p>

s'affiche exactement comme :

<p>Rome, trois jours en mai.</p>

Le navigateur remplace toute suite d'espaces et de retours à la ligne par une simple espace. Si tu veux un vrai saut de ligne, il faut le lui demander.

Le retour à la ligne, et les balises orphelines

<br> fait passer à la ligne suivante, à l'intérieur d'un paragraphe.

<p>Rome,<br>trois jours en mai.</p>

Cette balise a une particularité : elle n'encadre rien du tout. Il n'y a pas de contenu à délimiter, donc pas de balise fermante. On l'appelle une balise orpheline (ou auto-fermante).

Les plus courantes :

⚠️ Attention : écrire </br> est une erreur. Cette balise n'a rien à fermer.

N'abuse pas de <br>. Pour séparer deux idées, c'est un nouveau paragraphe qu'il faut, pas un saut de ligne. Le <br> sert aux cas où la coupure fait partie du texte lui-même : une adresse, un vers de poème.

Mettre un mot en valeur

Jusqu'ici, tes balises créaient des blocs : un titre, un paragraphe occupent toute la largeur et poussent la suite plus bas. D'autres balises s'utilisent au milieu d'une phrase, sur quelques mots seulement.

<p>Départ le <b>12 mai</b>, retour le 15.</p>

Quatre balises se ressemblent, deux à deux :

À l'écran, <b> et <strong> donnent le même résultat. La différence est invisible pour toi, mais pas pour tout le monde : un lecteur d'écran change d'intonation sur un <strong>, et l'ignore sur un <b>.

💡 Astuce : dans le doute, préfère <strong> et <em>. Même rendu, plus de sens.

Ce que ça donne

Voici les balises de ce cours réunies dans une page, avec un peu de mise en forme :

Le titre principal, les deux niveaux de sous-titres, les paragraphes et le mot en gras : cinq balises, et le texte est déjà lisible.

🧪 Vérifications

1. Combien de <h1> doit contenir une page ? Pourquoi ?
2. Tu tapes trois retours à la ligne dans ton code, entre deux phrases d'un même paragraphe. Que voit le visiteur ?
3. Quelle est la différence entre couper avec <br> et ouvrir un nouveau <p> ?
4. Pourquoi <strong> est-il préférable à <b> ?

✍️ À retenir

• Les titres <h1> à <h6> dessinent le plan de la page, pas sa mise en forme.
• Un seul <h1> par page, et on descend d'un niveau à la fois.
• Le navigateur ignore les espaces et les retours à la ligne de ton code.
• <br> est une balise orpheline : pas de contenu, donc pas de fermeture.
• <strong> et <em> portent un sens, là où <b> et <i> ne font que décorer.

Suite

Ton texte a un plan. Il lui manque de quoi énumérer : les listes à puces et les listes numérotées.