Figury i podpisy (<figure>, <figcaption>)

Lekcja 9.7: Figury i podpisy (<figure>, <figcaption>)

Strona główna > Rozdział 9: Elementy semantyczne > Figury i podpisy (<figure>, <figcaption>)

Grupowanie treści ilustracyjnej z podpisem

Często na stronach internetowych umieszczamy treści, które ilustrują lub uzupełniają główny tekst, takie jak obrazki, diagramy, fragmenty kodu, cytaty czy wykresy. HTML5 wprowadził znaczniki <figure> i <figcaption>, aby semantycznie grupować takie treści wraz z ich podpisami.

Element <figure>

Element <figure> reprezentuje samodzielną jednostkę treści, często z podpisem, która jest przywoływana w głównym tekście, ale której pozycja względem tego tekstu nie jest kluczowa. Przeniesienie elementu <figure> w inne miejsce dokumentu (np. na koniec sekcji, do panelu bocznego) nie powinno zaburzyć głównego przepływu treści.

<figure> może zawierać:

Jeden lub więcej obrazków (<img>).
Fragmenty kodu (<pre><code>...</code></pre>).
Cytaty (<blockquote>).
Diagramy, wykresy (często jako <img>, <svg> lub <canvas>).
Audio lub wideo (<audio>, <video>).
Tabele (<table>).
Dowolną inną treść, która stanowi samodzielną ilustrację lub przykład.

Element <figcaption>: Podpis figury

Element <figcaption> służy do dostarczenia podpisu lub legendy dla treści zawartej w elemencie <figure>.

Powinien być umieszczony jako pierwsze lub ostatnie dziecko elementu <figure>.
Wewnątrz jednego <figure> może znajdować się co najwyżej jeden element <figcaption>.
Jest opcjonalny - nie każda figura musi mieć podpis.

Umieszczenie podpisu w <figcaption> zamiast w zwykłym paragrafie (<p>) pod obrazkiem tworzy silne semantyczne powiązanie między figurą a jej opisem, co jest korzystne dla SEO i dostępności.

Przykład z obrazkiem i podpisem:

<p>Na poniższym zdjęciu widać most Golden Gate w San Francisco.</p>

<figure>
  <img src="golden-gate.jpg" alt="Most Golden Gate o zachodzie słońca">
  <figcaption>Rys. 1: Most Golden Gate widziany od strony zatoki.</figcaption>
</figure>

<p>Most ten jest jednym z najbardziej rozpoznawalnych symboli Kalifornii...</p>

Na poniższym zdjęciu widać most Golden Gate w San Francisco.

(Obrazek: golden-gate.jpg)

Rys. 1: Most Golden Gate widziany od strony zatoki.

Most ten jest jednym z najbardziej rozpoznawalnych symboli Kalifornii...

Przykład z fragmentem kodu i podpisem:

<p>Aby wyświetlić komunikat w konsoli JavaScript, użyj funkcji <code>console.log()</code>, jak pokazano poniżej:</p>

<figure>
  <figcaption>List. 1: Wyświetlanie komunikatu w konsoli.</figcaption>
  <pre><code class="language-javascript">function powitaj(imie) {
  console.log("Witaj, " + imie + "!");
}

powitaj("Świecie"); // Wyświetli: Witaj, Świecie!</code></pre>
</figure>

W tym przypadku <figcaption> został umieszczony jako pierwsze dziecko <figure>.

Przykład z wieloma obrazkami w jednej figurze:

<figure>
  <img src="kot1.jpg" alt="Czarny kot">
  <img src="kot2.jpg" alt="Rudy kot">
  <img src="kot3.jpg" alt="Biały kot">
  <figcaption>Rys. 2: Różne umaszczenia kotów domowych.</figcaption>
</figure>

Jeden <figcaption> może opisywać całą grupę elementów wewnątrz <figure>.

Dlaczego nie używać po prostu <div> i <p>?

Chociaż można osiągnąć podobny wygląd za pomocą <div> dla kontenera i <p> dla podpisu, traci się wtedy ważne informacje semantyczne:

Przeglądarki i wyszukiwarki nie wiedzą, że dany paragraf jest podpisem do konkretnego obrazka/kodu.
Czytniki ekranu nie mogą łatwo powiązać podpisu z ilustracją.
Kod jest mniej czytelny i nie wyraża jasno intencji autora.

Użycie <figure> i <figcaption> rozwiązuje te problemy, dostarczając standardowego, semantycznego sposobu na grupowanie ilustracji z ich opisami.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Wstaw do dokumentu HTML obrazek przedstawiający logo HTML5. Umieść go wewnątrz elementu <figure> i dodaj podpis (<figcaption>) o treści "Logo HTML5".

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Figure i Figcaption - Przykład</title>
    <style>
        figure {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 20px;
            display: inline-block; /* Aby figura dopasowała się do zawartości */
            text-align: center;
        }
        figcaption {
            margin-top: 5px;
            font-style: italic;
            font-size: 0.9em;
            color: #333;
        }
        figure img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

<h1>Przykład użycia &lt;figure&gt; i &lt;figcaption&gt;</h1>

<p>Poniżej znajduje się oficjalne logo technologii HTML5:</p>

<figure>
  <!-- Zakładamy, że plik logo-html5.png istnieje -->
  <img src="logo-html5.png" alt="Logo HTML5 - pomarańczowa tarcza z cyfrą 5" width="128" height="128">
  <figcaption>Logo HTML5</figcaption>
</figure>

<p>Logo to symbolizuje nowoczesne standardy tworzenia stron internetowych.</p>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Umieść w elemencie <figure> fragment kodu HTML (użyj <pre><code>...</code></pre>) i dodaj do niego podpis w <figcaption>.
Stwórz <figure> zawierające cytat (<blockquote>) wraz z podpisem (<figcaption>) podającym autora cytatu.
Spróbuj umieścić <figcaption> jako pierwszy element wewnątrz <figure> i zaobserwuj, czy wpływa to na domyślny wygląd (zazwyczaj nie, ale można to kontrolować przez CSS).

Najczęściej zadawane pytania

Do czego służy znacznik <figure>?

Do reprezentowania samodzielnej jednostki treści ilustracyjnej (obrazek, kod, cytat, diagram), która jest powiązana z głównym tekstem, ale może być z niego wydzielona bez zaburzania przepływu.

Do czego służy znacznik <figcaption>?

Do dostarczenia podpisu lub legendy dla treści zawartej w elemencie <figure>. Powinien być pierwszym lub ostatnim dzieckiem <figure>.

Czy <figure> musi zawierać obrazek?

Nie. <figure> może zawierać różne typy treści, takie jak fragmenty kodu, cytaty, tabele, audio, wideo, a także obrazki.

Czy <figure> musi mieć <figcaption>?

Nie, element <figcaption> jest opcjonalny. Figura może istnieć bez podpisu, jeśli nie jest on potrzebny.

Jakie korzyści daje używanie <figure> i <figcaption>?

Tworzy silne semantyczne powiązanie między ilustracją a jej podpisem, co jest korzystne dla SEO (wyszukiwarki rozumieją kontekst) i dostępności (czytniki ekranu mogą poprawnie odczytać podpis).