Médias HTML

Les image maps rendaient cliquables des zones d’une seule image. Les médias sur le web sont plus larges : images fixes, son, images animées, et parfois des pages imbriquées ou des lecteurs hébergés. HTML fournit des balises dédiées pour que les navigateurs affichent ou lisent ces ressources avec des contrôles et des points d’accessibilité. Cette session est votre carte avant que Video, Audio, YouTube et Plug-ins n’entrent dans le détail.

Ce que « médias » signifie ici

Dans le langage courant du cours, médias désigne un contenu qui n’est pas seulement des paragraphes et des titres — photos, icônes, clips vocaux, démos et embeds. Le bon élément aide le navigateur à exposer une UI de lecture native, à télécharger le bon type de ressource, et à donner aux technologies d’assistance un rôle plus clair qu’un <div> mystérieux rempli de scripts.

Réponse directe

• Images → img (et parfois picture pour plusieurs fichiers)
• Son → audio
• Films et clips → video
• Navigation imbriquée (cartes, lecteurs d’autres sites) → souvent iframe
  Préférez l’élément adapté à la tâche. Donnez aux utilisateurs controls sur audio et video, sauf si vous avez un lecteur personnalisé solide et accessible. Quand le média porte une information importante, prévoyez une alternative textuelle, des sous-titres ou une transcription.

Blocs de construction en un coup d’œil

Un tout petit échantillon

Vous connaissez déjà img. Voici comment audio et video se placent à côté sur une première page d’essai — les chemins sont des exemples ; utilisez des fichiers que vous avez vraiment quand vous essayez chez vous.

Lire l’échantillon

• img a toujours besoin de src et d’un alt significatif
• audio et video utilisent src (ou des enfants source imbriqués dans les leçons suivantes) et profitent de controls
• width sur video peut réserver l’espace de mise en page pendant le chargement du fichier
• Des fichiers vides ou de mauvais chemins échouent comme les autres ressources — vérifiez les dossiers tôt

Les contrôles sont une habitude de débutant

L’attribut controls demande au navigateur d’afficher lecture, pause et l’UI associée. Lancer le son automatiquement sans action claire de l’utilisateur est souvent bloqué et généralement agaçant. Commencez avec des contrôles visibles. Les lecteurs personnalisés viendront plus tard si un projet en a vraiment besoin.

Choisir le bon outil

• Podcast ou note vocale → audio
• Enregistrement d’écran ou clip → video
• Photo ou diagramme → img / picture
• Widget carte ou page de lecteur tiers → souvent iframe (avec conscience des performances et de la sécurité)
  Ne forcez pas une vidéo dans une balise image, ni toute une application externe dans un blob de scripts mystérieux, quand un élément natif existe.

Accessibilité et sens

Si le média enseigne quelque chose, prévoyez comment une personne qui ne peut pas l’entendre ou le voir obtient quand même l’idée : alt pour les images informatives, sous-titres pour la vidéo parlée, transcriptions pour l’audio long. Un mouvement décoratif sans information ne doit pas piéger le focus ni démarrer fort tout seul. Les leçons spécialisées suivantes iront plus loin ; ancrez l’habitude maintenant.

Coûts de iframe (aperçu)

iframe intègre un autre contexte de navigation. C’est puissant pour les cartes et les lecteurs hébergés, et cela apporte aussi les scripts, cookies et le poids de mise en page d’une autre page dans la vôtre. Utilisez-le quand l’imbrication est le vrai but — pas comme défaut pour chaque fichier média que vous hébergez vous-même. Les balises natives audio / video / img restent plus simples pour vos propres fichiers.

Comment s’enchaînent les leçons suivantes

Après cette carte : Video et Audio enseignent attributs, sources multiples et habitudes pratiques de fichiers. Plug-ins et YouTube couvrent des motifs plus anciens ou hébergés. Iframe approfondit l’intégration. Traitez cette page comme l’annuaire ; traitez ces pages comme les ateliers.

Pratiquer dans votre éditeur

1. D’après le tableau, nommez quel élément vous choisiriez pour un fichier podcast (audio).
2. Ajoutez un img à une page d’essai avec un alt clair (vous le savez déjà).
3. Si vous avez un petit mp3 ou mp4, ajoutez audio ou video avec controls.
4. Écrivez une ligne dans vos notes : « sous-titres/transcriptions pour le contenu parlé. »
5. Parcourez les titres des prochaines sessions média pour que la feuille de route soit familière.

Erreurs faciles

• Lancer le son automatiquement sans contrôles ni geste clair de l’utilisateur
• Intégrer d’énormes vidéos sans réflexion sur la taille et sans plan d’alternative textuelle
• Utiliser iframe pour chaque fichier alors que audio/video/img natifs suffiraient
• Oublier que les iframes importent les coûts de sécurité et de performance d’une autre page
• Traiter cette vue d’ensemble comme « assez pour toujours » et sauter les leçons spécialisées quand vous publiez vraiment des médias

Résumé

• Les médias HTML couvrent images, audio, vidéo et embeds
• Préférez l’élément adapté à la tâche
• Donnez des contrôles aux utilisateurs et prévoyez des alternatives quand le média porte un sens
• Balises natives pour vos propres fichiers ; iframe quand vous imbriquez vraiment une autre page ou un lecteur hébergé
• Les leçons suivantes spécialisent chaque type — cette page est la carte