Tag <embed> to pusty element HTML służący do osadzania zewnętrznych zasobów, takich jak pliki multimedialne, PDF, wideo, audio czy treści wymagające obsługi przez przeglądarkę. W nowoczesnych projektach zaleca się używać go ostrożnie, preferując semantyczne elementy HTML5 tam, gdzie to możliwe.
Podstawowa składnia i kontekst użycia
<embed> jest elementem pustym (void) – nie posiada treści ani elementów potomnych i nie ma znacznika zamykającego. Można go umieścić w typowej treści strony (np. w obrębie figure lub innego kontenera). Pamiętaj, że nie zapewnia fallbacku – jeśli zasób nie zostanie załadowany, nic się nie wyświetli.
Podstawowa składnia:
<embed src="adres-zasobu" width="szerokosc" height="wysokosc">
W tej składni najważniejsze atrybuty to:
- src – obowiązkowy atrybut określający adres zasobu (URL);
- width i height – opcjonalne atrybuty definiujące wymiary w pikselach;
- type – opcjonalny typ MIME zasobu (np.
video/webm,application/pdf).
Element wspiera treść flow, phrasing, embedded i interactive, co oznacza, że pasuje do większości kontekstów, ale nie posiada alternatywnej treści na wypadek błędu ładowania.
Przykład prostego osadzenia animacji SWF (dziedzictwo starszych wersji HTML):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Przykład embed SWF</title>
</head>
<body>
<figure>
<embed src="https://webkod.pl/files/html/animacja-01.swf" width="400" height="300" type="application/x-shockwave-flash">
<figcaption>Animacja Flash osadzona za pomocą embed</figcaption>
</figure>
</body>
</html>
Rezultat – zasób animacja-01.swf wyświetli się w ramce o wymiarach 400×300 px z podanym typem MIME, co ułatwia poprawną interpretację przez przeglądarkę.
Kluczowe atrybuty i ich działanie
Poniższa tabela podsumowuje atrybuty często używane z <embed> wraz z uwagami i przykładowymi wartościami:
| Atrybut | Opis | Przykład wartości | Uwagi |
|---|---|---|---|
| src | Ścieżka do zasobu (obowiązkowy) | src="video.webm" |
URL lub ścieżka lokalna |
| type | Typ MIME (np. video/webm, application/pdf) |
type="application/pdf" |
Pomaga w renderingu |
| width | Szerokość w px | width="400" |
Domyślnie auto |
| height | Wysokość w px | height="300" |
Domyślnie auto |
| bgcolor | Kolor tła (hex, przestarzały, ale bywa obsługiwany) | bgcolor="#FDD700" |
Złote tło |
Przykład z type i bgcolor:
<embed src="https://webkod.pl/files/html/animacja-01.swf" type="application/x-shockwave-flash" width="400" height="300" bgcolor="#FDD700">
Efekt – animacja z żółtym tłem i jawnie podanym typem MIME dla Flasha.
Przykłady przestarzałych parametrów zależnych od wtyczek (niezalecane w HTML5):
autostart="true",loop="true",hidden="true",showcontrols="0".
Nie używaj tych atrybutów w HTML5 – zamiast nich korzystaj z natywnych elementów, takich jak <video> i <audio>. Dodatkowo, usunięto w HTML5 następujące atrybuty prezentacyjne:
align,name,hspace,vspace.
Przykłady praktycznych zastosowań
1. Osadzanie wideo WebM
Nowoczesny przykład dla plików wideo:
<embed src="video-przykladowe.webm" type="video/webm" width="640" height="360" title="Wideo demonstracyjne">
Efekt – wideo renderuje się bezpośrednio, a atrybut title poprawia dostępność.
2. Osadzanie PDF
Do wyświetlania dokumentów PDF podaj wyraźne wymiary kontenera:
<embed src="dokument.pdf" type="application/pdf" width="1000" height="600">
Uwaga – bez określenia width/height dokument może być trudny do czytania. Przy odtwarzaniu wykorzystywany jest wbudowany przeglądarkowy viewer PDF (lub zainstalowany czytnik).
3. Audio lub multimedia (starsze formaty)
Dla plików .wav, .mid czy .mov – choć zwykle lepiej użyć <audio> lub <video>:
<embed src="dzwiek.wav" type="audio/wav" width="300" height="50" loop="true" autostart="false">
Efekt – prosty panel odtwarzania z opcją pętli (zależny od wsparcia w przeglądarce/wtyczce).
4. Integracja z dodatkowymi parametrami (dla wtyczek)
Przykład przekazania parametru jakości do Flasha:
<embed src="top_of_page.swf" quality="high" width="500" height="400">
Efekt – wyższa jakość renderingu po stronie wtyczki.
Stylizacja CSS i responsywność
Domyślnie przeglądarki renderują embed jako inline-block (gdy zasób się załaduje). Dostosuj wygląd i zachowanie za pomocą CSS:
embed {
max-width: 100%;
height: auto;
border: 2px solid #ccc;
border-radius: 8px;
}
@media (max-width: 768px) {
embed {
width: 100% !important;
height: 200px !important;
}
}
Przykład responsywnego osadzenia:
<figure style="width: 100%; text-align: center;">
<embed src="video.mp4" type="video/mp4" style="max-width: 100%; height: auto;">
<figcaption>Mobilno-responsywne wideo</figcaption>
</figure>
Zalecenia, ograniczenia i alternatywy
Zalety – <embed> jest prosty i uniwersalny przy osadzaniu zewnętrznych zasobów oraz wspiera typy MIME i parametry specyficzne dla wtyczek, co bywa przydatne w niszowych scenariuszach.
Wady i ostrzeżenia:
- przestarzały dla nowoczesnych mediów – dla obrazów używaj
<img>, dla wideo<video>, dla audio<audio>, a dla stron/treści HTML<iframe>; - brak fallbacku – w razie błędu ładowania nic się nie wyświetli;
- zależność od wtyczek w starszych przeglądarkach – technologia Flash jest porzucona;
- kwestie bezpieczeństwa – osadzaj tylko zaufane źródła, aby ograniczyć ryzyko XSS.
Kiedy używać? Głównie do PDF, starszych multimediów lub gdy inne elementy zawodzą. W przypadku map, interaktywnych widgetów i stron zewnętrznych lepszy będzie <iframe>.
Testowanie – zachowanie zależy od przeglądarki i wsparcia MIME. Sprawdź działanie w Chrome, Firefox i Edge.
Dostępność – dodawaj title oraz kontekstowy opis (np. w <figcaption>), aby ułatwić nawigację czytnikom ekranu.
W praktyce preferuj semantyczne elementy HTML5, a <embed> traktuj jako narzędzie do specyficznych, uzasadnionych przypadków.
Źródła: analiza dokumentacji HTML oraz kursów programistycznych.