Die Elemente embed und object

<embed> bettet externe Inhalte mithilfe eines Browser-Plug-ins oder des integrierten Handlers des Browsers ein. Sein type-Attribut gibt den MIME-Typ an; src ist die Ressourcen-URL. Es handelt sich um ein Void-Element ohne untergeordnete Elemente oder Fallback-Inhalte.

<object> ist flexibler als embed. Sein data-Attribut verweist auf die Ressource; type gibt den MIME-Typ an. Untergeordnete Elemente dienen als Fallback-Inhalt, wenn das object nicht geladen werden kann – darunter auch ein verschachteltes object oder beschreibender Text.

Verschachteln Sie einen Fallback: <object data="file.pdf" type="application/pdf"><a href="file.pdf">Download PDF</a></object>. Wenn der Browser das PDF nicht inline darstellen kann, zeigt er stattdessen den Download-Link an. Fallback-Inhalte sind der wichtigste Vorteil von object gegenüber embed.

Betten Sie PDF-Dateien mit object oder embed ein: <object data="doc.pdf" type="application/pdf" width="100%" height="600">. Die Browserunterstützung variiert: Chrome und Firefox stellen PDFs nativ dar, andere Browser zeigen möglicherweise eine Aufforderung zum Herunterladen an. Stellen Sie einen Fallback-Link bereit.

Zum Einbetten von HTML-Dokumenten: bevorzugen Sie iframe, da es für diesen Zweck entwickelt wurde und ein klares Sicherheitsmodell besitzt. Für Medien-Plug-ins: embed (Legacy-Flash, SVG-Darstellung). Für Dokumente mit Fallback: object. In der modernen Entwicklung werden die meisten Anwendungsfälle für Plug-ins durch native HTML5-Elemente (video, audio, canvas) abgedeckt.

Sowohl embed als auch object können Plug-in-Inhalte ausführen, historisch beispielsweise Flash, was eine große Angriffsfläche darstellt. Moderne Browser haben die Plug-in-Unterstützung entfernt. Es sollten nur vertrauenswürdige Inhalte eingebettet werden. Inhalte aus anderen Origins in embed oder object können nicht wie Inhalte desselben Origins per Skript gesteuert werden.

Betten Sie SVG mit object ein: <object data="image.svg" type="image/svg+xml" width="200" height="200">. Anders als ein img-Tag kann SVG innerhalb von object eigene Skripte ausführen und auf externes CSS reagieren, wenn es denselben Origin hat. Verwenden Sie diesen Ansatz für interaktive SVGs, wenn Inline-SVG nicht praktikabel ist.

Übergeben Sie einem object-Plug-in Parameter mithilfe verschachtelter <param name="autoplay" value="true">-Elemente. Dies war die standardmäßige Methode zur Konfiguration von Flash-Objekten. Heute wird sie selten verwendet, da die Browserunterstützung für Plug-ins entfernt wurde.

object kann mit usemap verwendet werden, um Image Maps zu erstellen – anklickbare Bereiche auf einem eingebetteten Bild. Definieren Sie die Bereiche in einem <map>-Element mit untergeordneten <area>-Elementen. Modernes SVG mit href auf den Elementen ist für interaktive Bildbereiche der bessere Ansatz.

Fügen Sie sowohl embed als auch object ein title-Attribut zur Identifikation durch Screenreader hinzu. object akzeptiert aria-label. Keines der beiden Elemente bietet die umfassende Barrierefreiheitssemantik nativer HTML5-Elemente. Für Medieninhalte sind native video- und audio-Elemente mit Untertiteln immer vorzuziehen.

embed und object sind weitgehend Legacy-Elemente. Ihr wichtigster Anwendungsfall, Flash, ist weggefallen. Aktuelle legitime Einsatzbereiche sind Inline-PDF-Dokumente mit Fallback, das Einbetten interaktiver SVGs und Legacy-Inhalte, die nicht modernisiert werden können. Bei neuen Projekten sollten Sie für alle Medienanforderungen native HTML5-Elemente bevorzugen.

Was ist der wichtigste Vorteil von object gegenüber embed für eingebettete Inhalte?

embed und object sind Legacy-Elemente zum Einbetten von Nicht-HTML-Inhalten. object wird bevorzugt, wenn Fallback-Inhalte benötigt werden. Beide akzeptieren MIME-Typ-Angaben und übergeben Parameter. Moderne Entsprechungen (video, audio, canvas, Inline-SVG) sind für neue Projekte vorzuziehen. Das Einbetten von PDFs über object bleibt ein häufiger Anwendungsfall, wobei iframe eine Alternative darstellt.