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('Hello, world!');
}
</code>
</pre>
<figcaption>Пример функции на JavaScript, выводящей "Hello, world!" в консоль</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, но и делают контент более понятным и структурированным для пользователей.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