Załącznik <figure>

<figure>...</figure>

Załącznik definiuje samodzielną część dokumentu, do której następują odwołania z głównej treści jako do pojedynczej jednostki. Może służyć do oznaczania: ilustracji, diagramów, zdjęć, wycinków kodu źródłowego itp. W obszernych opracowaniach naukowych zwykle podaje się spis wszystkich ilustracji bądź diagramów, występujących w całej pracy.

O tym, czy dany element nadaje się do oznaczenia go jako załącznik, najlepiej zdecydować, zadając sobie pytanie: czy moglibyśmy go przenieść na inną podstronę serwisu bez utraty spójności głównego tekstu dokumentu? Bardzo podobne przeznaczenie ma element ASIDE, jednak w odróżnieniu od FIGURE, jego zawartość jest tylko nieznacznie powiązana tematycznie z główną treścią. Na dobrą sprawę taką wstawkę (ASIDE) moglibyśmy zupełnie usunąć z witryny, podczas gdy załącznik (FIGURE) możemy co najwyżej przenieść na inną podstronę, bo inaczej dokument utraciłby spójność.

Przykład <figure>

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p>
<figure id="listing1">
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie znacznika FIGURE mogłoby być raczej niewłaściwe:

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Aby to zrobić, wystarczy posłużyć się następującym kodem źródłowym:</p>
<pre><code>
	&lt;meta charset="UTF-8"&gt;
</code></pre>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Gdybyśmy w tym przypadku usunęli fragment przykładowego kodu źródłowego, tekst utraciłby spójność.

Podpis załącznika <figcaption>

<figure>
	<figcaption>...</figcaption>
</figure>

Dodaje podpis do załącznika. Może on być umieszczony na początku albo na końcu zawartości. Tego typu podpisy są powszechne np. w różnego rodzaju opracowaniach naukowych, gdzie każda ilustracja bądź wykres są zatytułowane i zwykle oznaczone kolejnym numerem. W takiej pracy można często znaleźć spis wszystkich tego typu załączników. Znajdują się w nim właśnie załączone wcześniej podpisy.

Przykład <figure, figcaption>

<figure>
	<img src="42.jpg" alt="Liczba 42">
	<figcaption>Sens życia, wszechświata i w ogóle 😉</figcaption>
</figure>

<figure id="listing1">
	<figcaption>Przykład 1. Deklaracja strony kodowej w HTML5</figcaption>
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>