La hiérarchie des titres : h1 à h6
HTML propose 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important). Pensez-y comme le sommaire d'un livre :
<h1>: le titre du livre (un seul par page)<h2>: les chapitres<h3>: les sous-sections d'un chapitre<h4>à<h6>: pour les détails (rarement utilisés)
Règle d'or : ne sautez pas de niveau. Après un <h2>, utilisez un <h3>, pas un <h5>. Google utilise cette hiérarchie pour comprendre votre page. Un bon plan de titres = meilleur référencement.
Paragraphes, sauts de ligne et séparateurs
Trois balises pour organiser votre texte :
<p>: un paragraphe. Le navigateur ajoute automatiquement un espace avant et après.<br>: un saut de ligne (pas de balise fermante). Utile pour une adresse ou un poème, pas pour espacer des paragraphes.<hr>: une ligne horizontale de séparation (pas de balise fermante non plus). Idéal pour séparer des sections.
Gras, italique et citations
Pour mettre en valeur du texte, HTML a des balises sémantiques, qui donnent du sens en plus du style :
<strong>: texte important (affiché en gras). Google comprend que ce mot compte.<em>: texte avec emphase (affiché en italique). Comme quand vous insistez à l'oral.<blockquote>: une citation. Le navigateur l'indente automatiquement pour la distinguer du reste.
Attention : évitez <b> et <i>. Ils font visuellement la même chose mais n'ont aucune valeur sémantique. Préférez toujours <strong> et <em>.
Heading hierarchy: h1 to h6
HTML offers 6 heading levels, from <h1> (most important) to <h6> (least important). Think of it like a book's table of contents:
<h1>— the book title (one per page)<h2>— chapters<h3>— subsections within a chapter<h4>to<h6>— for details (rarely used)
Golden rule: don't skip levels. After an <h2>, use <h3>, not <h5>. Google uses this hierarchy to understand your page. Good heading structure = better SEO.
Paragraphs, line breaks and separators
Three tags to organize your text:
<p>— a paragraph. The browser automatically adds space before and after.<br>— a line break (no closing tag). Useful for addresses or poems, not for spacing paragraphs.<hr>— a horizontal separator line (no closing tag either). Great for separating sections.
Bold, italic and quotes
To emphasize text, HTML has semantic tags — they add meaning beyond just style:
<strong>— important text (displayed bold). Google understands this word matters.<em>— text with emphasis (displayed italic). Like when you stress a word in speech.<blockquote>— a quotation. The browser automatically indents it to set it apart.
Tip: avoid <b> and <i>. They look the same but have no semantic value. Always prefer <strong> and <em>.
🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
Copiez ce prompt dans Claude ou ChatGPT :
Transforme ce texte en HTML bien structuré avec des titres h1, h2, des paragraphes et du texte en gras pour les mots importants : « Le café est la boisson la plus populaire au monde. Il existe deux grandes familles : l'arabica, doux et aromatisé, et le robusta, plus fort et plus amer. La torréfaction transforme le grain vert en grain brun. Plus elle est longue, plus le goût est intense. »
💬 Ré-explique sans regarder
Sans relire la leçon : pourquoi préférer <strong> et <em> plutôt que <b> et <i>, alors qu'à l'écran le rendu est identique ?
<strong> et <em> sont sémantiques, ils portent du sens (contenu important, mot accentué) ; <b> et <i> ne sont que du style visuel. Ce sens est lu par Google (référencement) et surtout par les lecteurs d'écran, qui peuvent insister à voix haute sur un <strong> mais ignorent un <b>. Même rendu pour l'œil, mais pas pour la machine.L'IA a utilisé <h1> pour tous les titres. Rétablissez une hiérarchie correcte : un seul <h1> pour le titre principal, des <h2> pour les sections.
⚖️ Juge le code de l'IA
Tu as demandé à l'IA de structurer un article. Voici sa réponse. Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.
<h1>Le café</h1>
<p>Une boisson appréciée partout.</p>
<h3>Les variétés</h3>
<p>L'arabica est <b>doux</b>, le robusta plus <i>amer</i>.</p><h1> vient un <h3> au lieu d'un <h2>, ce qui casse le plan que Google et les lecteurs d'écran suivent. Ensuite <b> et <i> sont purement visuels : ici "doux" et "amer" portent du sens, donc <strong> et <em> sont les bons choix. Correction : remplacer <h3> par <h2> et les <b>/<i> par <strong>/<em>.🧠 Rappel libre
Sans remonter dans la leçon : combien de <h1> par page, quelle est la règle d'or sur les niveaux de titres, et que renvoie visuellement un <blockquote> ?
<h1> par page (le sujet principal). Règle d'or : ne pas sauter de niveau, après un <h2> on met un <h3>, jamais un <h5> ; cette hiérarchie sert le référencement et l'accessibilité. Un <blockquote> est une citation que le navigateur indente automatiquement pour la distinguer du reste du texte.<h1> devrait-il y avoir par page ?<strong> et <b> ?<h3> est plus grand que <h1> ?Vos titres et paragraphes structurent le texte, mais une page web vit aussi de connexions et d'images. On voit ensuite comment créer des liens entre les pages et afficher des images, le cœur même du mot hypertexte.
Leçon 4 : Liens et images →