Comment construire une bonne structure HTML pour des articles de blog?
Excellente question. Une structure HTML propre est essentielle pour le référencement SEO, mais aussi pour l’accessibilité et la lisibilité du site par Google (et les humains). Voici comment on la détermine concrètement :
✅ 1. Utilisation correcte des balises de structure
| Élément | Bonne pratique HTML |
|---|---|
| Titre principal | <h1> unique par page |
| Sous-titres | <h2>, <h3>, etc. utilisés dans l’ordre logique |
| Paragraphes | Utiliser <p> pour les blocs de texte |
| Listes | Utiliser <ul>, <ol> et <li> pour les listes |
| Sections | Utiliser <section>, <article>, <aside>, <nav>, <header>, <footer> quand pertinent |
| Mise en avant | <strong>, <em> pour souligner un mot important, pas du CSS visuel uniquement |
✅ 2. Hiérarchie logique claire (titres)
- Un seul
<h1>par page (le sujet principal) - Ensuite, des
<h2>pour les sections principales - Puis des
<h3>pour les sous-sections, etc.
Mauvais exemple : <h3> directement après un <h1>
Bon exemple : <h1> → <h2> → <h3>
✅ 3. Pas de surcharge inutile ou d’erreurs
- Pas de balises vides (ex :
<h2></h2>) - Pas de texte dans des balises
<div>ou<span>sans sémantique - Pas de répétition de balises
<h1>sur la même page - Pas d’utilisation abusive du
<br>à la place de vrais paragraphes
✅ 4. Balises sémantiques pour le SEO
<title>(dans<head>) : titre SEO affiché dans Google<meta name="description">: pour la meta-description<img alt="description">: attributaltpour toutes les images (important pour SEO + accessibilité)
✅ 5. Liens clairs et utiles
- Utiliser
<a href="/en/.../">pour les liens internes et externes - Éviter les liens non cliquables (ex :
onclick="..."sans balise<a>) - Les liens doivent être descriptifs : pas de “cliquez ici”, mais plutôt “en savoir plus sur le référencement local”
🔍 Comment vérifier ta structure HTML ?
Voici 3 méthodes simples :
- Vue « Inspecter » dans Chrome
- Clic droit → “Inspecter” → onglet “Elements”
- Regarde si tes titres sont bien en
<h1>,<h2>, etc.
- Utiliser un plugin comme Web Developer Toolbar
- Affiche la structure des titres, des balises, des images sans
alt, etc.
- Affiche la structure des titres, des balises, des images sans
- Utiliser un crawler SEO (comme Screaming Frog)
- Analyse les balises
<title>,<h1>, la hiérarchie, les liens cassés, etc.
- Analyse les balises
✅ Résumé d’une structure HTML propre :
| Élément | Doit être |
|---|---|
1 seul <h1> | ✔️ Oui |
Titres hiérarchisés (h2, h3, etc.) | ✔️ Oui |
Paragraphes dans <p> | ✔️ Oui |
Listes dans <ul> ou <ol> | ✔️ Oui |
| Balises sémantiques (header, article, footer, etc.) | ✔️ Recommandé |
Images avec alt | ✔️ Obligatoire pour l’accessibilité |
English 
Français