Element <param> to tag HTML służący do przekazywania parametrów do elementu <object> i kontrolowania zachowania osadzanych zasobów (np. apletów Java, wtyczek czy multimediów). W nowoczesnym HTML5 jego użycie jest marginalne na rzecz natywnych rozwiązań, ale pozostaje istotne przy utrzymaniu starszych aplikacji (legacy).
W tym artykule znajdziesz najważniejsze informacje o <param>:
- składnia i kluczowe cechy,
- atrybuty
nameivalue, - praktyczne przykłady z
<object>, - ograniczenia i kwestie bezpieczeństwa,
- nowoczesne alternatywy w HTML5 i JavaScript.
Czym dokładnie jest element <param>?
Element <param> reprezentuje parametr z nazwą i wartością, który kontroluje działanie zasobu osadzonego przez <object>. Nie jest samodzielny – zawsze musi być dzieckiem <object> i znajdować się przed zawartością fallback.
Kluczowe cechy elementu <param> na podstawie specyfikacji HTML:
- kategoria – element pusty, bez treści;
- kontekst – wyłącznie jako dziecko
<object>, przed zawartością alternatywną; - wymagane atrybuty – formalnie
name(wartośćvaluebywa wymagana przez implementację wtyczki); - elementy dzieci – brak;
- fallback – nie dotyczy (sam się nie renderuje);
- składnia – tag otwierający nigdy nie jest pomijany, tag zamykający jest pomijany (element pusty);
- CSS display –
none(przeglądarki go nie renderują).
W praktyce <param> przekazuje ustawienia do wtyczek lub apletów (np. bgcolor, volume, quality). To mechanizm historycznie powiązany z NPAPI, wciąż spotykany w legacy code.
Główne atrybuty elementu <param>
Najczęściej używa się pary name + value. Atrybut name jest wymagany, natomiast value bywa wymagany w zależności od oczekiwań osadzanego obiektu/wtyczki.
Atrybut name
Najważniejsze informacje o atrybucie name:
- opis – określa nazwę parametru przekazywanego do obiektu (np.
bgcolor,movie,volume); - wartość domyślna – brak;
- przykład –
<param name="bgcolor" value="#FDD700">.
Atrybut value
Najważniejsze informacje o atrybucie value:
- opis – definiuje wartość parametru (tekst, liczba, URL, kolor itp.);
- wartość domyślna – brak;
- przykład – w powyższym kodzie wartość to
#FDD700.
W starszych standardach spotkasz też atrybuty: valuetype (sposób interpretacji value: data, ref, object) oraz type (typ MIME parametru) – dziś używane rzadko i głównie w kontekście legacy.
<param> akceptuje także globalne atrybuty HTML (np. id, title).
Podstawowy przykład użycia <param> z <object>
Oto prosty przykład osadzenia obiektu z parametrami (kolor tła i głośność):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład elementu param</title>
</head>
<body>
<object data="applet.jar" type="application/x-java-applet" width="400" height="300">
<!-- Parametry dla obiektu -->
<param name="bgcolor" value="#FDD700"> <!-- Złote tło -->
<param name="volume" value="50"> <!-- Głośność 50% -->
<!-- Fallback dla przeglądarek bez wsparcia -->
<p>Twoja przeglądarka nie obsługuje tego obiektu. <a href="applet.jar">Pobierz aplet</a>.</p>
</object>
</body>
</html>
Rezultat: obiekt (np. aplet) ładuje się ze złotym tłem i głośnością 50%, a elementy <param> pozostają niewidoczne (display: none).
Aby zweryfikować w CSS, możesz tymczasowo nadpisać styl (tylko do debugowania):
param {
display: block; /* tylko debug */
background: red;
}
Pamiętaj: zmiana stylu nie wpływa na działanie – przeglądarki i tak nie renderują <param> jako treści.
Zaawansowane przykłady – Flash, audio i więcej
1. Osadzenie filmu Flash (legacy, cel edukacyjny)
Flash jest przestarzały, ale dobrze pokazuje zastosowanie <param>:
<object width="550" height="400" data="film.swf">
<param name="movie" value="film.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<p>Fallback: <a href="film.swf">Pobierz SWF</a></p>
</object>
Parametry takie jak quality czy bgcolor kontrolują sposób renderowania.
2. Parametry dla starszych wtyczek audio
Przykład konfiguracji odtwarzania w wtyczkach typu Windows Media Player:
<object type="application/x-mplayer2" data="audio.mp3">
<param name="filename" value="audio.mp3">
<param name="autostart" value="false">
<param name="volume" value="70">
</object>
3. Integracja z JavaScript
Możesz dynamicznie dodawać parametry w kodzie JS:
const object = document.querySelector('object');
const param = document.createElement('param');
param.setAttribute('name', 'dynamicColor');
param.setAttribute('value', '#FF0000');
object.appendChild(param);
To bywa przydatne w aplikacjach SPA lub przy dynamicznej konfiguracji osadzanych obiektów.
Ograniczenia i problemy z <param>
Przed użyciem rozważ następujące kwestie:
- przestarzałość – HTML5 preferuje natywne elementy (np.
<video src="film.mp4" controls>), a<param>działa wyłącznie z<object>, nie z<embed>ani<iframe>; - wsparcie przeglądarek – aplety Java i NPAPI są wygaszane od 2015–2016 r., dlatego realne wsparcie jest ograniczone;
- bezpieczeństwo – parametry mogą zostać wykorzystane do wstrzyknięć; zawsze waliduj i sanityzuj wejście;
- dostępność – pamiętaj o solidnym fallbacku i testach z wyłączonymi wtyczkami.
Nowoczesne alternatywy w HTML5 i JavaScript
Zamiast <param> rozważ następujące rozwiązania:
<video>i<audio>– konfiguracja przez atrybuty (src,controls,autoplay) i API mediów;<iframe>– osadzanie zewnętrznych aplikacji lub stron z kontrolą sandbox i politykami CSP;- data attributes – np.
<div data-bgcolor="#FDD700"></div>+ odczyt w JS przezdataset; - Canvas/WebGL – pełna kontrola renderingu oraz logiki po stronie JavaScript.
Przykład migracji z <object> + <param> do natywnego <video>:
<!-- Stary sposób -->
<object data="film.mp4"><param name="src" value="film.mp4"></object>
<!-- Nowy, zalecany w HTML5 -->
<video src="film.mp4" controls width="400" height="300"></video>
Podsumowanie kluczowych wskazówek
- używaj
<param>wyłącznie z elementem<object>w projektach legacy, - zawsze określ
name, avaluedopasuj do wymogów osadzanego obiektu, - zapewnij i przetestuj fallback dla dostępności i bezpieczeństwa,
- w nowych projektach preferuj natywne rozwiązania HTML5 + JS.