figure

Element figure reprezentuje zawartość, którą powinna być dodatkowa, samodzielna, 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
• każda inna treść, która po zmianie miejsca w kodzie HTML dokumentu HTML nadal stanowiłaby samodzielną, tworzącą całość treść oraz która po zmianie miejsca w kodzie HTML dokumentu HTML nie wpłynęłaby w żaden sposób na znaczenie treści reprezentowanej przez zawartość, która opływała dany element figure

• Progres V - Korzeń sekcji dla sekcji zawartości
• Progres VI - Korzeń sekcji typu "figure"

kategoria ogólna

• zawartość opływająca

• korzeń sekcji

• zawartość namacalna

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, jak również ewentualnie dokładnie jeden element 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 dokładnie jeden element "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".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<figure> ... </figure>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

• block (jeżeli przeglądarka internetowa interpretuje element figure)

• inline (jeżeli przeglądarka internetowa nie interpretuje elementu figure)

/* jeżeli przeglądarka internetowa interpretuje element "figure" */
figure {
  display:block;
  margin-top:1em;
  margin-right:40px;
  margin-bottom:1em;
  margin-left:40px;
}

tak

tak

tak

tak

tak, lecz od wersji 9

tak

Zobacz więcej informacji o interpretacji elementu figure.