7.1 Елемент <figure>
Використання тегів <figure> і <figcaption> в HTML надає семантичний спосіб додавання зображень та інших мультимедійних елементів з підписами до них. Ці теги допомагають покращити структуру контенту, зробити його більш доступним і зрозумілим як для користувачів, так і для пошукових систем. Розглянемо ці елементи детальніше.
Елемент <figure> використовується для позначення самостійного вмісту, що ілюструє або пояснює решту частини документа. Він може містити зображення, діаграму, відео, аудіо, таблицю або навіть блок коду. Зазвичай елемент <figure> використовується разом з елементом <figcaption>, який додає підпис до вмісту <figure>.
Синтаксис
<figure>
<!-- Тут може бути будь-який мультимедійний елемент, наприклад, зображення -->
</figure>
Приклади використання:
Приклад 1: Зображення з підписом
<figure>
<img src="example.jpg" alt="Приклад зображення">
<figcaption>Підпис до зображення, що пояснює його зміст</figcaption>
</figure>
Приклад 2: Таблиця з підписом
<figure>
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Дані 1</td>
<td>Дані 2</td>
</tr>
</table>
<figcaption>Підпис до таблиці</figcaption>
</figure>
7.2 Елемент <figcaption>
Елемент <figcaption> використовується для додавання підпису до вмісту елемента <figure>. Він може бути розташований як перед вмістом <figure>, так і після нього, залежно від уподобань розробника або вимог дизайну.
Синтаксис
<figure>
<!-- Вміст елемента figure -->
<figcaption>Підпис до вмісту</figcaption>
</figure>
Приклади використання:
Приклад 1: Підпис після зображення
<figure>
<img src="landscape.jpg" alt="Пейзаж">
<figcaption>Краєвид з горами і озером</figcaption>
</figure>
Приклад 2: Підпис перед зображенням
<figure>
<figcaption>Краєвид з горами і озером</figcaption>
<img src="landscape.jpg" alt="Пейзаж">
</figure>
7.3 Доступність і SEO
Використання елементів <figure> і <figcaption> покращує доступність та SEO вашого сайту. Програми для читання екрану, які використовують люди з обмеженими можливостями, краще розуміють контекст зображення завдяки семантичному тегу <figcaption>. Пошукові системи також враховують структуру HTML-документа, що допомагає покращити індексування і рейтинг сторінки.
Приклади використання в різних контекстах:
Приклад 1: Включення діаграми
<figure>
<img src="chart.png" alt="Діаграма, що демонструє ріст продажів">
<figcaption>Діаграма, що демонструє ріст продажів за останній квартал</figcaption>
</figure>
Приклад 2: Відеоконтент з підписом
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Ваш браузер не підтримує відео.
</video>
<figcaption>Приклад відео, що демонструє роботу продукту</figcaption>
</figure>
Приклад 3: Код з поясненням
<figure>
<pre>
<code>
function helloWorld() {
console.log('Привіт, світ!');
}
</code>
</pre>
<figcaption>Приклад функції на JavaScript, що виводить "Привіт, світ!" у консоль</figcaption>
</figure>
7.4 Стиль і оформлення за допомогою CSS
Стилізація елементів <figure> і <figcaption> за допомогою CSS дозволяє створити привабливе візуальне оформлення і покращити сприйняття контенту.
Приклад з використанням стилів:
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>Чудовий вид на природу</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Природа">
<figcaption>Чудовий вид на природу</figcaption>
</figure>
Використання елементів <figure> і <figcaption> надає семантичний і структурований спосіб додавання мультимедійного контенту з підписами на веб-сторінки. Ці елементи не тільки покращують доступність і SEO, але й роблять контент більш зрозумілим і структурованим для користувачів.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