Ostatnio edytowany:

figure

Autor: Virtual Patriot

Przeznaczenie elementu figure

Element figure reprezentuje zawartość, którą powinna być dodatkowa, samodzielna, niezależna, tworząca całość treść odnosząca się do treści reprezentowanej przez zawartość, która opływa dany element figure. Zawartością elementu figure może być: zdjęcie, diagram, ilustracja, kod jednego z języków programowania oraz każda inna treść, która po zmianie miejsca w kodzie HTML dokumentu HTML nadal stanowiłaby samodzielną, niezależną, tworzącą całość treść oraz która po zmianie miejsca w kodzie HTML wspomnianego dokumentu HTML nie wpłynęłaby w żaden sposób na znaczenie treści reprezentowanej przez zawartość, która opływała wspomniany element figure.

Dodatkowe techniczne informacje o elemencie figure

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<main>
  <figure>
    <figcaption>Przykładowe reguły CSS</figcaption>

    <pre>
      body {
        background-color:red;
      }
    </pre>

    <pre>
      div {
        background-color:blue;
      }
    </pre>
  </figure>
</main>

Kontekstem zewnętrznym przykładowego elementu "figure" jest element "main". Wspomniany element "main" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "main", jest prawidłowym kontekstem zewnętrznym dla elementu "figure".

kontekst wewnętrzny
zawartość opływająca (wyłącznie po lub wyłącznie przed dokładnie jednym ewentualnym elementem figcaption)

Przykładowy Kod HTML

<main>
  <h1>Przykładowe reguły CSS</h1>

  <figure>
    <pre>
      body {
        background-color:red;
      }
    </pre>

    <pre>
      div {
        background-color:blue;
      }
    </pre>
  </figure>
</main>

Kontekstem wewnętrznym przykładowego elementu "figure" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "pre" oraz element "pre", jest prawidłowym kontekstem wewnętrznym dla elementu "figure".

Przykładowy Kod HTML

<main>
  <figure>
    <figcaption>Przykładowe reguły CSS</figcaption>

    <pre>
      body {
        background-color:red;
      }
    </pre>

    <pre>
      div {
        background-color:blue;
      }
    </pre>
  </figure>
</main>

Kontekstem wewnętrznym przykładowego elementu "figure" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które występują po elemencie "figcaption", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "figcaption", element "pre" oraz element "pre", jest prawidłowym kontekstem wewnętrznym dla elementu "figure".

Przykładowy Kod HTML

<article>
  <h1>Mój ulubiony owoc</h1>
  <p>Moim ulubionym owocem jest czereśnia.</p>

  <figure>
    <img src="owoc-01.png" alt="czereśnia dojrzała">
    <img src="owoc-02.png" alt="czereśnia niedojrzała">
    <figcaption>Zdjęcia czereśni</figcaption>
  </figure>
</article>

Kontekstem wewnętrznym przykładowego elementu "figure" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które występują przed elementem "figcaption", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "img", element "img" oraz element "figcaption", jest prawidłowym kontekstem wewnętrznym dla elementu "figure".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<figure> ... </figure>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu figure

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

Interpretacja elementu figure

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .