HTML <embed>-Tag
Der <embed>-Tag bettet externe Inhalte ein. Beschreibung, Attribute und Beispiele zum HTML-embed-Element.
Der HTML-Tag <embed> bettet externe Inhalte an der Stelle ein, an der er im Dokument erscheint. Ursprünglich war er ein Container für Browser-Plug-ins (Flash, Java-Applets, QuickTime, RealPlayer) – separate Programme, an die der Browser den Inhalt weiterleitete.
Diese Seite erklärt, wofür <embed> heute verwendet wird, zeigt ein funktionierendes PDF-Beispiel und vergleicht das Element mit <object>, <iframe>, <video> und <audio> – inklusive Attributen und Hinweisen zur Barrierefreiheit.
Warum Plug-ins nicht mehr existieren (und wofür <embed> heute verwendet wird)
Browser-Plug-ins wurden branchenweit abgeschafft: NPAPI-Plug-ins (Java, Silverlight) wurden aus Chrome und Firefox entfernt, und Adobe Flash erreichte am 31. Dezember 2020 das Ende seiner Lebensdauer. Sie stellten ein Sicherheits- und Stabilitätsrisiko dar, und jede Plug-in-Funktion hat heute einen nativen HTML-Ersatz.
Daher ist <embed> in neuem Code selten die richtige Wahl. Das einzige Szenario, in dem es noch häufig eingesetzt wird, ist das Einbetten eines PDFs über den integrierten PDF-Viewer des Browsers, den die meisten modernen Browser als Content-Handler bereitstellen – nicht als Plug-in. Für alle anderen Zwecke sollte man ein dediziertes Element verwenden:
| Sie möchten einbetten… | Verwenden Sie stattdessen |
|---|---|
| Eine Videodatei | <video> |
| Eine Audiodatei | <audio> |
| Eine andere Webseite / externe Website | <iframe> |
| Eine Ressource mit Fallback-Inhalt | <object> |
<embed> vs. <object> vs. <iframe>
Alle drei binden externe Inhalte ein, unterscheiden sich jedoch in Flexibilität und Fallback-Unterstützung:
| Merkmal | <embed> | <object> | <iframe> |
|---|---|---|---|
| Schließendes Tag | Nein (leeres Element) | Ja | Ja |
| Fallback-Inhalt | Nein – bei fehlgeschlagenem Typ wird nichts angezeigt | Ja – Inhalt zwischen den Tags wird bei Fehler angezeigt | Ja – Inhalt zwischen den Tags wird angezeigt, wenn iframes deaktiviert sind |
| Parameter | Nur über Attribute | Über untergeordnete <param>-Elemente | Über src-URL / Attribute |
| Beste Verwendung heute | Integrierter PDF-Viewer | Ressource mit elegantem Fallback | Einbetten von HTML-Seiten |
In HTML5 ist <embed> ein Standardelement, sodass Dokumente, die es verwenden, korrekt validiert werden. Für breitere Kompatibilität kann man ein <embed> innerhalb eines <object> platzieren, sodass <embed> als Fallback fungiert.
Verwenden Sie die CSS-Eigenschaft object-position, um die Positionierung des eingebetteten Objekts innerhalb des Element-Rahmens anzupassen.
Syntax
Der <embed>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss der <embed>-Tag jedoch geschlossen werden (<embed/>).
Beispiel des HTML-Tags <embed> zum Einbinden eines Logos:
Beispiel des HTML-Tags <embed>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
</body>
</html>Beispiel des HTML-Tags <embed> zum Einbinden eines PDFs:
Dies ist die häufigste moderne Verwendung von <embed>. Der Browser stellt das PDF mit seinem integrierten Viewer dar. Setzen Sie den type-Wert immer auf application/pdf, damit der Browser weiß, wie er die Datei verarbeiten soll, und geben Sie dem Element Abmessungen, damit auf der Seite Platz reserviert wird.
<!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>Beispiel des HTML-Tags <embed> zum Einbinden einer Audiodatei:
<!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>Beispiel des HTML-Tags <embed> zum Einbinden eines Videos:
<!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>Warum das Attribut type wichtig ist
Das Attribut type enthält den MIME-Typ der eingebetteten Ressource – den Standardbezeichner, den der Browser verwendet, um den richtigen Content-Handler auszuwählen. Durch seine Angabe kann der Browser entscheiden, wie er den Inhalt darstellt (und das Herunterladen von Inhalten überspringen, die er nicht verarbeiten kann). Häufige Werte:
application/pdf– ein PDF-Dokumentvideo/mp4– ein MP4-Videoaudio/mpeg– eine MP3-Audiodateiimage/svg+xml– ein SVG-Bild
Wird type weggelassen, versucht der Browser, den Typ anhand der Dateiendung oder des Content-Type-Headers des Servers zu ermitteln, was weniger zuverlässig ist.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| height | Pixel | Legt die Höhe des eingebetteten Inhalts fest. |
| src | URL | Der Pfad zur einzubettenden Ressource. |
| type | MIME-Typ | Der MIME-Typ des eingebetteten Inhalts (z. B. application/pdf oder video/mp4), um den richtigen Content-Handler auszuwählen. |
| width | Pixel | Legt die Breite des eingebetteten Inhalts fest. |
Der <embed>-Tag unterstützt die globalen Attribute und die Event-Attribute.
Veraltete und nicht standardisierte Attribute
Vermeiden Sie diese – sie sind kein Bestandteil des HTML5-Standards und werden von modernen Browsern ignoriert:
| Attribut | Status | Was stattdessen verwenden |
|---|---|---|
| align | Veraltet | CSS float und object-position |
| vspace, hspace | Veraltet | CSS margin |
| pluginspage | Nicht standardisiert | Nichts – Plug-ins existieren nicht mehr, daher gibt es nichts zum Herunterladen oder Installieren |
Barrierefreiheit
<embed> hat keinen inhärenten zugänglichen Namen, sodass Screenreader ihn möglicherweise nur als „eingebetteter Inhalt" ohne weitere Details ankündigen. Fügen Sie immer ein title-Attribut hinzu, das die Ressource beschreibt:
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Da <embed> ein leeres Element ist, kann es keinen Fallback-Inhalt enthalten, wie es bei <object> und <iframe> möglich ist. Wenn die Ressource nicht geladen werden kann, gibt es nichts, das an ihrer Stelle angezeigt wird. Wenn ein eleganter Fallback wichtig ist – zum Beispiel ein Download-Link für Benutzer, deren Browser das PDF nicht anzeigen kann – betten Sie die Ressource in ein <object>-Element ein, das es ermöglicht, Fallback-HTML zwischen seinen Tags zu platzieren.