Znacznik HTMLOsadzanie treści

<object>

Osadza zewnętrzny zasób (PDF, obraz, stronę) z treścią zastępczą na wypadek, gdyby się nie wczytał.

Wyświetlanie
inline (element zastępowany)
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść zastępcza, wyświetlana, gdy zasób się nie wczyta
Na tej stronie

Przykład

#
HTML
<object data="/pliki/plan-kursu-html.pdf" type="application/pdf" width="320" height="160">
  <p>Nie możemy wyświetlić podglądu PDF.</p>
  <p><a href="/pliki/plan-kursu-html.pdf">Pobierz plan kursu</a></p>
</object>
Podgląd

W podglądzie plik PDF nie jest dostępny, dlatego widzisz treść zastępczą, dokładnie taką, jaką zobaczy użytkownik, gdy plik się nie wczyta.

Definicja i zastosowanie

#

Element <object> osadza zewnętrzny zasób: dokument PDF, obraz, grafikę SVG albo inną stronę HTML. Adres podajesz w atrybucie data (a nie src), typ w type, a rozmiar w width i height.

Jego przewagą nad <embed> jest treść zastępcza. Wszystko, co wpiszesz między znacznikami, pojawi się wtedy, gdy zasobu nie da się wczytać albo wyświetlić. To idealne miejsce na link do pobrania pliku.

Podobnie jak <embed>, element pochodzi z czasów wtyczek, a jego dawne atrybuty do ich obsługi, takie jak classid i codebase, są przestarzałe. Do osadzania innych stron lepszy jest <iframe>, a do obrazów <img>.

Składnia

#
Składnia
<object data="plik.pdf" type="application/pdf" width="…" height="…">
  treść zastępcza
</object>

Atrybuty

#
  • data

    URL

    Adres osadzanego zasobu. To odpowiednik atrybutu src z innych elementów.
  • type

    typ MIME, np. `application/pdf`, `image/svg+xml`

    Typ zasobu. Pomaga przeglądarce od razu zdecydować, czy potrafi go wyświetlić, czy powinna pokazać treść zastępczą.
  • width / height

    liczba pikseli

    Wymiary obszaru, w którym wyświetli się zasób.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Zawsze wpisz treść zastępczą z linkiem do pliku. Na telefonach wbudowany podgląd PDF nie zawsze działa.
  • Do filmów z serwisów takich jak YouTube czy Vimeo używaj <iframe>, a nie <object>.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.