Poznaj Programowanie

Tagi HTML: figure

Piotr Grochal 6 min. czytania

W dzisiejszym świecie web developmentu, gdzie semantyka HTML decyduje o dostępności, SEO i czytelności kodu, tag <figure> staje się nieocenionym narzędziem do profesjonalnego osadzania ilustracji, diagramów, listingów kodu czy cytatów. Tag <figure> grupuje samodzielne treści wizualne wraz z podpisem, co poprawia dostępność i zrozumienie struktury strony.

Ten przewodnik pokaże Ci praktyczne użycie <figure> na przykładach HTML, stylizację CSS oraz wskazówki JavaScript. Omówimy definicję, składnię, modele treści, style domyślne, zaawansowane zastosowania i najlepsze praktyki, abyś mógł wdrożyć go w swoich projektach już dziś.

Czym jest tag <figure> i po co go używać?

Element <figure> reprezentuje niezależną treść (np. ilustracje, schematy, diagramy, zdjęcia, listingi kodu, cytaty), związaną z głównym przepływem dokumentu, ale możliwą do traktowania jako samodzielna całość. W odróżnieniu od prostego <img>, <figure> pozwala dodać podpis przez <figcaption>, co czyni treść bardziej semantyczną i dostępną.

Kluczowe zalety <figure> –

  • semantyka – przeglądarki i technologie asystujące (np. czytniki ekranu) rozumieją relację między obrazem a opisem;
  • dostępność – ułatwia nawigację osobom z niepełnosprawnościami wzrokowymi;
  • SEO – wyszukiwarki lepiej indeksują opisy wizualne;
  • responsywność – łatwo stylizować układ i wyrównanie z użyciem CSS;
  • modularność – treść wewnątrz <figure> jest samodzielna i uzupełnia dokument, nie zaburzając jego sensu po usunięciu.

Według specyfikacji HTML5, <figure> obsługuje treść ogólną i wyczuwalną (flow content i palpable content), z obowiązkowymi znacznikami otwierającym i zamykającym. Interfejs DOM to HTMLElement.

Przeglądarki stosują domyślne style, które nadają elementowi wygląd „załącznika” z odstępami wokół. Poniżej przykładowe wartości:

figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

Aby szybko dobrać właściwy element do kontekstu, skorzystaj z porównania:

Element Kiedy używać Co daje Przykład
<figure> + <figcaption> dla samodzielnych treści wizualnych z podpisem semantyka, dostępność, powiązanie podpisu z treścią zdjęcie z opisem, wykres, listing kodu
<img> dla pojedynczego obrazu bez podpisu prosta ilustracja w treści ikona w akapicie
<div> dla layoutu/dekoracji bez znaczenia semantycznego elastyczny kontener bez roli semantycznej ramka tła, element dekoracyjny
<aside> dla wstawek luźno powiązanych z treścią oddziela materiały poboczne ramka „wiesz, że…”, notka poboczna

Składnia podstawowa i wymagania

Podstawowa struktura wygląda następująco:

<figure>
<!-- Zawartość: img, pre/code, table itp. -->
<figcaption>Opis figury (opcjonalny, ale pierwszy lub ostatni potomek)</figcaption>
</figure>

Pamiętaj o kluczowych regułach:

  • <figcaption> – musi być pierwszym lub ostatnim dzieckiem <figure>;
  • znaczniki otwierające/zamykające – <figure> zawsze wymaga pary tagów;
  • elementy potomne – dowolna treść ogólna, np. <img>, <pre>, <table>, <blockquote>.

Przykłady zastosowań – od prostych po zaawansowane

1. Ilustracja graficzna z podpisem (najpopularniejszy przypadek)

Idealne do zdjęć lub grafik. Zawsze łącz z <img src="..." alt="...">, aby zapewnić dostępność i opis alternatywny.

<figure>
<img src="st-tropez.jpg" alt="Fort w Saint-Tropez">
<figcaption>Fort w Saint-Tropez skąpany w zachodzie słońca.</figcaption>
</figure>

Poniżej przykładowa stylizacja CSS (pływanie po prawej, 30% szerokości):

figure {
float: right;
width: 30%;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
img {
width: 100%; /* dopasowanie obrazu do figury */
}

Efekt: elegancka „ramka” po prawej stronie tekstu.

2. Listing kodu źródłowego

Przydatne w tutorialach programistycznych, gdy chcesz oznaczyć fragment jako samodzielny blok z podpisem.

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

Umieszczenie <figcaption> nad kodem często zwiększa czytelność i ułatwia nawigację.

3. Schemat lub diagram (z tabelą)

W przypadku danych strukturalnych możesz połączyć figurę z tabelą i opisem:

<figure>
<table>
<tr><th>Element</th><th>Opis</th></tr>
<tr><td>figure</td><td>Grupa wizualna</td></tr>
</table>
<figcaption>Porównanie elementów HTML5.</figcaption>
</figure>

4. Cytat jako samodzielna figura

Możesz osadzić cytat i powiązać go z podpisem autora:

<figure>
<blockquote cite="https://example.com">
Sens życia, wszechświata i w ogóle.
</blockquote>
<figcaption>— Douglas Adams</figcaption>
</figure>

Dodatkowo, w podpisie możesz umieścić kontekst, źródło lub miniaturę autora.

5. Zaawansowany przykład – galeria responsywna z JavaScript

Poniżej prosty komponent galerii: figura z obrazem i podpisem.

<figure class="gallery-item">
<img src="how2html.png" alt="Logo how2html" title="Logo">
<figcaption>Logo how2html – semantyczne obrazki w akcji.</figcaption>
</figure>

Przykładowy CSS responsywny:

.gallery-item {
display: block;
margin: 1em auto;
max-width: 500px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.gallery-item img {
width: 100%;
height: auto;
}
.gallery-item figcaption {
padding: 1em;
background: #f9f9f9;
text-align: center;
font-style: italic;
}
@media (max-width: 768px) {
.gallery-item {
margin-left: 1em;
margin-right: 1em;
}
}

Dodaj prostą interakcję w JavaScript (kliknięcie powiększa podpis):

document.querySelectorAll('figure.gallery-item').forEach(figure => {
figure.addEventListener('click', () => {
const caption = figure.querySelector('figcaption');
caption.style.fontSize = caption.style.fontSize === '1.5em' ? '1em' : '1.5em';
caption.style.transition = 'font-size 0.3s ease';
});
});

Efekt: interaktywna i dostępna figura, idealna do bloga lub dokumentacji.

Najlepsze praktyki i pułapki

W pracy z <figure> pamiętaj o kluczowych zasadach:

  • atrybut alt – zawsze dodawaj do <img>, by zapewnić dostępność i sensowny opis alternatywny;
  • umiar – używaj <figure> wyłącznie dla treści samodzielnych, a nie dekoracyjnych (w dekoracjach lepszy będzie <div>);
  • pozycjonowanie – sięgaj po float, grid lub flexbox zamiast historycznych klas typu div.figure;
  • jeden <figcaption> – dokładnie jeden podpis i to jako pierwszy albo ostatni potomek figury;
  • testy dostępności – weryfikuj rozwiązanie narzędziami WAVE, Lighthouse lub czytnikiem ekranu;
  • alternatywy – użyj <aside> dla wstawek luźno powiązanych z główną treścią;
  • kompatybilność – pełne wsparcie od HTML5 w nowoczesnych przeglądarkach.