<figure> в HTML: добавление подписей к медиафайлам

HTML тег <figure> предназначен для размещения медиа-содержимого, такого как изображения или видео, и связанного с ним описания. Он представляет собой контейнер, который помогает визуально ограничить и организовать содержимое на веб-странице.

Пример использования тега <figure> с изображением:

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

Пример использования тега <figure> с видео:

    <figure>
      <video src="video.mp4" controls>
        Ваш браузер не поддерживает видео тег.
      </video>
      <figcaption>Описание видео</figcaption>
    </figure>
  

Пример использования тега <figure> с кодом:

    <figure>
      <pre>
        <code>
          function sum(a, b) {
            return a + b;
          }
        </code>
      </pre>
      <figcaption>Пример кода</figcaption>
    </figure>
  

Использование тега <figure> позволяет логически объединить контент, связанный с медиа-содержимым, и также помогает улучшить доступность и семантику веб-страницы.