Gli elementi embed e object

<embed> incorpora contenuti esterni utilizzando un plugin del browser o il gestore integrato nel browser. Il suo attributo type specifica il tipo MIME; src è l'URL della risorsa. È un elemento void senza elementi figli né contenuti di fallback.

<object> è più flessibile di embed. Il suo attributo data indica la risorsa; type specifica il tipo MIME. Gli elementi figli fungono da contenuto di fallback se l'oggetto non può essere caricato, incluso un object annidato o del testo descrittivo.

Annidi il contenuto di fallback: <object data="file.pdf" type="application/pdf"><a href="file.pdf">Download PDF</a></object>. Se il browser non riesce a visualizzare il PDF inline, mostra invece il link per il download. Il contenuto di fallback è il principale vantaggio di object rispetto a embed.

Incorpori i file PDF con object o embed: <object data="doc.pdf" type="application/pdf" width="100%" height="600">. Il supporto dei browser varia: Chrome e Firefox visualizzano i PDF in modo nativo, mentre altri browser potrebbero mostrare una richiesta di download. Fornisca un link di fallback.

Per incorporare documenti HTML, preferisca iframe, progettato proprio per questo scopo e dotato di un modello di sicurezza chiaro. Per i plugin multimediali, utilizzi embed (Flash legacy, rendering SVG). Per i documenti con contenuto di fallback, utilizzi object. Nello sviluppo moderno, la maggior parte dei casi d'uso dei plugin è gestita dagli elementi HTML5 nativi (video, audio, canvas).

Sia embed sia object possono eseguire contenuti di plugin (storicamente Flash), che rappresentano una superficie di attacco significativa. I browser moderni hanno rimosso il supporto ai plugin. Dovrebbe incorporare solo contenuti attendibili. I contenuti embed/object cross-origin non possono essere gestiti tramite script come i contenuti same-origin.

Per incorporare SVG con object: <object data="image.svg" type="image/svg+xml" width="200" height="200">. A differenza di un elemento img, l'SVG all'interno di object può eseguire i propri script e reagire a CSS esterni (se same-origin). Lo utilizzi per SVG interattivi quando l'SVG inline non è pratico.

Passi parametri a un plugin object utilizzando elementi <param name="autoplay" value="true"> annidati. Questo era il metodo standard per configurare gli oggetti Flash. Oggi il suo utilizzo è raro, poiché il supporto ai plugin è stato rimosso dai browser.

object può funzionare con usemap per creare mappe immagine, ovvero aree cliccabili su un'immagine incorporata. Definisca le aree in un elemento <map> con elementi <area> come figli. L'SVG moderno con href sugli elementi è un approccio migliore per le aree immagine interattive.

Aggiunga l'attributo title sia a embed sia a object per consentirne l'identificazione da parte degli screen reader. object accetta aria-label. Nessuno dei due elementi offre la ricca semantica di accessibilità degli elementi HTML5 nativi. Per i contenuti multimediali, sono sempre preferibili gli elementi video e audio nativi con sottotitoli.

embed e object sono in gran parte elementi legacy. Il loro principale caso d'uso, Flash, è scomparso. Gli utilizzi legittimi attuali includono documenti PDF inline (con fallback), l'incorporamento di SVG interattivi e contenuti legacy che non possono essere modernizzati. I nuovi progetti dovrebbero preferire gli elementi HTML5 nativi per tutte le esigenze multimediali.

Qual è il principale vantaggio dell'utilizzo di object rispetto a embed per i contenuti incorporati?

embed e object sono elementi legacy per incorporare contenuti non HTML. object è preferibile quando è necessario un contenuto di fallback. Entrambi accettano specifiche del tipo MIME e consentono di passare parametri. Per i nuovi progetti sono preferibili gli equivalenti moderni (video, audio, canvas, SVG inline). L'incorporamento di PDF tramite object rimane un caso d'uso comune, con iframe come alternativa.