<figcaption>
Podpis ilustracji w elemencie `<figure>`.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<style>
figcaption { margin-top: 6px; font-size: 0.875em; opacity: 0.75; }
</style>
<figure>
<img
src="/collections/covers/darmowa-nauka-programowania.webp"
alt="Chłopak w okularach uczy się nocą w bibliotece, przed nim laptop z kodem i rozłożone książki"
width="300"
height="200"
>
<figcaption>Fot. 2. Biblioteka to wciąż świetne miejsce do nauki, także programowania.</figcaption>
</figure>Definicja i zastosowanie
#Element <figcaption> zawiera podpis albo legendę do treści elementu <figure>: opis zdjęcia, numer i tytuł rysunku, źródło danych na wykresie, autora cytatu. Musi być pierwszym albo ostatnim dzieckiem <figure>.
Podpis widzą wszyscy użytkownicy i opisuje on ilustrację w kontekście tekstu, na przykład „Rys. 2. Wzrost liczby uczniów w 2026 roku”. Technologie asystujące używają go jako nazwy całej ilustracji.
W środku może znaleźć się dowolna treść przepływu: akapity, link do źródła, a nawet krótka lista. Domyślnie to zwykły blok bez żadnego wyróżnienia, więc mniejszą czcionkę czy kursywę nadajesz w CSS.
Składnia
#<figcaption>Treść podpisu</figcaption>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
figcaption {
display: block;
}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
#- W jednym
<figure>może być tylko jeden<figcaption>. - Nie używaj
<figcaption>poza<figure>. Do podpisu tabeli służy<caption>, a zwykły opis pod obrazem bez<figure>to po prostu akapit.
Powiązane hasła
#- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
- <img>Obraz osadzony na stronie.
- <caption>Tytuł tabeli, umieszczany jako pierwszy element wewnątrz `<table>`.
- <picture>Kontener na kilka wersji obrazu. Przeglądarka wybiera tę, która najlepiej pasuje do ekranu i formatu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.