Attributs globaux

10.1Les attributs les plus utiles

• class : applique un style CSS (comme donner un rôle à plusieurs éléments)
• id : identifiant unique (comme une porte numérotée)
• style : ajoute un style directement dans la balise (à éviter, sauf dépannage rapide)
• data-* : range des infos personnalisées (ex. data-etage="2")
• hidden : cache l’élément (comme une pièce fermée au public)
• tabindex : définit l’ordre de navigation au clavier (comme un chemin de visite)
• contenteditable : rend un élément modifiable directement (comme écrire sur ton plan à la main)

<div id="hall" class="zone-principale">
  <p style="color: red;">Texte temporaire (pas propre mais ça marche)</p>

  <div data-etage="2">Appartement 2B</div>

  <p hidden>Texte caché (comme une pièce secrète)</p>

  <p tabindex="1">Première étape de navigation</p>
  <p tabindex="2">Deuxième étape</p>

  <div contenteditable="true">Écris directement ici</div>
</div>

Astuce

Utilise class pour regrouper plusieurs éléments (comme donner le même uniforme à ton équipe). Réserve id aux cas uniques (un seul chef de chantier, pas dix ).