HTML object Tag

Das <object>-Tag bettet eine externe Ressource in ein HTML-Dokument ein. Im modernen HTML wird es am häufigsten verwendet, um PDF-Dokumente (type="application/pdf"), SVG-Grafiken (type="image/svg+xml"), Bilder und andere Dokumente einzubetten, die der Browser inline darstellen kann.

Historisch gesehen wurde <object> verwendet, um Browser-Plug-ins wie Java-Applets und Flash zu laden. Diese Technologien sind inzwischen veraltet und werden von Browsern nicht mehr unterstützt, daher sollten Sie <object> nicht dafür verwenden. Heute lässt es sich am besten als Container für ein Dokument oder Bild mit eingebautem Fallback-Inhalt verstehen.

Jeder Inhalt, den Sie zwischen dem öffnenden und schließenden Tag platzieren, ist der Fallback: Der Browser zeigt ihn nur an, wenn die eingebettete Ressource nicht geladen oder gerendert werden kann (zum Beispiel, wenn kein PDF-Viewer verfügbar ist). Dies macht <object> zu einer eleganten Möglichkeit, Ressourcen einzubetten, die manche Benutzer möglicherweise nicht anzeigen können.

Sie sollten mindestens eines der Attribute data oder type definieren. data gibt die URL der Ressource an; type teilt dem Browser den MIME-Typ mit, damit er den richtigen Handler auswählen kann. Für gewöhnliche Rasterbilder ist das <img>-Tag einfacher und wird in der Regel bevorzugt.

Syntax

Das <object>-Tag kommt in Paaren vor. Fallback-Inhalt wird zwischen dem öffnenden (<object>) und schließenden (</object>) Tag geschrieben. Er wird innerhalb des <body> platziert.

<object data="resource-url" type="mime/type" width="..." height="...">
  Fallback content shown when the resource cannot be displayed.
</object>

Ein PDF einbetten

Richten Sie data auf eine .pdf-Datei und setzen Sie type="application/pdf". Der Fallback-Link ermöglicht es Benutzern, die Datei herunterzuladen, wenn die eingebettete Ansicht nicht unterstützt wird (häufig bei mobilen Browsern).

<!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>

Ein SVG einbetten

Verwenden Sie type="image/svg+xml", um eine eigenständige SVG-Datei einzubetten. Im Gegensatz zu einem <img> behält ein SVG, das über <object> geladen wird, seinen eigenen DOM und kann seine internen Skripte und Stile ausführen.

<!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>

Ein Video einbetten

<object> kann auch auf eine Mediendatei verweisen. Beachten Sie, dass für Audio und Video die dedizierten Elemente <video> und <audio> die moderne, empfohlene Wahl sind.

<!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>

Probier es selbst »

`<object>` vs. `<embed>` vs. `<iframe>`

Diese drei Elemente binden alle externen Inhalt in eine Seite ein, unterscheiden sich jedoch in wichtigen Punkten:

Element	Schließendes Tag?	Fallback-Inhalt?	Am besten für
`<object>`	Paar (`</object>`)	Ja — Inhalt zwischen den Tags	Einbetten eines PDF, SVG oder anderen Dokuments mit elegantem Fallback
`<embed>`	Void (kein schließendes Tag)	Nein	Schnelles Einbetten ohne Fallback
`<iframe>`	Paar (`</iframe>`)	Eingeschränkt	Einbetten einer vollständigen HTML-Seite (Karten, Videos, Widgets)

Kurz gesagt: Wählen Sie <iframe>, um ein vollständiges HTML-Dokument einzubetten, <object>, wenn Sie einen Fallback für eine Nicht-HTML-Ressource benötigen, und <embed> für ein minimales Einbetten ohne Fallback.

Parameter mit `<param>` übergeben

Das <param>-Tag, das innerhalb von <object> platziert wird, übergibt benannte Parameter an die eingebettete Ressource. Es ist ein veralteter Mechanismus, der hauptsächlich zur Konfiguration von Plug-ins verwendet wurde; die meisten modernen Dokument- und Bildeinbettungen benötigen ihn nicht.

<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>

Barrierefreiheit

