Les médias et les multimédias
Cet article a été rédigé en 2013, à une période de transition où HTML5 commençait tout juste à s’imposer. Il a été conservé ici comme document d’archive. Certaines technologies évoquées ne sont plus d’actualité, mais ce texte permet de comprendre le contexte dans lequel les nouvelles balises multimédias ont émergé.
Afin d’améliorer l’expérience utilisateur et de permettre aux navigateurs de lire directement divers médias, HTML5 a introduit plusieurs balises telles que <video>, <audio>, <svg> et <canvas>. Du côté des images, la balise <img> s’est enrichie grâce à <figure>, <picture> ainsi qu’aux attributs srcset et sizes destinés à mieux adapter les visuels aux différents périphériques et aux variations de mise en page.
Pour les contenus non pris en charge nativement (pdf, xls, etc.), les balises <embed> et <object> sont restées utilisables. Les services externes comme YouTube ou Dailymotion continuent d’être intégrés via <iframe>, qui ouvre une fenêtre vers un environnement extérieur.
Cet article présente les bases de ces éléments tels qu’ils étaient utilisés à l’époque où HTML5 se déployait progressivement.
Audio / Vidéo
<!-- Vidéo -->
<video controls>
<source src="video.mp4" />
<source src="video.webm" />
<source src="video.ogv" />
</video>
<!-- Audio -->
<audio controls>
<source src="audio.ogg" />
<source src="audio.mp3" />
</audio>Aujourd’hui, les navigateurs modernes assurent nativement la lecture audio et vidéo, rendant obsolètes les anciens formats SWF ou FLV autrefois utilisés pour la diffusion en ligne. Les balises <audio> et <video> permettent une intégration directe, standardisée et sans recours à des plugins externes.
Le code ci-dessus reprend l’approche telle qu’elle était présentée à l’époque de l’arrivée de HTML5. Pour approfondir l’usage de ces balises ou revoir les solutions de repli qui existaient alors, vous pouvez consulter les articles dédiés : L’audio / vidéo en HTML5 et Fallback et alternative vidéo.
Gestion des images
Avant d’aller plus loin dans la gestion HTML des images, vous pouvez consulter l’article L’image numérique qui présente les formats et leurs usages. Ce chapitre, rédigé en 2013, reflète la transition vers des images plus adaptées aux écrans variés et aux interfaces responsive. Il est conservé ici à titre documentaire.
Depuis l’origine de HTML, la balise <img> permet d’insérer une image à partir de son attribut src. Les formats exploitables sont nombreux, du JPEG au WebP, avec une compatibilité variable selon les navigateurs de l’époque. Pour les besoins historiques, vous pouvez retrouver le tableau des formats dans l’article mentionné plus haut.
L’attribut srcset
À une époque où les écrans présentaient des résolutions, densités et diagonales très hétérogènes, il devenait nécessaire de fournir plusieurs versions d’une même image. L’attribut srcset a été introduit pour permettre au navigateur de choisir la ressource la plus adaptée en fonction de l’appareil et de son contexte.
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">Gestion des images
Avant d’aller plus loin dans la gestion HTML des images, vous pouvez consulter l’article L’image numérique qui présente les formats et leurs usages. Ce chapitre, rédigé en 2013, reflète la transition vers des images plus adaptées aux écrans variés et aux interfaces responsive. Il est conservé ici à titre documentaire.
Depuis l’origine de HTML, la balise <img> permet d’insérer une image à partir de son attribut src. Les formats exploitables sont nombreux, du JPEG au WebP, avec une compatibilité variable selon les navigateurs de l’époque. Pour les besoins historiques, vous pouvez retrouver le tableau des formats dans l’article mentionné plus haut.
L’attribut srcset
À une époque où les écrans présentaient des résolutions, densités et diagonales très hétérogènes, il devenait nécessaire de fournir plusieurs versions d’une même image. L’attribut srcset a été introduit pour permettre au navigateur de choisir la ressource la plus adaptée en fonction de l’appareil et de son contexte.
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">Ce mécanisme répondait principalement aux premiers écrans haute densité. Les approches modernes ont depuis évolué, mais cet extrait témoigne de la manière dont les images adaptatives étaient initialement envisagées.
L’attribut sizes
L’apparition des pages responsive a amené une dimension supplémentaire : la taille réelle occupée par l’image dans la mise en page. L’attribut sizes permettait d’indiquer au navigateur l’espace prévu pour l’image, afin qu’il puisse effectuer un choix cohérent parmi les ressources déclarées dans srcset.
Les balises <picture> et <figure>
Introduites à la même période, <picture> et <figure> servaient des objectifs distincts. La balise <picture> prolongeait <img> en permettant de sélectionner différentes sources selon des conditions, tandis que <figure> contextualisait visuellement ou éditorialement une image en la reliant à une légende ou à un contenu associé.
Ces éléments ont constitué les fondations de l’imagerie moderne sur le web, avant l’adoption généralisée de techniques plus poussées que nous aborderons dans l’article de mise à jour.
Imagerie bitmap ou vectorielle
À l’époque où cet article a été rédigé, les balises <canvas> et <svg> représentaient deux approches distinctes de l’imagerie dynamique sur le web. Leur utilisation reposait davantage sur des langages spécialisés que sur HTML lui‑même : JavaScript permettait de dessiner et d’animer en bitmap via <canvas>, tandis que <svg> proposait une grammaire XML pour créer des formes vectorielles, interactives ou statiques.
Ce chapitre était initialement accompagné d’exemples détaillés, retirés par la suite pour des raisons de droits. Nous conservons toutefois l’esprit du texte d’origine, afin de témoigner des possibilités qui s’ouvraient alors aux développeurs et aux créateurs d’interfaces.
Pour se faire une idée de la diversité des usages, vous pouvez consulter ces deux démonstrations en ligne, toujours accessibles : une animation interactive en <canvas>, montrant comment JavaScript pilote un rendu bitmap en temps réel et une démonstration en <svg>, illustrant la finesse du vectoriel et ses possibilités d’interactivité.
Canvas
<canvas> fonctionne comme une surface vierge sur laquelle JavaScript dessine image par image. À l’époque, cette technologie ouvrait la voie à des jeux simples, des visualisations, des effets graphiques ou des traitements d’image côté client. Son potentiel reposait entièrement sur la logique programmée par le développeur.
SVG
<svg> adopte une philosophie différente : chaque forme est un élément du DOM, manipulable, mise en forme via CSS, et accessible. Le vectoriel permettait d’obtenir un rendu propre, indépendant de la résolution, idéal pour les interfaces, les schémas, les cartes ou les animations fines.
Ces techniques ont ensuite évolué en profondeur et feront l’objet d’un article moderne dédié, offrant une lecture plus complète et alignée sur les standards actuels.
Et les autres éléments…
Au moment de la rédaction de cet article en 2013, l’intégration de contenus externes couvrait un spectre très large. Certaines animations reposaient encore sur le format SWF, des documents bureautiques comme les fichiers PPT ou XLS nécessitaient souvent un plugin tiers, et les PDF restaient majoritairement affichés via un lecteur embarqué. Pour les flux provenant de services externes comme YouTube ou Dailymotion, la balise <iframe> s’imposait déjà comme la méthode la plus simple pour ouvrir une fenêtre sur un environnement extérieur.
HTML5 avait toutefois amorcé une transition importante en offrant des alternatives natives telles que <audio>, <video>, <canvas> ou <svg>. Lorsqu’un contenu exigeait encore un plugin, les balises <embed> et <object> demeuraient les solutions usuelles.
Historiquement, <object> était la balise standard, mais son interprétation restait inégale selon les navigateurs. À l’inverse, <embed> fonctionnait partout mais n’était pas standardisé, ce qui entraînait des montages complexes pour assurer la compatibilité.
Du point de vue du W3C, <object> désignait un contenu extérieur, qu’il s’agisse d’une animation, d’un document ou d’un média riche. <embed>, plus limité, servait principalement à insérer des contenus nécessitant un plugin. Son fonctionnement direct et prévisible en faisait un choix fréquent pour intégrer des fichiers comme des PDF, PPT, XLS ou d’autres formats propriétaires.
<embed src="document.pdf" type="application/pdf" />
<object data="document.pdf" type="application/pdf" />Conclusion
Cet article, rédigé en 2013 et aujourd’hui révisé, a été conservé comme archive pour témoigner de la transition vers HTML5 et des pratiques qui accompagnaient l’arrivée des nouvelles balises multimédias. Les technologies mentionnées ont évolué depuis, certaines ayant disparu, d’autres s’étant largement enrichies.
Une mise à jour complète consacrée aux images modernes, incluant srcset, sizes et la balise <picture>, est désormais en préparation. Elle proposera une lecture actuelle et approfondie des mécanismes qui permettent d’adapter finement les visuels aux usages contemporains du web.
