<figure> w HTML to semantyczny element służący do grupowania samodzielnych treści, takich jak ilustracje, zdjęcia, wykresy, fragmenty kodu czy tabele, które są powiązane z główną treścią strony, lecz ich usunięcie nie zakłóci sensu podstawowego przekazu dokumentu. Często uzupełniany jest przez element <figcaption>, który stanowi podpis lub opis dla zawartości <figure>.
Czym dokładnie jest <figure>?
- Element semantyczny – daje przeglądarce i technologiom asystującym informację, że zawartość jest niezależną jednostką związaną z tekstem, np. ilustracją lub wykresem;
- Samodzielność – zawartość
<figure>można w razie potrzeby przenieść w inne miejsce (np. do aneksu, na bok strony) bez utraty sensu w głównej narracji strony; - Możliwy podpis – umożliwia dodanie podpisu za pomocą
<figcaption>; - Elastyczność – może zawierać różne typy zawartości – nie tylko obrazy, ale także tabele, fragmenty kodu, diagramy itd.
Jak zbudować strukturę <figure>
<figure>
<img src="przyklad.jpg" alt="Opis obrazka">
<figcaption>Rysunek 1: Przykładowy obrazek z podpisem.</figcaption>
</figure>
W powyższym przykładzie:
<img>prezentuje obraz;<figcaption>dodaje opis, który dotyczy całej zawartości<figure>;- Oba elementy stanowią razem logiczną całość.
Przykłady zastosowań
Wstawianie ilustracji lub wykresu z podpisem
<figure>
<img src="wykres.png" alt="Wykres przedstawiający wzrost liczby użytkowników">
<figcaption>Wykres 1. Liczba użytkowników serwisu w latach 2020-2025.</figcaption>
</figure>
Fragment kodu z wyjaśnieniem
<figure>
<figcaption>Przykład 1: Funkcja pokazująca okno alert w JavaScript.</figcaption>
<pre><code>
function ostrzezenie() {
alert('Uwaga!');
}
</code></pre>
</figure>
Samodzielna tabela z opisem
<figure>
<table>
<tr><th>Miesiąc</th><th>Sprzedaż</th></tr>
<tr><td>Styczeń</td><td>500</td></tr>
<tr><td>Luty</td><td>700</td></tr>
</table>
<figcaption>Tablica 1: Sprzedaż w pierwszych miesiącach roku.</figcaption>
</figure>
Diagram lub schemat
<figure>
<img src="diagram-procesu.svg" alt="Schemat procesu biznesowego">
<figcaption>Rysunek 2: Schemat przebiegu procesu obsługi klienta.</figcaption>
</figure>
Najważniejsze cechy i dobre praktyki
- Podpis –
<figcaption>jest opcjonalny, ale zdecydowanie zalecany dla poprawy dostępności i czytelności; - Lokalizacja podpisu –
<figcaption>może znajdować się zarówno przed, jak i po zawartości<figure>; - Zagnieżdżanie – w jednym
<figure>można umieścić więcej niż jeden element, np. kilka zdjęć lub kod wraz z ilustracją; - SEO i dostępność – poprawne użycie
<figure>i<figcaption>pomaga wyszukiwarkom i czytnikom ekranu lepiej rozpoznać oraz zinterpretować zawartość strony.
Kiedy warto użyć <figure>
- Gdy potrzebujesz powiązać ilustrację lub inny dodatek z wyjaśnieniem,
- chcesz dodać podpis do zdjęcia lub diagramu,
- w przypadku samodzielnych jednostek informacji, które mogą być przywoływane w treści jako np. „Zobacz Rysunek 1”, „Patrz Przykład 3”.
Podsumowanie struktury
<figure>
<!-- zawartość, np. obraz, tabela, kod -->
<figcaption>podpis lub opis</figcaption>
</figure>
Element <figure> to nowoczesny, semantyczny sposób na logiczne powiązanie treści graficznej, tabelarycznej lub kodowej z jej podpisem i główną zawartością strony, zapewniający przejrzystość, elastyczność oraz lepszą dostępność dla użytkowników i wyszukiwarek.
