Vous voulez intégrer une fiche technique au format PDF directement dans une page, mais certains visiteurs utilisent un navigateur ancien, une extension qui bloque les contenus intégrés, ou simplement une connexion qui échoue au mauvais moment. Plutôt que de laisser un espace vide et incompréhensible, vous voulez qu'un message clair apparaisse à la place, du type "téléchargez le PDF ici".
La balise <object> a justement été conçue pour ce cas : elle intègre une ressource externe, et tout contenu placé entre sa balise ouvrante et sa balise fermante ne s'affiche que si cette ressource ne parvient pas à se charger.
Définition
<object> intègre une ressource externe, un PDF, une image, ou même un autre document HTML complet, désignée par son attribut data. Contrairement à une balise vide, elle s'écrit avec une balise ouvrante et une balise fermante, et cette paire délimite un espace pour du contenu de secours : tout ce que vous placez à l'intérieur reste invisible tant que la ressource se charge normalement, et n'apparaît que si elle échoue.
Historiquement, <object> servait aussi à intégrer des applets Java ou des contrôles ActiveX, des technologies aujourd'hui disparues. Son usage s'est recentré sur l'intégration de documents, en particulier des PDF, avec un vrai filet de sécurité pour vos visiteurs.
Syntaxe et attributs
L'attribut data remplace le src que l'on trouve sur d'autres balises d'intégration : c'est lui qui pointe vers la ressource externe. L'attribut type précise le format attendu, ce qui aide le navigateur à choisir le bon moteur de rendu sans attendre le début du téléchargement.
| Attribut | Rôle |
|---|---|
data | Adresse de la ressource externe à intégrer |
type | Type MIME du contenu, par exemple application/pdf |
width, height | Dimensions réservées à l'affichage |
Exemple concret
Voici une fiche technique intégrée en PDF, avec un lien de téléchargement affiché uniquement si le navigateur ne parvient pas à l'afficher directement.
<object
data="fiche-technique.pdf"
type="application/pdf"
width="600"
height="400"
>
Votre navigateur ne peut pas afficher ce document.
<a href="fiche-technique.pdf">Téléchargez le PDF</a>.
</object>Si le PDF se charge normalement, ce texte de secours n'apparaît jamais : il reste prêt à s'afficher, silencieusement, pour le cas où quelque chose se passerait mal.
Différence avec embed et un cadre intégré
Face à <embed>, la différence tient entièrement à ce contenu de secours : <embed> est un élément vide qui ne peut rien afficher d'autre que la ressource elle-même, tandis que <object> vous laisse écrire un message, un lien, ou même une image de remplacement.
Face à un cadre intégré comme <iframe>, la différence est d'une autre nature. Un <iframe> ouvre un véritable contexte de navigation séparé à l'intérieur de votre page, capable d'afficher un site web complet et interactif, avec sa propre navigation. <object> reste pensé pour une ressource ponctuelle, un document ou une image, avec une isolation bien plus légère.
<embed> | <object> | <iframe> | |
|---|---|---|---|
| Contenu de repli | Aucun | Oui, entre les balises | Oui, entre les balises |
| Ressource typique | Plugin, PDF simple | PDF, image, document HTML | Une page web complète et interactive |
| Isolation de la page intégrée | Faible | Faible | Forte, contexte de navigation séparé |
Bonnes pratiques et accessibilité
Le contenu de secours n'est utile que s'il est vraiment utile : une phrase générique comme "impossible d'afficher ce contenu" n'aide personne. Préférez toujours un message qui explique ce que contient la ressource et qui propose une alternative concrète, un lien de téléchargement, un résumé du document, ou une description de l'image manquante. Ce contenu de secours devient alors une véritable fonctionnalité d'accessibilité, pas seulement une case technique à cocher.
Beaucoup de sites copient un exemple d'<object> en laissant le contenu de secours vide ou réduit à une phrase inutile, ce qui annule tout l'intérêt de préférer cette balise à <embed>. Notez aussi que le support de <object> pour de simples images reste moins fiable d'un navigateur à l'autre que celui d'une image classique : pour afficher une photo ou une illustration, une balise dédiée aux images reste le choix le plus sûr.
Questions fréquentes
object s'affiche-t-il toujours ?Non, seulement si la ressource principale ne parvient pas à se charger. Quand tout fonctionne normalement, ce contenu reste complètement invisible et n'apparaît jamais en même temps que la ressource, contrairement à ce que l'on pourrait imaginer en lisant le code source.
object pour afficher une image, comme avec une balise image classique ?Techniquement oui, via les attributs data et type, mais le comportement reste moins cohérent d'un navigateur à l'autre qu'avec une balise dédiée aux images, qui propose déjà un attribut équivalent pour un texte de remplacement. Réservez plutôt <object> aux documents, et gardez une balise image classique pour les images.
embed si les deux peuvent charger un PDF ?Seul <object> vous laisse écrire un contenu de secours entièrement maîtrisé par vous. <embed>, étant un élément vide, ne peut rien contenir : si le chargement échoue, vos visiteurs se retrouvent face à un espace vide ou un comportement par défaut du navigateur, là où <object> peut afficher un message utile ou un lien de téléchargement à la place.