HTML / HTML5
Załącznik <FIGURE, FIGCAPTION>
W jaki sposób oznaczyć w HTML5: ilustrację, diagram, zdjęcie, kod źródłowy, rysunek, rycinę, wykres, załącznik?
Załącznik
<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:
<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> <meta charset="UTF-8"> </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> <meta charset="UTF-8"> </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
<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> <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> <meta charset="UTF-8"> </code></pre> </figure>