La balise HTML <embed>
La balise <embed> intègre du contenu externe. Description, attributs et exemples pratiques.
La balise HTML <embed> intègre du contenu externe à l'emplacement où elle apparaît dans le document. À l'origine, elle servait de conteneur pour les plug-ins du navigateur (Flash, applets Java, QuickTime, RealPlayer), des programmes distincts auxquels le navigateur déléguait le traitement du contenu.
Cette page explique à quoi sert <embed> aujourd'hui, présente un exemple fonctionnel avec un PDF, compare cet élément à <object>, <iframe>, <video> et <audio>, et détaille les attributs ainsi que les notes d'accessibilité à connaître.
Pourquoi les plug-ins ont disparu (et à quoi sert <embed> aujourd'hui)
Les plug-ins de navigateur ont été abandonnés dans l'ensemble du secteur : les plug-ins NPAPI (Java, Silverlight) ont été supprimés de Chrome et de Firefox, et Adobe Flash a atteint sa fin de vie le 31 décembre 2020. Ils représentaient une faille de sécurité et de stabilité, et chaque fonctionnalité offerte par les plug-ins dispose désormais d'un équivalent natif en HTML.
Ainsi, <embed> est rarement le bon choix dans du nouveau code. Le seul cas où on le rencontre encore est l'intégration d'un PDF via le lecteur PDF intégré du navigateur, que la plupart des navigateurs modernes exposent comme un gestionnaire de contenu plutôt que comme un plug-in. Pour tout le reste, préférez un élément dédié :
| Vous souhaitez intégrer… | Utilisez plutôt |
|---|---|
| Un fichier vidéo | <video> |
| Un fichier audio | <audio> |
| Une autre page web / un site externe | <iframe> |
| N'importe quelle ressource avec un contenu de remplacement | <object> |
<embed> vs <object> vs <iframe>
Ces trois éléments insèrent du contenu externe, mais ils diffèrent en termes de flexibilité et de prise en charge du contenu de remplacement :
| Fonctionnalité | <embed> | <object> | <iframe> |
|---|---|---|---|
| Balise fermante | Non (élément vide) | Oui | Oui |
| Contenu de remplacement | Non — rien ne s'affiche si le type échoue | Oui — le contenu entre les balises s'affiche en cas d'échec | Oui — le contenu entre les balises s'affiche si les iframes sont désactivées |
| Paramètres | Via les attributs uniquement | Via des éléments <param> enfants | Via l'URL src / les attributs |
| Meilleur usage aujourd'hui | Lecteur PDF intégré | Ressource nécessitant un contenu de remplacement élégant | Intégration de pages HTML |
En HTML5, <embed> est un élément standard, donc les documents qui l'utilisent sont validés correctement. Pour une compatibilité plus large, vous pouvez placer un élément <embed> à l'intérieur d'un élément <object> afin que <embed> serve de contenu de remplacement.
Utilisez la propriété CSS object-position pour corriger le positionnement de l'objet intégré dans le cadre de l'élément.
Syntaxe
La balise <embed> est vide, ce qui signifie que la balise fermante n'est pas requise. Cependant, en XHTML, la balise <embed> doit être fermée (<embed/>).
Exemple de la balise HTML <embed> pour placer un logo :
Exemple de la balise HTML <embed>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
</body>
</html>Exemple de la balise HTML <embed> pour intégrer un PDF :
Il s'agit de l'usage moderne le plus courant de <embed>. Le navigateur affiche le PDF avec son lecteur intégré. Définissez toujours l'attribut type sur application/pdf pour que le navigateur sache comment traiter le fichier, et donnez des dimensions à l'élément embed pour qu'il réserve de l'espace sur la page.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed
type="application/pdf"
src="/files/sample.pdf"
width="600"
height="800"
title="Sample PDF document" />
</body>
</html>Exemple de la balise HTML <embed> pour intégrer un fichier audio :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="audio/mpeg"
src="/build/audios/audio.mp3"
width="200"
height="100" />
</body>
</html>Exemple de la balise HTML <embed> pour intégrer une vidéo :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="video/mp4"
src="/build/videos/arcnet.io(7-sec).mp4"
width="300"
height="200"
title="Arcnet.io video" />
</body>
</html>Pourquoi l'attribut type est important
L'attribut type contient le type MIME de la ressource intégrée — l'identifiant standard que le navigateur utilise pour choisir le bon gestionnaire de contenu. Le définir permet au navigateur de décider comment afficher le contenu (et d'éviter de télécharger quelque chose qu'il ne peut pas traiter). Valeurs courantes :
application/pdf— un document PDFvideo/mp4— une vidéo MP4audio/mpeg— un fichier audio MP3image/svg+xml— une image SVG
Si type est omis, le navigateur tente de deviner le type à partir de l'extension du fichier ou de l'en-tête Content-Type du serveur, ce qui est moins fiable.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| height | pixels | Définit la hauteur du contenu intégré. |
| src | URL | Le chemin vers la ressource à intégrer. |
| type | type MIME | Le type MIME du contenu intégré (par exemple application/pdf ou video/mp4), utilisé pour choisir le bon gestionnaire de contenu. |
| width | pixels | Définit la largeur du contenu intégré. |
La balise <embed> prend en charge les attributs globaux et les attributs d'événement.
Attributs obsolètes et non standard
Évitez-les — ils ne font pas partie du standard HTML5 et sont ignorés par les navigateurs modernes :
| Attribut | Statut | Alternative |
|---|---|---|
| align | Obsolète | CSS float et object-position |
| vspace, hspace | Obsolète | CSS margin |
| pluginspage | Non standard | Rien — les plug-ins n'existent plus, il n'y a donc rien à télécharger ni à installer |
Accessibilité
<embed> n'a pas de nom accessible inhérent, de sorte que les lecteurs d'écran peuvent l'annoncer simplement comme « contenu intégré » sans autre détail. Ajoutez toujours un attribut title décrivant la ressource :
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Comme <embed> est un élément vide, il ne peut pas contenir de contenu de remplacement à la manière de <object> et <iframe>. Si la ressource ne parvient pas à se charger, rien ne s'affiche à la place. Lorsqu'un contenu de remplacement élégant est important — par exemple un lien de téléchargement pour les utilisateurs dont le navigateur ne peut pas afficher le PDF — encapsulez la ressource dans un élément <object>, qui vous permet de placer du HTML de remplacement entre ses balises.