Tag HTML <object>
Il tag HTML <object> incorpora una risorsa esterna come PDF, SVG o immagine, con contenuto di fallback mostrato quando non è visualizzabile.
Il tag <object> incorpora una risorsa esterna in un documento HTML. Nel HTML moderno viene utilizzato principalmente per incorporare documenti PDF (type="application/pdf"), grafica SVG (type="image/svg+xml"), immagini e altri documenti che il browser può visualizzare inline.
Storicamente <object> veniva usato per caricare plug-in del browser come applet Java e Flash. Queste tecnologie sono ora obsolete e non più supportate dai browser, quindi non utilizzare <object> per esse. Oggi si intende meglio come un contenitore per un documento o un'immagine, con contenuto di fallback integrato.
Qualsiasi contenuto che inserisci tra i tag di apertura e chiusura è il fallback: il browser lo mostra solo quando la risorsa incorporata non può essere caricata o visualizzata (ad esempio, quando il visualizzatore PDF non è disponibile). Questo rende <object> un modo elegante per incorporare risorse che alcuni utenti potrebbero non essere in grado di visualizzare.
Dovresti definire almeno uno degli attributi data o type. data fornisce l'URL della risorsa; type indica al browser il suo tipo MIME in modo che possa scegliere il gestore corretto. Per le immagini raster ordinarie, il tag <img> è più semplice e solitamente preferito.
Sintassi
Il tag <object> viene usato in coppia. Il contenuto di fallback viene scritto tra i tag di apertura (<object>) e chiusura (</object>). Viene posizionato all'interno del <body>.
<object data="resource-url" type="mime/type" width="..." height="...">
Fallback content shown when the resource cannot be displayed.
</object>Incorporare un PDF
Punta data su un file .pdf e imposta type="application/pdf". Il link di fallback consente agli utenti di scaricare il file quando la visualizzazione inline non è supportata (comune nei browser mobile).
<!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>Incorporare un SVG
Usa type="image/svg+xml" per incorporare un file SVG autonomo. A differenza di <img>, un SVG caricato tramite <object> mantiene il proprio DOM e può eseguire i suoi script e stili interni.
<!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>Incorporare un video
<object> può anche puntare a un file multimediale. Nota che per audio e video gli elementi dedicati <video> e <audio> sono la scelta moderna e consigliata.
<!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>
Questi tre elementi inseriscono tutti contenuto esterno in una pagina, ma differiscono in modi importanti:
| Elemento | Tag di chiusura? | Contenuto di fallback? | Ideale per |
|---|---|---|---|
<object> | In coppia (</object>) | Sì — contenuto tra i tag | Incorporare un PDF, SVG o altro documento con un fallback elegante |
<embed> | Vuoto (nessun tag di chiusura) | No | Incorporamento rapido dove non è necessario un fallback |
<iframe> | In coppia (</iframe>) | Limitato | Incorporare un'altra pagina HTML (mappe, video, widget) |
In sintesi: scegli <iframe> per incorporare un documento HTML completo, <object> quando vuoi un fallback per una risorsa non-HTML, e <embed> per un incorporamento minimale senza fallback.
Passare parametri con <param>
Il tag <param>, posizionato all'interno di <object>, passa parametri con nome alla risorsa incorporata. È un meccanismo legacy usato principalmente per configurare i plug-in; la maggior parte degli incorporamenti moderni di documenti e immagini non ne ha bisogno.
<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à
Dai a <object> un nome accessibile in modo che i lettori di schermo possano annunciarlo. Aggiungi un attributo title (o aria-label) che descriva la risorsa incorporata:
<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
<a href="report.pdf">Download the 2025 annual report</a>
</object>Fornisci sempre contenuto di fallback significativo tra i tag. Per gli utenti il cui browser non riesce a visualizzare il tipo incorporato, il fallback (come un link per il download o un'immagine statica) è ciò che vedono effettivamente, quindi deve essere autonomo.
L'attributo usemap
L'attributo usemap associa l'object a una mappa immagine lato client, usando un riferimento hash-name a un elemento <map> (ad esempio, usemap="#shapes"). Gli elementi <area> della mappa definiscono quindi le regioni cliccabili sulla risorsa incorporata.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | top bottom middle left right | Specifica l'allineamento del contenuto all'interno dell'elemento rispetto agli elementi circostanti. Non supportato in HTML5. |
| archive | URL | Definisce un elenco separato da spazi di URL ad archivi contenenti risorse rilevanti per l'object. Non supportato in HTML5. |
| border | pixels | Imposta la larghezza del bordo attorno all'elemento. Non supportato in HTML5. |
| classid | URL | Imposta l'URL dell'implementazione dell'object. Può essere usato insieme all'attributo data, o al suo posto. Non supportato in HTML5. |
| codebase | URL | Definisce il percorso usato per risolvere gli URI relativi specificati da classid, data o archive. Il valore predefinito è l'URI base del documento corrente. Non supportato in HTML5. |
| codetype | media_type | Imposta il tipo di media del codice riferito dall'attributo classid. Non supportato in HTML5. |
| data | URL | Imposta l'URL della risorsa che sarà usata dall'object. Fornisci almeno uno tra data e type. |
| declare | declare | Specifica che l'object deve essere solo dichiarato, non istanziato. Non supportato in HTML5. |
| form | form_id | Specifica uno o più form a cui appartiene l'elemento. |
| height | pixels | Specifica l'altezza dell'object. |
| hspace | pixels | Specifica lo spazio bianco sui lati sinistro e destro dell'object. Non supportato in HTML5. |
| name | name | Specifica un nome per l'object. |
| standby | text | Specifica un testo da visualizzare durante il caricamento dell'object. Non supportato in HTML5. |
| tabindex | number | Imposta la posizione dell'elemento nell'ordine di navigazione tramite tab per il documento corrente. |
| type | media_type | Specifica il tipo di media (tipo MIME) della risorsa nell'attributo data. Fornisci almeno uno tra data e type. |
| usemap | #mapname | Specifica il nome di una mappa immagine lato client da usare con l'object (un riferimento hash-name all'elemento <map>). |
| vspace | pixels | Imposta lo spazio bianco in cima e in fondo all'object. Non supportato in HTML5. |
| width | pixels | Imposta la larghezza dell'object. |
Il tag <object> supporta anche gli Attributi Globali e gli Attributi Evento.
Nota: Attributi come align, border, hspace e vspace sono obsoleti. Usa CSS per il layout e la stilizzazione nello sviluppo moderno.