Figure

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.

Scroll to Top