<embed>
Osadza w stronie zewnętrzny zasób, najczęściej dokument PDF.
- Wyświetlanie
- inline (element zastępowany)
- Znacznik zamykający
- Brak, element pusty
- Dozwolona zawartość
- Brak, element pusty
Przykład
#<embed src="/pliki/plan-kursu-html.pdf" type="application/pdf" width="480" height="320">
<p><a href="/pliki/plan-kursu-html.pdf">Pobierz plan kursu (PDF)</a></p>Na komputerze przeglądarka pokaże w tym miejscu wbudowany czytnik PDF z przewijaniem i powiększaniem. Na części telefonów zostanie puste miejsce, dlatego link do pobrania jest konieczny.
Definicja i zastosowanie
#Element <embed> wstawia na stronę zewnętrzną treść, którą przeglądarka wyświetla własnymi narzędziami, najczęściej dokument PDF we wbudowanym czytniku. Adres podajesz w src, typ pliku w type, a rozmiar w width i height. To element pusty, bez znacznika zamykającego.
Kiedyś <embed> służył głównie do wtyczek, takich jak Flash. Wtyczki zniknęły z przeglądarek, więc dziś ten element ma niewiele zastosowań. Obrazy wstawiaj przez <img>, filmy przez <video>, a inne strony przez <iframe>.
Największa wada <embed> to brak treści zastępczej. Jeśli przeglądarka nie potrafi wyświetlić pliku (na przykład PDF na części telefonów), użytkownik zobaczy puste miejsce. Dlatego obok zawsze warto dać zwykły link do pobrania pliku albo sięgnąć po <object>, który treść zastępczą obsługuje.
Składnia
#<embed src="plik.pdf" type="application/pdf" width="…" height="…">Atrybuty
#src
URL
Adres osadzanego pliku.type
typ MIME, np. `application/pdf`
Typ zasobu. Pomaga przeglądarce wybrać sposób wyświetlenia, zanim jeszcze pobierze plik.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.
Więcej przykładów
#<embed src="/collections/covers/programowanie-dla-dzieci.webp" type="image/webp" width="240" height="160">Działa, ale do obrazów lepszy jest <img>, który ma tekst alternatywny alt i leniwe ładowanie.
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 dodaj obok link do pobrania pliku.
<embed>nie ma treści zastępczej, więc to jedyna pomoc dla osób, u których podgląd nie zadziała. - Do osadzania innych stron używaj
<iframe>, a do filmów z serwisów wideo kodu<iframe>udostępnianego przez serwis.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.