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>.
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. »
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'oeil, 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.
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>.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> ?Your headings and paragraphs structure the text, but a web page also lives on connections and images. Next we'll see how to create links between pages and display images, the very heart of the word hypertext.
Lesson 4: Links and images →