7.1 Element <figure>
Użycie znaczników <figure> i <figcaption> w HTML zapewnia semantyczny sposób
dodawania obrazów i innych elementów multimedialnych z podpisami. Te znaczniki pomagają poprawić strukturę treści,
uczynić ją bardziej dostępną i zrozumiałą zarówno dla użytkowników, jak i dla wyszukiwarek. Przyjrzyjmy się tym elementom bliżej.
Element <figure> służy do oznaczania niezależnej zawartości, która ilustruje lub
wyjaśnia resztę dokumentu. Może zawierać obraz, diagram, wideo, audio, tabelę, a nawet blok kodu.
Zazwyczaj element <figure> używany jest wraz z elementem <figcaption>,
który dodaje podpis do zawartości <figure>.
Składnia
<figure>
<!-- Tutaj może być każdy element multimedialny, na przykład obraz -->
</figure>
Przykłady użycia:
Przykład 1: Obraz z podpisem
<figure>
<img src="example.jpg" alt="Przykład obrazu">
<figcaption>Podpis do obrazu wyjaśniający jego treść</figcaption>
</figure>
Przykład 2: Tabela z podpisem
<figure>
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>
<figcaption>Podpis do tabeli</figcaption>
</figure>
7.2 Element <figcaption>
Element <figcaption> służy do dodawania podpisu do zawartości elementu
<figure>. Może być umieszczony przed zawartością <figure> lub po niej,
w zależności od preferencji twórcy lub wymagań projektowych.
Składnia
<figure>
<!-- Zawartość elementu figure -->
<figcaption>Podpis do zawartości</figcaption>
</figure>
Przykłady użycia:
Przykład 1: Podpis po obrazie
<figure>
<img src="landscape.jpg" alt="Krajobraz">
<figcaption>Piękny krajobraz z górami i jeziorem</figcaption>
</figure>
Przykład 2: Podpis przed obrazem
<figure>
<figcaption>Piękny krajobraz z górami i jeziorem</figcaption>
<img src="landscape.jpg" alt="Krajobraz">
</figure>
7.3 Dostępność i SEO
Używanie elementów <figure> i <figcaption> poprawia dostępność i SEO
twojej strony. Programy do odczytu ekranu, używane przez osoby z ograniczeniami, lepiej rozumieją kontekst
obrazu dzięki semantycznemu znacznikowi <figcaption>. Wyszukiwarki również biorą pod uwagę strukturę
dokumentu HTML, co pomaga poprawić indeksację i ranking strony.
Przykłady użycia w różnych kontekstach:
Przykład 1: Osadzanie diagramu
<figure>
<img src="chart.png" alt="Diagram pokazujący wzrost sprzedaży">
<figcaption>Diagram pokazujący wzrost sprzedaży w ostatnim kwartale</figcaption>
</figure>
Przykład 2: Treść wideo z podpisem
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje wideo.
</video>
<figcaption>Przykład wideo demonstrującego działanie produktu</figcaption>
</figure>
Przykład 3: Kod z objaśnieniem
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>Przykład funkcji w JavaScript wyświetlającej "Hello, world!" w konsoli</figcaption>
</figure>
7.4 Styl i dekoracja z CSS
Stylizacja elementów <figure> i <figcaption> za pomocą CSS pozwala stworzyć
atrakcyjny wygląd wizualny i poprawić odbiór treści.
Przykład z użyciem stylów:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>Piękny widok na naturę</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Natura">
<figcaption>Piękny widok na naturę</figcaption>
</figure>
Użycie elementów <figure> i <figcaption> zapewnia semantyczny
i zorganizowany sposób dodawania treści multimedialnych z podpisami na strony internetowe. Te elementy nie tylko
poprawiają dostępność i SEO, ale także czynią treść bardziej zrozumiałą i zorganizowaną dla użytkowników.
GO TO FULL VERSION