Tag <small> w HTML służy do oznaczania tekstu o charakterze pobocznym, takim jak drobny druk: zastrzeżenia, prawa autorskie czy dodatkowe uwagi, renderowane domyślnie mniejszą czcionką.
Nie jest to element dekoracyjny – niesie semantykę treści drugorzędnych, co poprawia dostępność i ułatwia zrozumienie struktury dokumentu.
Definicja i przeznaczenie elementu <small>
Element <small> definiuje mniejszy tekst, tradycyjnie używany do „drobnego druczku”, np. not prawnych, ostrzeżeń, ograniczeń czy informacji licencyjnych.
W specyfikacji HTML reprezentuje dodatkową treść względem materiału głównego, np. zastrzeżenia do oferty lub doprecyzowania w stopce.
Kluczowe cechy
Najważniejsze właściwości elementu <small> to:
- semantyka – podkreśla drugorzędność treści, nie zmieniając ich ważności – w przeciwieństwie do elementów jak
<aside>czy<footer>; - wygląd domyślny – przeglądarki wyświetlają go czcionką pomniejszoną o jeden stopień (np.
font-size: smaller;); - aktualny status – nie jest przestarzały i pozostaje zalecany w HTML5, choć kontrolę wizualną lepiej doprecyzować w CSS;
- display –
inline, dzięki czemu nie przerywa płynnego przebiegu tekstu.
Kiedy używać?
Oto typowe scenariusze, w których <small> sprawdza się najlepiej:
- zastrzeżenia cenowe – doprecyzowanie warunków oferty (np. podatki, wyłączenia);
- prawa autorskie – formuły i drobne adnotacje w stopkach stron;
- ostrzeżenia i uwagi – krótkie komunikaty o ograniczeniach, bezpieczeństwie lub wymaganiach.
Przykładowe fragmenty do wklejenia na stronę:
Cena: 10 000 zł (bez VAT)
© 2025 Firma. Wszelkie prawa zastrzeżone.
Produkt dla osób od 12 lat
Czego unikać?
Unikaj długich bloków tekstu, całych akapitów lub sekcji w <small> – to miejsce na krótkie notki, nie na regulaminy.
Podstawowy przykład użycia
Poniżej prosty przykład pokazujący różnicę w rozmiarze tekstu i kontekst notki pobocznej:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład tagu small</title>
</head>
<body>
<p>To jest normalny tekst o standardowym rozmiarze.</p>
<p>To jest normalny tekst z <small>dodatkową notką w mniejszym druku.</small></p>
</body>
</html>
Efekt wizualny – końcowa notka w drugim akapicie jest mniejsza, co czytelnie sygnalizuje jej pomocniczy charakter.
Zaawansowane przykłady w kontekście
1. Zastrzeżenia w liście produktów (e‑commerce)
Tak możesz oddzielić cenę główną od warunków w krótkiej notce:
<ul>
<li>Samochód A, cena: 10 000 zł <small>(bez dodatkowego wyposażenia)</small>.</li>
<li>Samochód B, cena: 15 000 zł <small>(cena promocyjna, obowiązuje do końca miesiąca)</small>.</li>
</ul>
Taki zapis poprawia czytelność i zachowuje semantykę warunków oferty.
2. Stopka z prawami autorskimi
W stopce <small> dobrze sprawdza się do informacji drugorzędnych, jak daty aktualizacji:
<footer>
<p>© 2025 Twoja Firma. Wszelkie prawa zastrzeżone. <small>Data ostatniej aktualizacji: 20 marca 2026.</small></p>
</footer>
3. Ostrzeżenia w opisie produktu
Krótka, pomocnicza informacja o bezpieczeństwie może wyglądać tak:
<div class="produkt">
<h2>Super Lek na wszystko</h2>
<p>Działa natychmiastowo!</p>
<p><small>Stosować pod nadzorem lekarza. Nie dla kobiet w ciąży.</small></p>
</div>
Wyszukiwarki i czytniki ekranu lepiej interpretują tak oznaczone treści poboczne.
Tag <small> vs. CSS – co wybrać?
Choć <small> zapewnia domyślny efekt font-size: smaller;, w praktyce łącz semantykę z precyzyjnym stylowaniem w CSS.
Porównanie podejść:
| Podejście | Zalety | Wady | Przykład |
|---|---|---|---|
Tag <small> |
semantyka, dostępność, prostota | ograniczona kontrola rozmiaru | small { font-size: 0.8em; color: #666; } |
CSS z <span> |
pełna elastyczność (np. responsywność) | brak semantyki | span.small { font-size: smaller; font-style: italic; } |
Pełny przykład z CSS
Poniżej przykład łączący semantykę i stylowanie dodatkowych notek:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
small { font-size: 0.85em; color: #999; font-style: italic; }
@media (max-width: 600px) {
small { font-size: 0.8em; }
}
</style>
</head>
<body>
<p>Normalny tekst.</p>
<p>Tekst z <small>notką stylizowaną CSS</small> w środku zdania.</p>
</body>
</html>
Obsługa przeglądarek i atrybuty
Wsparcie przeglądarek
Pełne wsparcie we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge).
Atrybuty
Element <small> akceptuje wyłącznie atrybuty globalne i zdarzeniowe:
- atrybuty globalne – np.
id,class,style,title; - atrybuty zdarzeniowe – np.
onclick; - brak atrybutów specyficznych – element nie definiuje własnych atrybutów.
Kontekst użycia
Poniżej szybka ściąga dotycząca miejsc dozwolonych i typowych zawartości:
| Kategoria | Szczegóły |
|---|---|
| Elementy nadrzędne | <p>, <article>, <section>, <footer> i inne miejsca, gdzie dozwolone są treści typu phrasing |
| Elementy potomne | tekst i elementy typu phrasing, np. <span>, <strong>, <em> |
| Tagi | obowiązkowe są tag otwierający i zamykający |
Najczęstsze błędy i dobre praktyki
Zwróć uwagę na poniższe wskazówki, aby zachować czytelność i dostępność:
- błąd – używanie
<small>do całego regulaminu; wybierz raczej<details>lub logiczne sekcje; - błąd – zastępowanie
<small>wyłącznie CSS-em i tracenie semantyki; - praktyka – opcjonalnie łącz z ARIA dla kontekstu, np.
aria-label="zastrzeżenie"; - responsywność – testuj na urządzeniach mobilnych; zbyt mały tekst może wymagać korekt w CSS;
- alternatywy semantyczne –
<sub>/<sup>dla indeksów,<mark>dla wyróżnień.