figure — сложная графика

Тег <figure> используется для вставки на страницу изображений, видео, аудио и другого медиаконтента, а также добавления подписей и описания к этому контенту.

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

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

Показ изображения с подписью:

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

Вставка видео с описанием:

<figure>
  <video src="path/to/video.mp4" controls></video>
  <figcaption>Подпись к видео</figcaption>
</figure>

Отображение графиков и диаграмм:

<figure>
  <svg>
    ...
  </svg>
  <figcaption>Подпись к графику/диаграмме</figcaption>
</figure>

Показ кода с пояснением:

<figure>
  <pre>
    <code>
      // Код на языке JavaScript
      function sayHello() {
        console.log("Hello, World!");
      }
    </code>
  </pre>
  <figcaption>Код на JavaScript</figcaption>
</figure>

Группировка картинок в галерею:

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

Для чего использовать тег <figure>

• Сгруппировать изображения или другой мультимедиа контент с его описанием.
• Указать связь между изображением и его описанием, которое представляет тег <figcaption>.
• Создать контейнер, который можно стилизовать с помощью CSS, например, для добавления рамки вокруг изображения.
• Улучшить поисковую оптимизацию (SEO), так как <figure> является семантическим элементом.
• Улучшить доступность контента для пользователей, использующих скринридеры или другие вспомогательные технологии, поскольку <figure> предоставляет ясную связь между контентом и его описанием.

Нюансы

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