Les éléments `embed` et `object`

<embed> intègre du contenu externe à l’aide d’un module d’extension du navigateur ou du gestionnaire intégré au navigateur. Son attribut type indique le type MIME ; src correspond à l’adresse URL de la ressource. Il s’agit d’un élément sans contenu, qui n’accepte ni enfants ni contenu de remplacement.

<object> est plus flexible que embed. Son attribut data pointe vers la ressource ; type indique le type MIME. Ses enfants servent de contenu de remplacement si l’objet ne peut pas être chargé — notamment un objet imbriqué ou un texte descriptif.

Imbriquez un contenu de remplacement : <object data="file.pdf" type="application/pdf"><a href="file.pdf">Download PDF</a></object>. Si le navigateur ne peut pas afficher le PDF directement, il affiche plutôt le lien de téléchargement. Le contenu de remplacement est le principal avantage de object par rapport à embed.

Intégrez des fichiers PDF avec object ou embed : <object data="doc.pdf" type="application/pdf" width="100%" height="600">. La prise en charge varie selon les navigateurs — Chrome et Firefox affichent les PDF nativement ; d’autres navigateurs peuvent afficher une invite de téléchargement. Fournissez un lien de secours.

Pour intégrer des documents HTML : préférez iframe, conçu à cette fin et doté d’un modèle de sécurité clair. Pour les modules d’extension multimédias : embed (Flash obsolète, rendu SVG). Pour les documents nécessitant un contenu de remplacement : object. Dans le développement moderne, la plupart des cas d’utilisation de modules d’extension sont pris en charge par les éléments HTML5 natifs (video, audio, canvas).

embed et object peuvent tous deux exécuter du contenu de module d’extension (historiquement Flash), ce qui constitue une importante surface d’attaque. Les navigateurs modernes ont supprimé la prise en charge des modules d’extension. Seul du contenu de confiance doit être intégré. Le contenu embed ou object provenant d’une autre origine ne peut pas être contrôlé par script comme du contenu de même origine.

Intégrer un SVG avec object : <object data="image.svg" type="image/svg+xml" width="200" height="200">. Contrairement à une balise img, le SVG situé dans object peut exécuter ses propres scripts et réagir à une feuille de style externe s’il est de même origine. Utilisez cette approche pour les SVG interactifs lorsque le SVG intégré directement n’est pas pratique.

Transmettez des paramètres à un module d’extension object à l’aide d’éléments <param name="autoplay" value="true"> imbriqués. Il s’agissait de la méthode standard pour configurer les objets Flash. L’utilisation moderne est rare, car la prise en charge des modules d’extension a été supprimée des navigateurs.

object peut fonctionner avec usemap pour créer des cartes d’image — des zones cliquables sur une image intégrée. Définissez les zones dans un élément <map> contenant des éléments enfants <area>. Un SVG moderne avec href sur les éléments constitue une meilleure approche pour les zones d’image interactives.

Ajoutez l’attribut title à embed et object pour permettre leur identification par les lecteurs d’écran. object accepte aria-label. Aucun de ces éléments ne fournit les riches sémantiques d’accessibilité offertes par les éléments HTML5 natifs. Pour le contenu multimédia, les éléments video et audio natifs avec sous-titres sont toujours à privilégier.

embed et object sont en grande partie des éléments hérités. Leur principal cas d’utilisation, Flash, a disparu. Leurs utilisations légitimes actuelles sont les documents PDF intégrés avec contenu de remplacement, l’intégration de SVG interactifs et le contenu ancien qui ne peut pas être modernisé. Les nouveaux projets devraient privilégier les éléments HTML5 natifs pour tous les besoins multimédias.

Quel est le principal avantage de l’utilisation de object plutôt que de embed pour du contenu intégré ?

embed et object sont des éléments hérités permettant d’intégrer du contenu qui n’est pas au format HTML. object est à privilégier lorsqu’un contenu de remplacement est nécessaire. Tous deux acceptent la spécification d’un type MIME et la transmission de paramètres. Les équivalents modernes (video, audio, canvas, SVG intégré directement) sont à privilégier dans les nouveaux projets. L’intégration de PDF avec object reste un cas d’utilisation courant, avec iframe comme solution de remplacement.