Il tag HTML <embed>
Il tag <embed> incorpora contenuti non gestiti nativamente dal browser. Descrizione, attributi ed esempi.
Il tag HTML <embed> incorpora contenuti esterni nel punto in cui appare nel documento. In origine era un contenitore per i plug-in del browser (Flash, applet Java, QuickTime, RealPlayer), cioè programmi separati a cui il browser delegava la gestione del contenuto.
Questa pagina illustra l'utilizzo attuale di <embed>, un esempio funzionante con PDF, il confronto con <object>, <iframe>, <video> e <audio>, gli attributi e le note sull'accessibilità.
Perché i plug-in sono scomparsi (e a cosa serve ora <embed>)
I plug-in del browser sono stati ritirati a livello industriale: i plug-in NPAPI (Java, Silverlight) sono stati rimossi da Chrome e Firefox, e Adobe Flash ha raggiunto la fine del ciclo di vita il 31 dicembre 2020. Rappresentavano un rischio per la sicurezza e la stabilità, e ogni funzionalità offerta dai plug-in dispone ora di un equivalente nativo in HTML.
Quindi <embed> è raramente la scelta giusta nel codice moderno. L'unico caso in cui lo si incontra ancora è l'incorporamento di un PDF tramite il visualizzatore PDF integrato del browser, che la maggior parte dei browser moderni espone come gestore di contenuto anziché come plug-in. Per tutto il resto, conviene usare un elemento dedicato:
| Si vuole incorporare… | Usare invece |
|---|---|
| Un file video | <video> |
| Un file audio | <audio> |
| Un'altra pagina web / sito esterno | <iframe> |
| Qualsiasi risorsa con un fallback | <object> |
<embed> vs <object> vs <iframe>
Tutti e tre inseriscono contenuti esterni, ma differiscono per flessibilità e supporto al fallback:
| Caratteristica | <embed> | <object> | <iframe> |
|---|---|---|---|
| Tag di chiusura | No (elemento vuoto) | Sì | Sì |
| Contenuto di fallback | No — non viene visualizzato nulla se il tipo non è supportato | Sì — il contenuto tra i tag viene mostrato in caso di errore | Sì — il contenuto tra i tag viene mostrato se gli iframe sono disabilitati |
| Parametri | Solo tramite attributi | Tramite elementi <param> figli | Tramite URL src / attributi |
| Utilizzo consigliato oggi | Visualizzatore PDF integrato | Risorse che richiedono un fallback elegante | Incorporamento di pagine HTML |
In HTML5, <embed> è un elemento standard, quindi i documenti che lo utilizzano vengono validati correttamente. Per una compatibilità più ampia è possibile inserire un <embed> all'interno di un <object>, in modo che <embed> funga da fallback.
Utilizza la proprietà CSS object-position per correggere il posizionamento dell'oggetto incorporato all'interno del riquadro dell'elemento.
Sintassi
Il tag <embed> è vuoto, il che significa che il tag di chiusura non è obbligatorio. In XHTML invece il tag <embed> deve essere chiuso (<embed/>).
Esempio del tag HTML <embed> per inserire un logo:
Esempio del tag 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>Esempio del tag HTML <embed> per incorporare un PDF:
Questo è l'utilizzo moderno più comune di <embed>. Il browser visualizza il PDF con il proprio visualizzatore integrato. Imposta sempre type su application/pdf in modo che il browser sappia come gestire il file, e assegna le dimensioni all'elemento embed affinché riservi lo spazio nella pagina.
<!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>Esempio del tag HTML <embed> per inserire un 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>Esempio del tag HTML <embed> per inserire un video:
<!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>Perché l'attributo type è importante
L'attributo type contiene il tipo MIME della risorsa incorporata — l'identificatore standard che il browser utilizza per scegliere il gestore di contenuto appropriato. Impostarlo consente al browser di decidere come visualizzare il contenuto (e di evitare di scaricare qualcosa che non è in grado di gestire). Valori comuni:
application/pdf— un documento PDFvideo/mp4— un video MP4audio/mpeg— un file audio MP3image/svg+xml— un'immagine SVG
Se type viene omesso, il browser ricorre all'estensione del file o all'intestazione Content-Type del server per determinare il tipo, il che è meno affidabile.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| height | pixel | Definisce l'altezza del contenuto incorporato. |
| src | URL | Il percorso della risorsa da incorporare. |
| type | Tipo MIME | Il tipo MIME del contenuto incorporato (ad esempio application/pdf o video/mp4), usato per scegliere il gestore di contenuto appropriato. |
| width | pixel | Definisce la larghezza del contenuto incorporato. |
Il tag <embed> supporta gli attributi globali e gli attributi evento.
Attributi obsoleti e non standard
Evita questi attributi — non fanno parte dello standard HTML5 e vengono ignorati dai browser moderni:
| Attributo | Stato | Cosa usare invece |
|---|---|---|
| align | Obsoleto | CSS float e object-position |
| vspace, hspace | Obsoleto | CSS margin |
| pluginspage | Non standard | Nulla — i plug-in non esistono più, quindi non c'è nulla da scaricare o installare |
Accessibilità
<embed> non ha un nome accessibile intrinseco, quindi gli screen reader potrebbero annunciarlo semplicemente come "contenuto incorporato" senza ulteriori dettagli. Aggiungi sempre un attributo title che descriva la risorsa:
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Poiché <embed> è un elemento vuoto, non può contenere contenuto di fallback come invece possono fare <object> e <iframe>. Se la risorsa non si carica, non c'è nulla da mostrare al suo posto. Quando un fallback elegante è importante — ad esempio un link per il download per gli utenti il cui browser non riesce a visualizzare il PDF — racchiudi la risorsa in un elemento <object>, che permette di inserire HTML di fallback tra i suoi tag.