Intégrez du son, de la vidéo et des illustrations légendées sans aucun plugin.
Ouvrir cette leçon dans KodokonLe HTML lit nativement l'audio et la vidéo : plus besoin de lecteur externe. Cas d'usage réels : un épisode de podcast sur un blog, une démonstration produit sur une page d'accueil, un tutoriel intégré à une documentation. Voyons comment faire proprement.
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="Français" default>
Votre navigateur ne lit pas les vidéos HTML5.
</video>Trois points professionnels à retenir. Les source sont testées dans l'ordre : le navigateur lit la première qu'il sait décoder. L'attribut poster affiche une image d'attente avant la lecture. Enfin, track ajoute des sous-titres au format WebVTT : indispensable pour l'accessibilité et très apprécié en lecture silencieuse.
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Télécharger l'épisode</a>
</audio>Pour illustrer un contenu, figure associe un média à sa légende via figcaption. Et pas seulement des images : un graphique, un extrait de code ou une citation sont aussi de bons candidats. La légende est liée programmatiquement à la figure, ce que ne permet pas un simple paragraphe sous l'image.
<figure>
<img src="chart-sales.png"
alt="Ventes en hausse de 12 % au T2 2026">
<figcaption>
Évolution des ventes, deuxième trimestre 2026.
</figcaption>
</figure>