Geben Sie <object> einen zugänglichen Namen, damit Screenreader ihn ankündigen können. Fügen Sie ein title-Attribut (oder aria-label) hinzu, das die eingebettete Ressource beschreibt:

<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
  <a href="report.pdf">Download the 2025 annual report</a>
</object>

Stellen Sie immer sinnvollen Fallback-Inhalt zwischen den Tags bereit. Für Benutzer, deren Browser den eingebetteten Typ nicht darstellen kann, ist der Fallback (z. B. ein Download-Link oder ein statisches Bild) das, was sie tatsächlich sehen, daher muss er für sich allein stehen.

Das Attribut `usemap`

Das Attribut usemap verknüpft das object mit einer clientseitigen Image-Map, indem es eine Hash-Name-Referenz auf ein <map>-Element verwendet (zum Beispiel usemap="#shapes"). Die <area>-Elemente der Map definieren dann anklickbare Bereiche über der eingebetteten Ressource.

Attribute

Attribut	Wert	Beschreibung
align	top bottom middle left right	Gibt die Ausrichtung des Inhalts innerhalb des Elements relativ zu umgebenden Elementen an. Wird in HTML5 nicht unterstützt.
archive	URL	Definiert eine leerzeichengetrennte Liste von URLs zu Archiven, die für das object relevante Ressourcen enthalten. Wird in HTML5 nicht unterstützt.
border	pixels	Legt die Breite des Rahmens um das Element fest. Wird in HTML5 nicht unterstützt.
classid	URL	Legt die URL der Implementierung des object fest. Kann zusammen mit oder anstelle des data-Attributs verwendet werden. Wird in HTML5 nicht unterstützt.
codebase	URL	Definiert den Pfad, der zur Auflösung relativer URIs verwendet wird, die durch classid, data oder archive angegeben werden. Standardmäßig die Basis-URI des aktuellen Dokuments. Wird in HTML5 nicht unterstützt.
codetype	media_type	Legt den Medientyp des Codes fest, auf den das classid-Attribut verweist. Wird in HTML5 nicht unterstützt.
data	URL	Legt die URL der Ressource fest, die vom object verwendet wird. Geben Sie mindestens eines von `data` oder `type` an.
declare	declare	Gibt an, dass das object nur deklariert, nicht instanziiert werden soll. Wird in HTML5 nicht unterstützt.
form	form_id	Gibt ein oder mehrere Formulare an, zu denen das Element gehört.
height	pixels	Gibt die Höhe des object an.
hspace	pixels	Gibt den Leerraum auf der linken und rechten Seite des object an. Wird in HTML5 nicht unterstützt.
name	name	Gibt einen Namen für das object an.
standby	text	Gibt einen Text an, der angezeigt wird, während das object geladen wird. Wird in HTML5 nicht unterstützt.
tabindex	number	Legt die Position des Elements in der Tab-Navigationsreihenfolge für das aktuelle Dokument fest.
type	media_type	Gibt den Medientyp (MIME-Typ) der Ressource im data-Attribut an. Geben Sie mindestens eines von `data` oder `type` an.
usemap	#mapname	Gibt den Namen einer clientseitigen Image-Map an, die mit dem object verwendet werden soll (eine Hash-Name-Referenz auf das `<map>`-Element).
vspace	pixels	Legt den Leerraum oben und unten am object fest. Wird in HTML5 nicht unterstützt.
width	pixels	Legt die Breite des object fest.

Das <object>-Tag unterstützt auch die Globalen Attribute und die Ereignis-Attribute.

Hinweis: Attribute wie align, border, hspace und vspace sind veraltet. Verwenden Sie CSS für Layout und Styling in der modernen Entwicklung.

Übung

Was ist der Zweck des Inhalts, der zwischen dem öffnenden und schließenden object-Tag platziert wird?

Es ist Fallback-Inhalt, der angezeigt wird, wenn die eingebettete Ressource nicht geladen oder dargestellt werden kannEr wird immer über der eingebetteten Ressource angezeigtEr legt den Titel fest, der im Browser-Tab angezeigt wirdEr wird von jedem Browser ignoriert