Récapitulatif

HTML sémantique et CSS de composition

Ce mémento renvoie aux notions étudiées précédemment pour préparer une interface alimentée par JavaScript. La balise exprime le rôle ; CSS règle le rendu ; JavaScript gère l’état et les interactions.

Situation	Choix	Support détaillé
Naviguer vers une page	`a` avec un `href` réel	HTML
Déclencher une action	`button` natif	Événements
Nommer un champ	`label` associé par `for` et `id`	Formulaires
Espacer une boîte	`padding`, `margin`, `border-box`	Modèle de boîte
Aligner sur un axe	Parent flex	Flexbox
Partager des colonnes	Parent grid	Grid
Adapter selon la largeur	Media query	Responsive

Une carte responsive

<article>
  <h2>Projet de photographie</h2>
  <p>Une description qui peut occuper plusieurs lignes sans être coupée.</p>
  <a href="#details">Détails du projet</a>
</article>
<p id="details">Exposition réalisée en atelier.</p>
<style>
  article { box-sizing: border-box; max-width: 24rem; padding: 16px; border: 2px solid #1d4ed8; }
  h2 { margin-top: 0; }
  :focus-visible { outline: 3px solid #be123c; outline-offset: 3px; }
</style>

Le contenu décide de la hauteur — aperçu fixe

La largeur est limitée, la hauteur reste automatique et le lien possède une destination. La navigation clavier dispose d’un repère visible. Une height fixe serait fragile lorsque le titre ou la description s’allongent.

Mouvement et accessibilité

Une transition accompagne un changement d’état ; une animation @keyframes définit une séquence. Elles ne doivent pas cacher une information essentielle. Respectez prefers-reduced-motion et conservez des états utilisables sans animation. Les transitions et les animations présentent des démonstrations distinctes.