Elementy embed i object

<embed> osadza zewnętrzną treść za pomocą wtyczki przeglądarki lub wbudowanego mechanizmu obsługi przeglądarki. Jego atrybut type określa typ MIME, a src — adres URL zasobu. Jest to element pusty, bez elementów potomnych i treści zastępczej.

<object> jest bardziej elastyczny niż embed. Jego atrybut data wskazuje zasób, a type określa typ MIME. Elementy potomne służą jako treść zastępcza, jeśli obiektu nie można załadować — może to być zagnieżdżony obiekt lub opisowy tekst.

Proszę zagnieździć treść zastępczą: <object data="file.pdf" type="application/pdf"><a href="file.pdf">Download PDF</a></object>. Jeśli przeglądarka nie może wyświetlić pliku PDF bezpośrednio, pokazuje zamiast niego link pobierania. Treść zastępcza jest główną przewagą object nad embed.

Pliki PDF można osadzać za pomocą object lub embed: <object data="doc.pdf" type="application/pdf" width="100%" height="600">. Obsługa różni się między przeglądarkami — Chrome i Firefox wyświetlają pliki PDF natywnie, a inne przeglądarki mogą wyświetlić monit pobierania. Proszę zapewnić link zastępczy.

Do osadzania dokumentów HTML proszę preferować iframe (zaprojektowany do tego celu, z przejrzystym modelem bezpieczeństwa). W przypadku wtyczek multimedialnych można użyć embed (starszy Flash, renderowanie SVG). W przypadku dokumentów wymagających treści zastępczej należy użyć object. We współczesnym programowaniu większość zastosowań wtyczek obsługują natywne elementy HTML5 (video, audio, canvas).

Zarówno embed, jak i object mogą wykonywać treści wtyczek (historycznie na przykład Flash), co stanowi istotną powierzchnię ataku. Nowoczesne przeglądarki usunęły obsługę wtyczek. Należy osadzać wyłącznie zaufane treści. Treści cross-origin osadzone przez embed lub object nie mogą być obsługiwane skryptami tak jak treści z tego samego originu.

SVG można osadzić za pomocą object: <object data="image.svg" type="image/svg+xml" width="200" height="200">. W przeciwieństwie do elementu img kod SVG wewnątrz object może wykonywać własne skrypty i reagować na zewnętrzny CSS (jeśli pochodzi z tego samego originu). Warto użyć tego rozwiązania w przypadku interaktywnego SVG, gdy osadzenie SVG bezpośrednio w dokumencie jest niepraktyczne.

Parametry do wtyczki object przekazuje się za pomocą zagnieżdżonych elementów <param name="autoplay" value="true">. Był to standardowy sposób konfigurowania obiektów Flash. Obecnie używa się go rzadko, ponieważ przeglądarki usunęły obsługę wtyczek.

object może współpracować z usemap w celu tworzenia map obrazów — klikalnych obszarów na osadzonym obrazie. Obszary należy zdefiniować w elemencie <map> za pomocą elementów potomnych <area>. Nowoczesne SVG z href na elementach jest lepszym rozwiązaniem dla interaktywnych obszarów obrazu.

Proszę dodać atrybut title zarówno do embed, jak i object, aby ułatwić ich identyfikację przez czytniki ekranu. object obsługuje aria-label. Żaden z tych elementów nie zapewnia tak rozbudowanych semantycznych informacji dotyczących dostępności jak natywne elementy HTML5. W przypadku treści multimedialnych zawsze preferowane są natywne elementy video i audio z napisami.

embed i object są w dużej mierze elementami starszego typu. Ich główne zastosowanie (Flash) zniknęło. Obecnie uzasadnione zastosowania obejmują osadzanie dokumentów PDF bezpośrednio w stronie (z treścią zastępczą), osadzanie interaktywnego SVG oraz starsze treści, których nie można zmodernizować. W nowych projektach do wszystkich zastosowań multimedialnych należy preferować natywne elementy HTML5.

Jaka jest główna zaleta używania object zamiast embed w przypadku osadzanej treści?

embed i object to starsze elementy służące do osadzania treści innych niż HTML. object jest preferowany, gdy potrzebna jest treść zastępcza. Oba elementy obsługują określanie typów MIME i przekazywanie parametrów. W nowych projektach preferowane są nowoczesne odpowiedniki (video, audio, canvas, SVG osadzone bezpośrednio w dokumencie). Osadzanie plików PDF za pomocą object pozostaje częstym zastosowaniem, a alternatywę stanowi iframe.