<figure>

Элемент <figure> (от англ. figure — рисунок, иллюстрация) используется для группирования любых элементов, например, изображений и подписей к ним. <figure> не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.

Синтаксис

<figure>
...
</figure>

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>FIGURE</title>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="image/thumb1.webp" width="120" alt=""></p>
    <figcaption>Шато-де-Флер</figcaption>
   </figure>
   <figure>
    <p><img src="image/thumb2.webp" width="120" alt=""></p>
    <figcaption>Купеческий клуб</figcaption>
   </figure>
  </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование figure