<figure>

Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.

Wyświetlanie: block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść przepływu i opcjonalnie jeden <figcaption> na początku lub na końcu

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<figure>
  <img
    src="/collections/covers/kurs-html-css-od-podstaw.webp"
    alt="Ściana egipskiej świątyni podzielona jak układ strony: szeroki pas u góry, duży panel pośrodku i rząd mniejszych paneli na dole"
    width="300"
    height="200"
  >
  <figcaption>Rys. 1. Układ strony przypomina ścianę z kamiennych bloków.</figcaption>
</figure>

Podgląd

Definicja i zastosowanie

Element <figure> obejmuje treść, która ilustruje tekst główny, ale ma sens także poza nim: zdjęcie, diagram, wykres, listing kodu, cytat albo tabelę. Podpis dodajesz elementem <figcaption>, jako pierwszym lub ostatnim dzieckiem.

Dobry sprawdzian: czy tę ilustrację dałoby się przenieść na koniec rozdziału albo do aneksu, a tekst nadal miałby sens dzięki odwołaniu w stylu „zobacz rysunek 3”? Jeśli tak, to jest <figure>. Obrazek, który jest częścią zdania, albo ikona w przycisku nie potrzebują tego elementu.

Przeglądarki domyślnie odsuwają <figure> od krawędzi marginesem 40 pikseli z lewej i prawej strony. Podpis z <figcaption> staje się dostępną nazwą całej ilustracji, ale obraz w środku nadal potrzebuje własnego alt.

Składnia

<figure>
  …
  <figcaption>Podpis</figcaption>
</figure>

Atrybuty

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

Listing kodu z podpisem

HTML

<figure>
  <figcaption>Listing 2. Najprostszy dokument HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
  &lt;head&gt;&lt;title&gt;Moja strona&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;Cześć!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Podgląd

Cytat z autorem

HTML

<figure>
  <blockquote>
    <p>Najlepszy moment na naukę programowania był rok temu. Drugi najlepszy jest dziś.</p>
  </blockquote>
  <figcaption>Ola, absolwentka kursu JavaScript</figcaption>
</figure>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

figure {
  display: block;
  margin-block: 1em;
  margin-inline: 40px;
}

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

Podpis i alt pełnią różne role. alt zastępuje obraz, a <figcaption> go komentuje, więc nie powtarzaj w nich tego samego zdania.
Domyślny margines 40 pikseli z boków często psuje układ na telefonie. Wyzeruj go w CSS: figure { margin: 0; }.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs