La balise HTML <object>
La balise HTML <object> intègre une ressource externe comme un PDF, SVG ou image, avec contenu de secours affiché si la ressource ne peut être affichée.
La balise <object> intègre une ressource externe dans un document HTML. En HTML moderne, elle est le plus souvent utilisée pour intégrer des documents PDF (type="application/pdf"), des graphiques SVG (type="image/svg+xml"), des images et d'autres documents que le navigateur peut afficher en ligne.
Historiquement, <object> était utilisée pour charger des plug-ins de navigateur tels que les applets Java et Flash. Ces technologies sont désormais obsolètes et ne sont plus prises en charge par les navigateurs, donc n'utilisez pas <object> pour elles. Aujourd'hui, elle est mieux comprise comme un conteneur pour un document ou une image, avec un contenu de secours intégré.
Tout contenu placé entre les balises ouvrante et fermante constitue le contenu de secours : le navigateur ne l'affiche que lorsque la ressource intégrée ne peut pas être chargée ou rendue (par exemple, lorsqu'un lecteur PDF n'est pas disponible). Cela fait de <object> un moyen élégant d'intégrer des ressources que certains utilisateurs pourraient ne pas pouvoir visualiser.
Vous devez définir au moins un des attributs data ou type. data donne l'URL de la ressource ; type indique au navigateur son type MIME afin qu'il puisse choisir le bon gestionnaire. Pour les images matricielles ordinaires, la balise <img> est plus simple et généralement préférée.
Syntaxe
La balise <object> est utilisée par paires. Le contenu de secours est écrit entre les balises ouvrante (<object>) et fermante (</object>). Elle est placée à l'intérieur de <body>.
<object data="resource-url" type="mime/type" width="..." height="...">
Fallback content shown when the resource cannot be displayed.
</object>Intégrer un PDF
Pointez data vers un fichier .pdf et définissez type="application/pdf". Le lien de secours permet aux utilisateurs de télécharger le fichier lorsque l'affichage en ligne n'est pas pris en charge (courant sur les navigateurs mobiles).
<!DOCTYPE html>
<html>
<head>
<title>Embed a PDF</title>
</head>
<body>
<object
data="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf"
type="application/pdf"
width="600"
height="400"
title="Sample PDF document">
<p>
Your browser can't display this PDF.
<a href="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf">Download it instead</a>.
</p>
</object>
</body>
</html>Intégrer un SVG
Utilisez type="image/svg+xml" pour intégrer un fichier SVG autonome. Contrairement à <img>, un SVG chargé via <object> conserve son propre DOM et peut exécuter ses scripts et styles internes.
<!DOCTYPE html>
<html>
<head>
<title>Embed an SVG</title>
</head>
<body>
<object
data="https://api.w3docs.com/uploads/media/default/0001/01/diagram.svg"
type="image/svg+xml"
width="300"
height="200"
title="Architecture diagram">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/diagram.png" alt="Architecture diagram">
</object>
</body>
</html>Intégrer une vidéo
<object> peut également pointer vers un fichier multimédia. Notez que pour l'audio et la vidéo, les éléments dédiés <video> et <audio> sont le choix moderne et recommandé.
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p>Embedded video with fallback content:</p>
<object width="320" height="240" data="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4" type="video/mp4">
<p>Your browser does not support the object tag. <a href="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4">Download the video</a> instead.</p>
</object>
</body>
</html><object> vs <embed> vs <iframe>
Ces trois éléments intègrent tous du contenu externe dans une page, mais ils diffèrent de manière importante :
| Élément | Balise fermante ? | Contenu de secours ? | Idéal pour |
|---|---|---|---|
<object> | Par paires (</object>) | Oui — contenu entre les balises | Intégrer un PDF, SVG ou autre document avec un repli élégant |
<embed> | Void (sans balise fermante) | Non | Intégration rapide sans besoin de contenu de secours |
<iframe> | Par paires (</iframe>) | Limité | Intégrer une page HTML complète (cartes, vidéos, widgets) |
En résumé : choisissez <iframe> pour intégrer un document HTML complet, <object> lorsque vous souhaitez un contenu de secours pour une ressource non-HTML, et <embed> pour une intégration minimale sans contenu de secours.
Passer des paramètres avec <param>
La balise <param>, placée à l'intérieur de <object>, transmet des paramètres nommés à la ressource intégrée. Il s'agit d'un mécanisme hérité principalement utilisé pour configurer des plug-ins ; la plupart des intégrations modernes de documents et d'images n'en ont pas besoin.
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="quality" value="high">
<p>This content requires a plug-in that is no longer available.</p>
</object>Accessibilité
Donnez à <object> un nom accessible afin que les lecteurs d'écran puissent l'annoncer. Ajoutez un attribut title (ou aria-label) qui décrit la ressource intégrée :
<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
<a href="report.pdf">Download the 2025 annual report</a>
</object>Fournissez toujours un contenu de secours significatif entre les balises. Pour les utilisateurs dont le navigateur ne peut pas afficher le type intégré, le contenu de secours (comme un lien de téléchargement ou une image statique) est ce qu'ils voient réellement, il doit donc être autonome.
L'attribut usemap
L'attribut usemap associe l'objet à une image map côté client, en utilisant une référence par nom de hachage vers un élément <map> (par exemple, usemap="#shapes"). Les éléments <area> de la map définissent alors les zones cliquables sur la ressource intégrée.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | top bottom middle left right | Spécifie l'alignement du contenu à l'intérieur de l'élément par rapport aux éléments environnants. Non pris en charge en HTML5. |
| archive | URL | Définit une liste d'URL séparées par des espaces vers des archives contenant des ressources pertinentes pour l'objet. Non pris en charge en HTML5. |
| border | pixels | Définit la largeur de la bordure autour de l'élément. Non pris en charge en HTML5. |
| classid | URL | Définit l'URL de l'implémentation de l'objet. Il peut être utilisé avec ou à la place de l'attribut data. Non pris en charge en HTML5. |
| codebase | URL | Définit le chemin utilisé pour résoudre les URI relatifs spécifiés par classid, data ou archive. Par défaut, l'URI de base du document actuel. Non pris en charge en HTML5. |
| codetype | media_type | Définit le type de média du code référencé par l'attribut classid. Non pris en charge en HTML5. |
| data | URL | Définit l'URL de la ressource qui sera utilisée par l'objet. Fournissez au moins un des attributs data ou type. |
| declare | declare | Spécifie que l'objet doit uniquement être déclaré, pas instancié. Non pris en charge en HTML5. |
| form | form_id | Spécifie un ou plusieurs formulaires auxquels l'élément appartient. |
| height | pixels | Spécifie la hauteur de l'objet. |
| hspace | pixels | Spécifie l'espace blanc à gauche et à droite de l'objet. Non pris en charge en HTML5. |
| name | name | Spécifie un nom pour l'objet. |
| standby | text | Spécifie un texte à afficher pendant le chargement de l'objet. Non pris en charge en HTML5. |
| tabindex | number | Définit la position de l'élément dans l'ordre de navigation par tabulation du document actuel. |
| type | media_type | Spécifie le type de média (type MIME) de la ressource dans l'attribut data. Fournissez au moins un des attributs data ou type. |
| usemap | #mapname | Spécifie le nom d'une image map côté client à utiliser avec l'objet (une référence par nom de hachage vers l'élément <map>). |
| vspace | pixels | Définit l'espace blanc en haut et en bas de l'objet. Non pris en charge en HTML5. |
| width | pixels | Définit la largeur de l'objet. |
La balise <object> prend également en charge les attributs globaux et les attributs d'événement.
Remarque : Les attributs tels que align, border, hspace et vspace sont obsolètes. Utilisez CSS pour la mise en page et le style dans le développement moderne.