Element <figure> w HTML5 jest używany do reprezentowania niezależnej treści, często związanej z głównym przepływem dokumentu, takiej jak ilustracje, diagramy, zdjęcia, kod źródłowy, i inne podobne treści, które są zwykle osadzane wewnątrz tego znacznika. Element ten pozwala na semantyczne grupowanie zawartości wizualnej wraz z opcjonalnym podpisem (<figcaption>), co ułatwia czytelnikom i przeglądarkom zrozumienie kontekstu i znaczenia danej treści.
Przykład użycia elementu <figure>
Poniższy przykład demonstruje użycie elementu <figure> do umieszczenia obrazu oraz kodu źródłowego z odpowiednimi podpisami.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia elementu figure w HTML5</title>
<style>
figure {
border: 1px solid #ddd; /* Dodaje ramkę dookół figure */
padding: 4px; /* Dodaje padding dla estetyki */
margin: auto; /* Centruje figure */
max-width: 80%; /* Ogranicza szerokość figure */
}
figcaption {
color: #666; /* Ustawia kolor tekstu dla figcaption */
font-style: italic; /* Kursywa dla figcaption */
text-align: center; /* Wyśrodkowanie tekstu podpisu */
}
</style>
</head>
<body>
<figure>
<img src="obrazek.jpg" alt="Przykładowy obrazek" style="width:100%;">
<figcaption>Przykładowy obrazek z opisem</figcaption>
</figure>
<figure>
<pre><code>// Przykładowy kod JavaScript
let message = 'Hello, World!';
console.log(message);</code></pre>
<figcaption>Przykład kodu JavaScript</figcaption>
</figure>
</body>
</html>
W tym przykładzie użyto dwóch różnych <figure> do zaprezentowania zarówno obrazu, jak i bloku kodu. Każdy z nich jest opatrzony podpisem za pomocą <figcaption>, który opisuje zawartość figury, zwiększając jej dostępność i zrozumienie kontekstu.
Podsumowanie
Element <figure> w HTML5 jest potężnym narzędziem, które pozwala twórcom stron internetowych na semantyczne grupowanie treści wizualnych lub multimedialnych wraz z ich opisami. Umożliwia to lepszą organizację treści, ułatwia dostępność, i pomaga w poprawnym interpretowaniu zawartości przez przeglądarki i czytniki ekranu. Pamiętając o odpowiednim użyciu <figure> i <figcaption>, można znacząco poprawić jakość i użyteczność stron internetowych.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.