Element HTML figure

Element HTML figure reprezentuje listingi kodu źródłowego, obrazy, schematy, diagramy, rysunki, ilustracje, zdjęcia itp. samodzielne elementy, do których odnosi się treść strony internetowej.

Obiekt reprezentowany przez element figure jest samodzielny w tym sensie, że jego usunięcie z dokumentu nie miałoby wpływu na strukturę jego treści. Na przykład fragment kodu opisywany w akapicie nie powinien być umieszczony w elemencie figure, natomiast listing kodu źródłowego przedstawiający w całości omawiany na stronie program – tak.

Opis reprezentowanego obiektu można umieścić w elemencie figcaption, który powinien być pierwszym lub ostatnim dzieckiem elementu figure. Na stronie internetowej ukazywana jest zawartość pierwszego elementu figcatpion będącego dzieckiem elementu figure.

Przykłady użycia elementu HTML figure

Listing kodu źródłowego

<p>Zmienne i stałe można definiować za pomocą słów kluczowych <code>var</code>, <code>let</code> i <code>const</code>.</p>
<figure>
    <pre><code>var nazwa = wartość;
    let nazwa = wartość;
    const nazwa = wartość;</code></pre>
    <figcaption>Deklaracje zmiennych i stałej za pomocą słów kluczowych <code>var</code>, <code>let</code> i <code>const</code></figcaption>
</figure>

Ilustracja graficzna

<figure>
    <img src="kondensatory.jpeg" alt="Zdjęcia różnych rodzajów kondensatorów.">
    <figcaption>Rożne rodzaje kondensatorów. Od lewej: szklany, mikowy, ceramiczny, tantalowy</figcaption>
</figure>

Schemat

<p>Krzywa trendu wyraźnie pokazuje wzrost w ciągu ostatnich dwóch miesięcy.</p>
<figure>
    <img src="trend.jpeg" alt="Krzywa przedstawiająca aktualny trend.">
    <figcaption>Krzywa trendu pokazująca, że w ciągu ostatnich dwóch miesięcy odnotowano wyraźny wzrost</figcaption>
</figure>

Cytat

<figure>
    <figcaption>Honoriusz Balzac, <cite>Małe niedole pożycia małżeńskiego</cite> </figcaption>
    <blockquote>
        Kto się rządzi uczuciem, nie rządzi się rozumem. Uczucie nie jest rozumowaniem, rozum nie jest przyjemnością, a przyjemność nie ma nic wspólnego z rozsądkiem.
    </blockquote>
</figure>

Specyfikacja

Modele treści HTML5	Treść ogólna, treść wyczuwalna
Elementy nadrzędne	Wszystkie elementy, w których można używać elementów treści ogólnej
Elementy potomne	Element `figcaption` i elementy treści ogólnej w dowolnej kolejności lub same elementy treści ogólnej
Znaczniki	Znaczniki otwierający i zamykający są obowiązkowe
Interfejs DOM	`HTMLElement`

Atrybuty obowiązkowe

Element HTML figure nie ma atrybutów obowiązkowych.

Atrybuty opcjonalne

Element figure obsługuje atrybuty globalne i atrybuty zdarzeniowe.

Element figure