💡 10 erreurs courantes en HTML et comment les corriger

« La journée n’est pas terminée tant qu’un bug n’est pas résolu. » – Tous les étudiants en HTML, un jour ou l’autre

Écrire du HTML, c’est un peu comme faire de la magie. Tu écris la bonne ligne de code, et le site est parfait. Mais oublie une seule balise fermante… et bam, tout s’écroule ! 😱
Voici donc un guide pour rire, apprendre, et corriger ensemble les erreurs fréquentes en HTML. Prêt(e), chéri(e) ? 👇

---

😱 1. Oublier de fermer les balises

❌ Erreur :

<div>Hello World!

Tu ouvres la balise mais tu oublies de la fermer. C’est comme commencer une conversation et partir au milieu avec un « Bon… laisse tomber. » – chaos assuré.

✅ Correct :

<div>Hello World!</div>

🧠 Pourquoi c’est important ?

• Le navigateur ne sait pas où l’élément se termine, et la mise en page peut se casser.
• Tes yeux et ceux de tes collègues vont saigner. Aïe.

🔧 Astuce Pro :

• Dans VS Code, survole une balise pour voir sa paire correspondante.
• Utilise Shift + Tab pour remonter et trouver les </div> oubliés.
• Perdu ? Appuie sur Ctrl+Shift+M pour voir les erreurs détectées.

---

🤨 2. Mélanger majuscules et minuscules dans les balises

❌ Erreur :

<DIV>Quel est le problème ?</Div>

Le navigateur ne fait pas la différence, mais nos yeux, si !

✅ Correct :

<div>C’est propre et cohérent comme ça.</div>

🧠 Pourquoi c’est important ?

• La cohérence, c’est la clé d’un code propre.
• Les autres développeurs ne t’en voudront pas en relisant ton code.

🔧 Astuce Pro :

• Règle d’or : toutes les balises en minuscules ; les classes en kebab-case (ex. : main-title).
• Utilise régulièrement Format Document pour nettoyer ton code.

---

💔 3. Utiliser <br> pour la mise en page

❌ Erreur :

<p>La mise en page est <br><br><br><br> comme ça.</p>

C’est comme se peindre les ongles avec un feutre au lieu d’un vernis – ça marche mais… c’est moche 😬

✅ Correct :

<p>Ceci est une phrase.</p>
<p>En voici une autre.</p>

Ou en CSS :

p {
  margin-bottom: 20px;
}

🧠 Pourquoi c’est important ?

• <br> est fait pour les sauts de ligne, pas pour les espacements.
• Le contenu appartient au HTML, l’apparence au CSS.

🔧 Astuce Pro :

• Espace = CSS
• Saut de ligne = <br>
• <br><br><br> = ❌

---

🧠 4. Tout écrire en <div> au lieu de balises sémantiques

❌ Erreur :

<div class="title">Bienvenue</div>
<div class="content">On apprend le HTML aujourd’hui</div>
<div class="footer">Au revoir</div>

Tout ne doit pas être un <div>. Même dans une famille, chacun a son rôle : maman, papa, enfant… pas juste « personne ».

✅ Correct :

<header>Bienvenue</header>
<main>On apprend le HTML aujourd’hui</main>
<footer>Au revoir</footer>

🧠 Pourquoi c’est important ?

• Les lecteurs d’écran adorent les balises sémantiques. Accessibilité++.
• Google aussi. SEO te dit merci.

🔧 Astuce Pro :

Pose-toi la question en écrivant : « À quoi sert ce contenu ? »
Si c’est un en-tête → <header>
Du contenu principal → <main>
Un pied de page → <footer>

---

🎯 5. Confondre id et class

❌ Erreur :

<div id="button" id="button">Cliquez ici</div>

Ou utiliser id partout… Un seul cœur, plusieurs amoureux ? 💔

✅ Correct :

<button id="save" class="btn primary">Enregistrer</button>

🧠 Pourquoi c’est important ?

• id est unique, à utiliser une seule fois par page.
• class peut être réutilisé. C’est pour regrouper des éléments.

🔧 Astuce Pro :

• id = Numéro de passeport → Unique
• class = Salle de classe → Beaucoup d’élèves 🎒

---

🧩 6. Oublier l’attribut alt dans les images

❌ Erreur :

<img src="cat.jpg">

C’est comme dire « Regarde ce truc génial ! » et s’en aller. Personne ne saura ce qu’il y avait.

✅ Correct :

<img src="cat.jpg" alt="Un chat mignon endormi sur un coussin">

🧠 Pourquoi c’est important ?

• Accessibilité : les lecteurs d’écran lisent le texte alternatif.
• SEO : Google utilise l’alt pour comprendre l’image.

🔧 Astuce Pro :

Demande-toi : « Si je ne pouvais pas voir cette image, qu’aimerais-je savoir ? »

⛔ 7. Ne pas utiliser <label> dans les formulaires

❌ Erreur :

<input type="text" placeholder="Nom">

Un champ solitaire… ni le navigateur ni l’utilisateur ne savent vraiment quoi en faire.

✅ Correct :

<label for="name">Nom :</label>
<input type="text" id="name" name="name">

🧠 Pourquoi c’est important ?

• Les labels améliorent l’accessibilité et l’utilisabilité.
• Cliquer sur le label active le champ. UX tout doux !

🔧 Astuce Pro :

Assure-toi que l’attribut for du label correspond à l’id de l’input.

---

🔗 8. Oublier target="_blank" sur les liens externes

❌ Erreur :

<a href="https://example.com">Page externe</a>

L’utilisateur clique… et parfois ne revient jamais. Comme un amour non avoué. 💔

✅ Correct :

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Page externe</a>

🧠 Pourquoi c’est important ?

• Les liens externes doivent s’ouvrir dans un nouvel onglet.
• rel="noopener noreferrer" évite certains risques de sécurité.

🔧 Astuce Pro :

Ouvre toujours les liens conduisant hors de ton site dans un nouvel onglet. Bon pour l’expérience utilisateur, et bon pour ton SEO.

---

💣 9. Oublier le Doctype

❌ Erreur :

<html>

Navigateur : « Hmm… comment je suis censé lire ça ? » 😵

✅ Correct :

<!DOCTYPE html>
<html>

🧠 Pourquoi c’est important ?

• Cela indique au navigateur que tu utilises HTML5.
• Sans Doctype, le navigateur peut se mettre en mode “quirks” et tout casser.

🔧 Astuce Pro :

Dans VS Code, tape ! + Tab → ça génère automatiquement un modèle HTML5 complet.

---

📂 10. Se tromper dans les chemins de fichiers

❌ Erreur :

<img src="/images/cat.jpeg">

OK… mais seulement si le fichier est bien dans ce dossier. Sinon : 404, image introuvable. Et le chat est perdu 🐈‍⬛💔

✅ Correct :

<img src="./assets/img/cat.jpeg" alt="Chat endormi">

🧠 Pourquoi c’est important ?

• Le bon chemin de fichier est essentiel : sans ça, images et styles ne s’affichent pas.

🔧 Astuce Pro :

• ./ → même dossier
• / → dossier racine du site
  Connais ta structure de fichiers comme ton propre dressing !

---

🎉 BONUS : Le HTML est simple… mais profond

Chaque balise a un sens, chéri(e).
Un <div>, c’est comme un « salut »… mais un <header>, c’est carrément « Bonjour le monde ! » 😌