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 — elles 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. »
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.
<h1> devrait-il y avoir par page ?<strong> et <b> ?<h3> est plus grand que <h1> ?