Element figure

> Dodaj do ulubionych

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, <i>Małe niedole pożycia małżeńskiego</i> </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.