Poznaj Programowanie

Tagi HTML: figcaption

Piotr Grochal 6 min. czytania

W dzisiejszym świecie web developmentu, gdzie semantyka HTML odgrywa kluczową rolę w dostępności, SEO i czytelności kodu, tag <figcaption> staje się nieodzownym elementem.

Ten prosty, ale potężny znacznik dodaje podpisy do elementów <figure>, tworząc samodzielne bloki treści (zdjęcia, ilustracje, wykresy czy fragmenty kodu), które są lepiej interpretowane przez czytniki ekranu i wyszukiwarki.

W tym rozbudowanym wpisie omówimy wszystko, co musisz wiedzieć o <figcaption> – od definicji i specyfikacji, przez praktyczne przykłady, po stylizację CSS i najlepsze praktyki.

Czym jest tag <figcaption> i do czego służy?

Element HTML <figcaption> reprezentuje podpis lub legendę nadrzędnego elementu <figure>. Nie jest obowiązkowy – <figure> może istnieć bez niego – ale jego użycie znacząco poprawia strukturę dokumentu.

Najważniejsze fakty dotyczące <figcaption> to:

  • główna rola – opisuje zawartość blokową (obrazy, diagramy, fragmenty kodu, wideo) i traktuje ją jako jedną całość niezależną od reszty strony;
  • pozycja w <figure> – musi być pierwszym lub ostatnim dzieckiem elementu <figure> zgodnie ze specyfikacją HTML5;
  • zawartość – może zawierać treści typu flow (np. tekst, linki, akapity, listy), obsługuje wyłącznie atrybuty globalne i zdarzeniowe.

Dla dostępności i SEO ma to realne znaczenie – podpisy są odczytywane przez technologie asystujące i indeksowane przez wyszukiwarki, co ułatwia nawigację i poprawia widoczność treści wizualnych.

Podstawowa składnia i wymagania specyfikacji

Poniżej znajdziesz zestawienie kluczowych parametrów <figcaption> wg specyfikacji HTML:

Cecha Opis
Modele treści Treści typu flow
Elementy nadrzędne Tylko <figure> (jako pierwszy lub ostatni potomek)
Elementy potomne Dowolne elementy treści flow (np. <p>, <a>, <code>, listy)
Znaczniki Wymagane znaczniki otwierający i zamykający (<figcaption>...</figcaption>)
Interfejs DOM HTMLFigcaptionElement
Atrybuty Brak obowiązkowych; dostępne atrybuty globalne i zdarzeniowe

Uwaga – <figcaption> nie działa samodzielnie. Zawsze musi być zagnieżdżony w <figure>.

Przykłady użycia <figcaption> krok po kroku

Zacznijmy od prostego przypadku: podpis pod zdjęciem. To klasyczne zastosowanie w blogach czy portfolio.

Przykład 1 – podstawowy podpis zdjęcia

Oto kod, który możesz skopiować i przetestować:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład figcaption</title>
</head>
<body>
<figure>
<img src="kot.jpg" alt="Mały biały kotek" width="400" height="300">
<figcaption>Mały biały kotek na spacerze – zdjęcie z Pixabay (1224x1280px)</figcaption>
</figure>
</body>
</html>

Efekt: obraz z opisem umieszczonym pod nim. Domyślne wyrównanie zależy od arkusza stylów – bez dodatkowego CSS treść nie jest automatycznie centrowana.

Przykład 2 – podpis na górze figury (przed obrazem)

W numerowanych diagramach i artykułach naukowych podpis bywa umieszczany nad ilustracją:

<figure>
<figcaption>Rysunek 1: Sens życia według Douglasa Adamsa</figcaption>
<img src="42.jpg" alt="Liczba 42" width="200">
</figure>

Przykład 3 – fragment kodu z podpisem

Podpis świetnie porządkuje także listingi kodu:

<figure id="listing1">
<figcaption>Przykład 1: Deklaracja kodowania UTF-8 w HTML5</figcaption>
<pre><code>&lt;meta charset="UTF-8"&gt;</code></pre>
</figure>

