Un service tiers vous fournit parfois un petit bout de code à coller sur votre page pour afficher un contenu qu'il héberge lui-même : un lecteur de PDF avec ses propres contrôles, ou historiquement un module géré par un plugin du navigateur, comme Flash ou Java. Il vous faut alors une balise capable de dire "affiche ici ce que ce plugin ou ce visualiseur sait faire", sans que vous ayez à recréer vous-même l'interface.
C'est le rôle de <embed> : elle intègre une ressource externe, en général confiée à un plugin ou à un visualiseur intégré au navigateur, en une seule balise sans contenu ni fermeture.
Définition
<embed> est une balise qui intègre un contenu externe généralement pris en charge par un plugin de navigateur ou par un moteur de rendu spécifique au type de fichier. Historiquement, elle servait surtout à afficher des animations Flash ou des applets Java ; aujourd'hui, on la retrouve plutôt pour des PDF ou certains formats multimédias que le navigateur sait ouvrir nativement.
C'est un élément vide : il ne prend pas de contenu entre une balise ouvrante et une balise fermante, il s'écrit en une seule fois, avec ses attributs, et ne possède donc aucun moyen intégré d'afficher un message de remplacement si la ressource ne se charge pas.
Syntaxe et attributs
Trois attributs suffisent la plupart du temps : src pour l'adresse de la ressource, type pour préciser son format, et width/height pour réserver l'espace qu'elle occupera à l'écran.
| Attribut | Rôle |
|---|---|
src | Adresse de la ressource externe à charger |
type | Type MIME du contenu, par exemple application/pdf |
width, height | Dimensions réservées à l'affichage |
Exemple concret
Voici comment intégrer un aperçu de PDF directement dans une page, avec ses dimensions fixées à l'avance.
<embed src="brochure.pdf" type="application/pdf" width="600" height="400" />Remarquez l'absence de balise fermante : toute la définition tient dans cette seule ligne, ce qui est à la fois la simplicité et la limite de <embed>.
Différence avec object
La différence essentielle tient justement à cette absence de contenu. <object> s'écrit avec une balise ouvrante et une balise fermante, et tout ce qui se trouve entre les deux devient un contenu de secours, affiché uniquement si la ressource principale ne peut pas être chargée. <embed>, étant un élément vide, ne peut rien proposer de tel : si le plugin manque, si le format n'est pas reconnu, ou si la ressource échoue à charger, vos visiteurs se retrouvent devant un espace vide ou un message générique imposé par le navigateur, sans aucun message que vous auriez pu écrire vous-même.
| Caractéristique | <embed> | <object> |
|---|---|---|
| Contenu de repli | Aucun, élément vide | Oui, entre les balises ouvrante et fermante |
| Fermeture | Pas de balise fermante | Balise ouvrante et fermante |
| Usage courant | PDF simples, widgets tiers spécifiques | PDF, images, documents HTML imbriqués |
Bonnes pratiques
Avant de recourir à <embed>, demandez-vous si un contenu de secours a de l'importance pour vos visiteurs : un document essentiel à la lecture de la page mérite presque toujours <object>, qui vous laisse écrire un message utile, ou au minimum un lien de téléchargement direct. Réservez <embed> aux cas où le fournisseur du contenu externe l'exige explicitement dans son code d'intégration, ou lorsqu'une balise plus spécifique, comme celle d'une image ou d'une vidéo, ne convient tout simplement pas au format concerné.
Comme <embed> ne propose aucun texte alternatif ni aucun contenu de repli, un visiteur qui utilise un lecteur d'écran, un navigateur bloquant le plugin nécessaire, ou une connexion qui échoue à charger la ressource ne reçoit littéralement rien à la place : pas de message, pas d'explication, juste un espace vide ou un comportement par défaut du navigateur. C'est le piège central de cette balise, à garder en tête avant de l'utiliser pour un contenu réellement important.
Questions fréquentes
embed et sa fermeture ?Non, c'est impossible : <embed> est un élément vide, il n'a pas de balise fermante et ne peut donc contenir aucun texte, aucune image, aucun lien. Si un contenu de secours vous importe, il faut passer par <object>, qui a justement été conçue pour cet usage.
Embed sert-elle encore à quelque chose aujourd'hui, alors que Flash a disparu ?Oui, mais plus rarement et pour des cas différents de son usage historique. On la retrouve surtout pour afficher un aperçu de PDF avec le lecteur intégré du navigateur, ou pour intégrer un widget fourni par un service tiers dont le code d'intégration impose précisément cette balise. La plupart des autres besoins passent aujourd'hui par des balises dédiées, plus modernes et plus accessibles.
embed et une simple image pour afficher un PDF ?Une image ne peut afficher que des formats d'image classiques, comme un JPEG ou un PNG : elle ne sait pas ouvrir un document PDF. <embed> peut charger un PDF et laisser le visualiseur intégré du navigateur le restituer avec ses propres contrôles, comme le zoom ou la navigation entre les pages, ce qu'une image seule ne proposera jamais.