Ostatnio edytowany:

Korzeń sekcji typu "figure"

Autor: Virtual Patriot

Element figure reprezentuje korzeń sekcji typu figure.

Z założenia zawartość korzenia sekcji typu figure występująca w kodzie HTML powinna reprezentować treść, która to treść stanowi dodatkową, samodzielną, niezależną, tworzącą całość treść odnoszącą się do treści reprezentowanej przez zawartość, która opływa element HTML reprezentujący dany korzeń sekcji typu figure.

Przykład:

<article>
  <h1>Mój ulubiony kwiat</h1>
  <p>Moim ulubionym kwiatem jest róża.</p>

  <figure><!-- POCZĄTEK KORZENIA SEKCJI TYPU FIGURE -->
    <h1>Fotografia róży</h1>
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
  </figure><!-- KONIEC KORZENIA SEKCJI TYPU FIGURE -->

  <p>Ponieważ róża to symbol miłości.</p>
</article>

W naszym przykładowym kodzie HTML występuje jeden korzeń sekcji typu figure.

Wspomniany korzeń sekcji typu figure reprezentowany jest przez pierwszy element figure.

Zawartość naszego przykładowego korzenia sekcji typu figure reprezentuje treść w postaci fotografii róży, która to treść stanowi dodatkową treść odnoszącą się do treści reprezentowanej przez zawartość pierwszej sekcji zawartości typu article mówiącej nam o tym, jaki kwiat jest naszym ulubionym kwiatem. Wspomniana treść reprezentująca fotografię róży nie jest zależna od żadnej innej treści reprezentowanej przez pozostałą zawartość występującą w naszym przykładowym kodzie HTML, oznacza to, że gdy przeniesiemy w całości wspomnianą treść do zawartości innego dokumentu HTML, wspomniana treść nadal będzie stanowiła niezależną całość, czyli w tym wypadku fotografię róży, a treść reprezentowana przez pozostałą zawartość wspomnianej sekcji zawartości typu article nie utraci swojego znaczenia (treść reprezentowana przez zawartość wspomnianej sekcji zawartości typu article nadal będzie mówiła nam o tym, jaki kwiat jest naszym ulubionym kwiatem).

Ponadto jeżeli nie chcemy tworzyć dodatkowych sekcji zawartości oraz korzeni sekcji w zawartości interesującego nas elementu figure oraz nie chcemy, aby interesujący nas element figure posiadał swój własny tytuł reprezentowany przez element HTML posiadający z góry określoną rangę, wtedy możemy skorzystać z elementu figcaption.

Przykład:

<article>
  <h1>Mój ulubiony kwiat</h1>
  <p>Moim ulubionym kwiatem jest róża.</p>

  <figure><!-- POCZĄTEK KORZENIA SEKCJI TYPU FIGURE -->
    <figcaption>Fotografia róży</figcaption>
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
  </figure><!-- KONIEC KORZENIA SEKCJI TYPU FIGURE -->

  <p>Ponieważ róża to symbol miłości.</p>
</article>

Rezultat:

Mój ulubiony kwiat

Moim ulubionym kwiatem jest róża.

Fotografia róży
czerwona róża

Ponieważ róża to symbol miłości.

Element figcaption może wystąpić również jako ostatni element dziecko elementu figure. Ponadto element figure może posiadać tylko jeden element figcaption. Treść reprezentowana przez zawartość elementu figcaption z założenia powinna reprezentować nagłówek dla treści reprezentowanej przez zawartość elementu figure.

Przykład:

<article>
  <h1>Mój ulubiony kwiat</h1>
  <p>Moim ulubionym kwiatem jest róża.</p>

  <figure><!-- POCZĄTEK KORZENIA SEKCJI TYPU FIGURE -->
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    <figcaption>Fotografia róży</figcaption>
  </figure><!-- KONIEC KORZENIA SEKCJI TYPU FIGURE -->

  <p>Ponieważ róża to symbol miłości.</p>
</article>