Bonnes pratiques

Hiérarchie, indentation, sémantique, accessibilité.

Ton HTML, c’est ton plan de référence. S’il est propre, tout le reste suit : CSS plus simple, JS plus clair, et toi plus serein. Voici le kit “ça respire, ça se lit, ça se maintient”.

11.1Structure claire et sémantique

Utilise les bonnes balises : <header>, <main>, <section>, <article>, <footer>…
Évite le “div-div” inutile quand une balise sémantique existe.

<!-- ✅ Mieux -->
<main>
  <section>
    <h2>Présentation</h2>
    <p>Texte clair.</p>
  </section>
</main>

<!-- ❌ Moins bien -->
<div class="main">
  <div class="section">
    <h2>Présentation</h2>
    <p>Texte clair.</p>
  </div>
</div>

11.2Hiérarchie des titres

Un seul <h1> par page (le sujet principal).
Descends dans l’ordre : <h2> puis <h3>, etc. (pas de saut de niveau pour “faire joli”).

<h1>Le projet</h1>
<h2>Objectifs</h2>
<h3>Priorités</h3>

11.3Indentation & lisibilité

Indente selon la structure (enfant = +1 niveau). Tu te remercieras plus tard.
Coupe les longues lignes, aère les sections.
Commente avec parcimonie pour expliquer les zones “pas évidentes”.

<!-- Zone : témoignages -->
<section id="temoignages">
  <article>
    <h3>Avis de Marie</h3>
    <p>Super clair !</p>
  </article>
</section>

11.4Accessibilité (a11y) en réflexe

Toujours un alt pertinent pour les images (ou vide si décoratif).
Boutons et liens explicites (évite “Cliquez ici”).
Contrastes suffisants, navigation clavier possible (côté CSS/JS ensuite).

<img src="plan-coupe.webp" alt="Plan en coupe de l'étage 2">
<a href="/contact">Nous contacter</a>

11.5Contenu cohérent

Noms de fichiers clairs : hero-accueil.webp, logo.svg.
Attributs utiles, pas de styles inline partout (garde ça pour le CSS).
Pas d’imbrications illogiques (ex. pas de <p> dans un <ul>).