Тег figure в HTML: что это такое?

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<figure>

Это изображениелицензировано подCC BY 4.0

Тег figure в HTML используется для группировки самодостаточного контента, такого как иллюстрации, диаграммы, фотографии, листинги кода и т.д. Этот тег часто используется вместе с тегом figcaption, который добавляет подпись или описание к содержимому.

Синтаксис тега figure

<figure>
  <img src="image.jpg" alt="Описание изображения">
  <figcaption>Подпись к изображению</figcaption>
</figure>

Атрибуты тега figure

Тег figure поддерживает только глобальные атрибуты.

Примеры использования тега figure

Изображение с подписью

<figure>
  <img src="cat.jpg" alt="Рыжий кот">
  <figcaption>Рыжий кот по имени Барсик</figcaption>
</figure>

Несколько изображений в одном figure

<figure>
  <img src="dog1.jpg" alt="Собака породы лабрадор">
  <img src="dog2.jpg" alt="Собака породы хаски">
  <figcaption>Популярные породы собак</figcaption>
</figure>

Блок кода с подписью

<figure>
  <code>console.log("Hello, World!");</code>
  <figcaption>Пример простой программы на JavaScript</figcaption>
</figure>

Советы по использованию тега figure

Используйте figure только для самодостаточного контента, который напрямую связан с основным содержимым страницы.
Можно группировать несколько связанных изображений в одном теге figure.
Тег figure можно использовать не только для изображений, но и для других типов контента.
Всегда добавляйте подписи с помощью тега figcaption для лучшей доступности.
Размещайте figcaption либо в начале, либо в конце figure, но не в середине.

Часто задаваемые вопросы (FAQ)

1 Чем отличается figure от div?

Тег figure имеет семантическое значение и используется специально для группировки иллюстраций, диаграмм, фото и подписей к ним, в то время как div является универсальным контейнером без специального семантического значения.

2 Обязательно ли использовать figcaption внутри figure?

Нет, использование figcaption не является обязательным, но рекомендуется для лучшей семантики и доступности контента.

3 Можно ли помещать несколько изображений в один figure?

Да, тег figure может содержать несколько связанных между собой изображений или других элементов контента.

Заключение

Тег figure является важным семантическим элементом HTML, который помогает лучше структурировать контент и делает его более доступным для пользователей и поисковых систем. Правильное использование этого тега в сочетании с figcaption улучшает организацию и восприятие контента на веб-странице.

Для получения дополнительной информации о теге figure, рекомендуем ознакомиться с официальной документацией на MDN.

Предыдущая страница

Следующая страница