5.1<img> : Afficher une image

La balise <img> affiche une image. Deux attributs à ne pas oublier :

• src : le chemin du fichier (local ou URL)
• alt : une description courte (accessibilité, SEO, et quand l’image ne charge pas)

<img src="images/maquette-facade.webp" alt="Maquette de la façade du bâtiment">

5.2Image décorative

Si l’image n’apporte aucune info (juste déco), mets l’attribut alt vide. Oui, vide. C’est volontaire : les lecteurs d’écran passeront leur chemin (comme nous devant une pub non ciblée).

<img src="icons/separateur.svg" alt="">

5.3<video> : Vidéo intégrée

Pour intégrer une vidéo locale, utilise <video>. Quelques options utiles :

• controls : affiche les boutons (play/pause…)
• autoplay, muted, loop : combo souvent utilisé pour une vidéo d’arrière-plan
• toujours prévoir un texte de fallback (au cas où)

<video controls width="480">
  <source src="videos/visite-3d.mp4" type="video/mp4">
  La vidéo ne peut pas être lue sur ce navigateur.
</video>

5.4<audio> : Audio intégré

Même principe que la vidéo, mais pour le son (podcast, ambiance, voix off). On évite l’autoplay avec le son activé personne n’aime les jumpscares audio.

<audio controls>
  <source src="audio/ambiance-chantiers.mp3" type="audio/mpeg">
  Ton navigateur ne supporte pas l'audio HTML5.
</audio>

💡Conseils rapides

• Formats recommandés : WEBP (images), SVG (icônes), MP4 (H.264) (vidéos)
• Ne sers pas une image 2000px pour un affichage 200px (tes utilisateurs ont d’autres choses à télécharger 😅)
• Nomme tes fichiers clairement : banniere-accueil.webp, plan-coupe.svg…