Tag <template> to jeden z najbardziej przydatnych elementów w standardzie HTML5, służący do definiowania szablonów, czyli fragmentów kodu HTML, które nie są renderowane od razu, ale mogą być klonowane i wykorzystywane dynamicznie. Dzięki niemu możesz tworzyć bloki treści wielokrotnego użycia, które aktywują się dopiero po manipulacji JavaScriptem – idealne rozwiązanie dla nowoczesnych aplikacji webowych, komponentów i optymalizacji wydajności.
W tym wpisie przyjrzymy się tagowi <template> od podstaw: jego składni, zastosowaniom, przykładom kodu oraz integracji z CSS i JS. Omówimy też różnice w porównaniu do tradycyjnych podejść do szablonów, wpływ na SEO i dostępność, a na koniec krótkie studium przypadku.
Czym dokładnie jest tag <template> i dlaczego warto go używać?
Element <template> reprezentuje szablon w kodzie HTML. Zawiera tzw. „treści szablonu” – fragmenty DOM (Document Object Model), które są nieaktywne domyślnie. Oznacza to, że przeglądarka nie renderuje ich na stronie i nie wykonuje osadzonych skryptów ani nie inicjuje zasobów (np. obrazów). Treść staje się widoczna dopiero po sklonowaniu za pomocą JavaScriptu, np. metodą cloneNode(true). Taka „inercyjność” czyni <template> bezpiecznym i wydajnym – nie obciąża początkowego ładowania strony.
Najważniejsze korzyści ze stosowania <template> prezentują się następująco:
- wielokrotne użycie – jeden szablon możesz klonować wielokrotnie, np. do generowania list produktów czy kart użytkownika;
- bezpieczeństwo – treść jest inercyjna, a skrypty wewnątrz
<template>nie wykonują się automatycznie; - wsparcie dla Web Components – naturalnie współgra z Shadow DOM i niestandardowymi elementami;
- wydajność – nie wpływa na początkowy DOM, co przyspiesza renderowanie i redukuje koszty reflow;
- kompatybilność – szeroko wspierany przez nowoczesne przeglądarki.
W odróżnieniu od zwykłych <div> czy <section>, <template> można osadzać w wielu miejscach dozwolonych przez model treści HTML (np. w <head> i w treści dokumentu). Może zawierać dowolny dozwolony typ treści — pozostaje jednak ukryty, dopóki nie sklonujesz jego zawartości w JS.
Podstawowa składnia i prosty przykład użycia
Podstawowa struktura wygląda tak:
<template id="moj-szablon">
<div class="karta">
<h3>Tytuł karty</h3>
<p>Opis karty, który można dynamicznie zmieniać.</p>
<button>Kliknij mnie</button>
</div>
</template>
Aby użyć szablonu, pobierz go w JavaScript i sklonuj:
const szablon = document.getElementById('moj-szablon');
const klon = szablon.content.cloneNode(true); // Kopiuje całą zawartość
// Wstawiamy do body
document.body.appendChild(klon);
// Opcjonalnie modyfikujemy zawartość
klon.querySelector('h3').textContent = 'Nowy tytuł!';
Wynik – na stronie pojawi się aktywna karta z tytułem „Nowy tytuł!”. Bez JS szablon pozostaje niewidoczny.
Uwaga na CSS – style z <template> nie stosują się automatycznie po klonowaniu. Dodaj je do głównego arkusza lub do Shadow DOM.
Praktyczne przykłady – od list po galerie obrazów
1. Generowanie dynamicznej listy produktów (e-commerce)
Wyobraź sobie sklep internetowy z setką towarów. Zamiast hardkodować HTML, użyj szablonu i uzupełniaj go danymi z JS:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Szablon template w akcji</title>
<style>
.produkt { border: 1px solid #ccc; padding: 10px; margin: 10px; border-radius: 5px; }
.cena { font-weight: bold; color: green; }
</style>
</head>
<body>
<template id="produkt-szablon">
<div class="produkt">
<h4 class="nazwa"></h4>
<p class="opis"></p>
<span class="cena"></span> zł
<button onclick="kup(this)">Kup</button>
</div>
</template>
<div id="lista-produktow"></div>
<script>
const szablon = document.getElementById('produkt-szablon');
const kontener = document.getElementById('lista-produktow');
const produkty = [
{ nazwa: 'Laptop XYZ', opis: 'Mocny procesor i 16GB RAM', cena: 2999 },
{ nazwa: 'Smartfon ABC', opis: 'Ekran 6.5 cala', cena: 1999 }
];
produkty.forEach(produkt => {
const klon = szablon.content.cloneNode(true);
klon.querySelector('.nazwa').textContent = produkt.nazwa;
klon.querySelector('.opis').textContent = produkt.opis;
klon.querySelector('.cena').textContent = produkt.cena;
kontener.appendChild(klon);
});
function kup(button) {
alert('Kupiono!');
}
</script>
</body>
</html>
Rezultat – automatycznie wygenerowana lista z interaktywnymi przyciskami, skalowalna na tysiące elementów bez odczuwalnego spowolnienia.
2. Galeria obrazów z leniwym ładowaniem
Dla galerii zdjęć przygotuj lekki szablon i uzupełniaj go danymi z API:
<template id="zdjecie-szablon">
<figure>
<img src="" alt="" loading="lazy">
<figcaption></figcaption>
</figure>
</template>
W JS klonujesz szablon i wstawiasz do kontenera; z CSS Grid łatwo uzyskasz responsywny układ.
3. Integracja z CSS – animacje i style warunkowe
Dodaj style globalnie lub w Shadow DOM, aby działały od razu po klonowaniu:
.produkt { transition: all 0.3s; }
.produkt:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
Zaawansowane zastosowanie – Web Components i Shadow DOM
<template> błyszczy w Web Components – standardzie do tworzenia własnych tagów HTML. Oto minimalny przykład niestandardowego elementu „moja-karta” działającego z Shadow DOM:
class MojaKarta extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const template = document.getElementById('karta-template');
shadow.appendChild(template.content.cloneNode(true));
}
}
customElements.define('moja-karta', MojaKarta);
Użycie: <moja-karta></moja-karta>. Shadow DOM izoluje style i JS, eliminując konflikty CSS w dużych projektach.
Porównanie z innymi metodami szablonów
Dla szybkiego porównania zestawmy <template> z alternatywami:
| Metoda | Zalety | Wady | Kiedy używać? |
|---|---|---|---|
<template> |
Natywny HTML5, wydajny, bezpieczny | Wymaga JS do aktywacji | Aplikacje SPA, Web Components |
| Szablony w postaci łańcuchów (innerHTML) | Proste | Ryzyko XSS, ciągłe parsowanie HTML | Prototypy, szybkie szkice |
| Frameworki (React/Vue) | Zaawansowane możliwości | Narzut bibliotek, warstwa kompilacji | Duże projekty, złożona logika UI |
| Handlebars/Lit | Lekki mechanizm szablonów | Dodatkowe biblioteki | SSR lub hybrydowe renderowanie |
<template> wygrywa w scenariuszach z czystym JavaScriptem oraz w komponentach webowych.
Najczęstsze błędy i dobre praktyki
Poniżej checklista, która oszczędzi Ci debugowania:
- błąd – zapominanie o
content.cloneNode(true), przez co treść szablonu się nie aktywuje; - dobre praktyki – nadawaj unikalne
idszablonom i testuj je w narzędziach deweloperskich (Elements > Templates); - dostępność – dodawaj atrybuty
aria-*w szablonie i deklarujlang="pl"w<html>dla języka polskiego; - SEO – klonowane treści mogą być indeksowane, ale nie ukrywaj kluczowych informacji istotnych dla widoczności;
- kodowanie znaków – zawsze dodawaj
<meta charset="utf-8">w dokumencie HTML.
Test kompatybilności – sprawdź na caniuse.com; wsparcie przekracza 97% globalnie w nowoczesnych przeglądarkach.
Studium przypadku – realny projekt: lista zadań z szablonami
Wypełnij stronę interaktywną listą zadań używając <template>. Skopiuj pełny przykład (HTML + CSS + JS) do jednego pliku, aby dodać mechanizmy dodawania, edycji i usuwania zadań bez odświeżania strony.
Efekt – minimalny kod HTML, czysty JS i wysokie osiągi nawet przy dużej liczbie elementów.