W tym przykładzie <figcaption> opisuje blok kodu, dzięki czemu całość staje się czytelnym, samodzielnym załącznikiem.

Przykład 4 – galeria zdjęć z podpisami

W galerii każdy element <figure> może mieć własny podpis i identyfikator:

<figure>
<img src="how2html.png" alt="Logo how2html" width="300">
<figcaption>Logo serwisu how2html – proste i czytelne</figcaption>
</figure>

<figure>
<img src="diagram.jpg" alt="Diagram bazy danych" width="500">
<figcaption id="db-diagram">Rysunek 2: Schemat relacji w bazie MySQL</figcaption>
</figure>

Aby stworzyć odnośnik do konkretnego podpisu, możesz użyć identyfikatora: <a href="#db-diagram">Przejdź do diagramu</a>.

Stylizacja <figcaption> za pomocą CSS

Domyślne style często wymagają dopracowania. Poniżej przykładowe reguły, które nadadzą bardziej profesjonalny wygląd:

figure {
display: block;
margin: 2em auto;
max-width: 600px;
text-align: center;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1em;
background: #f9f9f9;
}
figcaption {
font-weight: bold;
font-style: italic;
font-family: 'Georgia', serif;
font-size: 1.2em;
color: #555;
margin-top: 0.5em;
padding: 0.5em;
background: rgba(0,0,0,0.05);
}

Efekt wizualny – podpis jest pogrubiony, lekko wyróżniony tłem i czytelny niczym podpis pod ilustracją w książce.

Responsywność i efekty hover

Możesz też dodać responsywność i subtelne efekty:

@media (max-width: 768px) {
figure { margin: 1em 10px; }
figcaption { font-size: 1em; }
}
figure:hover figcaption {
background: #007bff;
color: #fff;
transition: all 0.3s ease;
}

Dla interakcji w JavaScript możesz nasłuchiwać kliknięcia na podpisie i np. uruchamiać powiększanie obrazu.

Najlepsze praktyki i częste błędy

Najlepsze praktyki

Stosując <figcaption>, pamiętaj o tych zasadach:

  • zawsze łącz z <figure> – samotny <figcaption> to błąd semantyczny;
  • atrybut alt w <img> – podpis nie zastępuje alt; pełnią różne role (technologie asystujące vs. podpis redakcyjny);
  • numeracja ilustracji – w materiałach formalnych dodawaj „Rys. 1”, „Fig. 2” bezpośrednio w treści podpisu;
  • SEO – podpisy są indeksowane (np. w Google Images), co może zwiększać widoczność treści wizualnych.

Błędy do uniknięcia

Najczęstsze potknięcia wyglądają tak:

  • zła pozycja w strukturze – umieszczenie <figcaption> w środku <figure> zamiast jako pierwszy lub ostatni element;
  • brak deklaracji języka – pomijanie lang="pl" w <html> utrudnia dostępność i przetwarzanie treści;
  • brak stylizacji – pozostawienie domyślnych styli zmniejsza czytelność i spójność wizualną.

Dla porównania z alternatywami prezentacji podpisów spójrz na zestawienie:

Podejście Zalety Wady
<figure> + <figcaption> Semantyka, dostępność, SEO Wymaga HTML5
<div> z opisem Proste, działa wszędzie Brak semantyki
<img> + <p> Łatwe Nie grupuje treści jako jednej logicznej całości

Zaawansowane zastosowania w projektach realnych

Oto przykłady, gdzie <figcaption> świeci pełnym potencjałem:

  • blogi i portfolio – automatyczne generowanie galerii z podpisami za pomocą JavaScript;
  • dokumentacja techniczna – opisy listingów kodu, wykresów, schematów czy punktów końcowych API;
  • e‑commerce – zdjęcia produktów z krótkimi opisami specyfikacji i wyróżnionymi parametrami;
  • integracja z JS – np. document.querySelector('figcaption').addEventListener('click', zoomImage);.

W praktyce popularne biblioteki (np. Bootstrap, Tailwind) oferują gotowe klasy dla <figure> i podpisów, co przyspiesza wdrożenie i ujednolica wygląd komponentów.