Poznaj Programowanie

Tagi HTML: object

Piotr Grochal 4 min. czytania

Tag <object> to uniwersalny element HTML służący do osadzania zasobów zewnętrznych bezpośrednio w dokumencie, takich jak obrazy, wideo, pliki PDF czy całe fragmenty HTML.

W HTML5 w wielu przypadkach lepiej korzystać z dedykowanych elementów (np. <video>, <audio>, <img>, <iframe>), a <object> rezerwować dla bardziej niestandardowych formatów i specyficznych integracji.

Zastosowanie i przypadki użycia

Najczęstsze scenariusze, w których warto rozważyć użycie <object>:

  • osadzanie plików PDF – szybki podgląd dokumentów bez opuszczania strony;
  • wbudowywanie wideo i animacji – alternatywa dla natywnych tagów w specyficznych przypadkach integracji;
  • integracja apletów Java i kontrolek ActiveX – wyłącznie w środowiskach legacy, gdzie wsparcie wciąż jest wymagane;
  • osadzanie fragmentów HTML – wstawianie komponentów z innych stron lub aplikacji;
  • wyświetlanie niestandardowych formatów – zasoby obsługiwane przez dedykowane wtyczki lub mechanizmy przedsiębiorstw.

Dla obrazów używaj <img>, a dla całych stron HTML – <iframe>. <object> najlepiej sprawdza się przy złożonych lub rzadziej spotykanych typach osadzanych treści.

Podstawowa składnia

W najprostszym wariancie <object> wymaga atrybutu data wskazującego adres zasobu:

Oto minimalny przykład:

<object data="plik.pdf"></object>

Element wymaga zarówno tagu otwierającego, jak i zamykającego, a pomiędzy nimi możesz umieścić treść alternatywną (fallback).

Kluczowe atrybuty

Poniżej zestawienie najważniejszych atrybutów <object>:

Atrybut Wartość Opis
data URL Wymagany – adres zasobu do osadzenia
type typ MIME Określa typ danych, np. application/pdf, video/mp4
width liczba / % Szerokość obiektu w pikselach lub procentach
height liczba / % Wysokość obiektu w pikselach lub procentach
name nazwa Nazwa identyfikująca element
form form_id ID formularza powiązanego z obiektem
usemap #mapa Nazwa mapy klienta (<map>) powiązanej z obiektem
typemustmatch true / false Wymusza zgodność typu MIME z faktyczną zawartością

Praktyczne przykłady

Osadzanie pliku PDF

Przykład osadzenia pliku PDF z treścią alternatywną:

<object data="dokument.pdf" type="application/pdf" width="600" height="400">
Twoja przeglądarka nie obsługuje plików PDF.
<a href="dokument.pdf">Pobierz PDF</a>
</object>

Takie rozwiązanie pozwala przeglądać dokument bez opuszczania strony.

Osadzanie wideo

Proste osadzenie wideo (w praktyce preferuj <video>):

<object data="video.mp4" type="video/mp4" width="400" height="300"></object>

Osadzanie animacji Flash

Historyczny przykład z parametrami (Flash jest niewspierany w nowoczesnych przeglądarkach):

<object type="application/x-shockwave-flash" data="animacja.swf" width="200" height="150">
<param name="movie" value="animacja.swf">
</object>

Osadzanie fragmentu HTML

Wstawienie fragmentu HTML (dla izolacji i bezpieczeństwa rozważ <iframe>):

<object data="fragment.html" width="500" height="200"></object>

Element <param> – parametry obiektu

Do przekazywania ustawień do osadzanego zasobu użyj zagnieżdżonych elementów <param>:

Przykład przekazania parametrów:

<object type="application/x-shockwave-flash" data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
<param name="quality" value="high">
</object>

Każdy element <param> przyjmuje atrybuty name (nazwa parametru) oraz value (jego wartość).

Atrybuty zaawansowane (zdeprecjonowane)

W starszym kodzie możesz natknąć się na wycofane atrybuty – unikaj ich w nowych wdrożeniach:

  • align – położenie elementu; przestarzałe;
  • hspace – poziome odstępy w pikselach; przestarzałe;
  • vspace – pionowe odstępy w pikselach; przestarzałe;
  • standby – komunikat podczas ładowania zasobu; przestarzałe.

Wsparcie przeglądarek

Tag <object> jest szeroko wspierany w nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge).

Treści wymagające wtyczek (np. Flash, aplety Java, ActiveX) nie są już wspierane w aktualnych przeglądarkach i nie powinny być używane w nowych projektach.

Alternatywy do rozważenia

W HTML5 w wielu przypadkach lepiej sięgnąć po bardziej wyspecjalizowane rozwiązania:

  • obrazy – użyj <img> lub <picture> z dopasowaniem do urządzeń;
  • audio i wideo – tagi <audio> i <video> z natywnymi kontrolkami i streamingiem;
  • dokumenty HTML – <iframe> dla izolacji, atrybuty sandbox i allow dla bezpieczeństwa;
  • PDF-y – integracja z JavaScriptem (np. PDF.js) dla lepszej kontroli renderowania.

Praktyczne wskazówki

Aby uniknąć problemów z wydajnością i użytecznością, stosuj poniższe dobre praktyki:

  1. Zawsze podawaj wymiary – ustaw width i height, aby ograniczyć przesunięcia layoutu (CLS);
  2. Dodaj treść alternatywną – wewnątrz <object> umieść link lub komunikat na wypadek braku wsparcia;
  3. Używaj poprawnych typów MIME – dodaj type i w razie potrzeby typemustmatch, by uniknąć błędów ładowania;
  4. Testuj kompatybilność – sprawdzaj działanie zasobu na docelowych przeglądarkach i urządzeniach.