Элемент <figure>

Для добавления иллюстраций, графиков, диаграмм, фотографий применяется элемент <figure>. Его содержимое не ограничивается изображениями, допустимо вставлять видео, примеры кода, даже текст. Внутри <figure> при желании добавляется заголовок с помощью элемента <figcaption> до или после содержимого.

Элемент <figure> не должен быть связан с основным текстом, так что если его переместить в другое место, то смысл содержания не потеряется. К примеру, если добавить иллюстрацию, то в тексте на неё можно сослаться как «...изображена на рис. 2». Сам рисунок при этом может располагаться в другом месте, а не только идти сразу же после текста, главное, не забыть его подписать. И, наоборот, неверным шагом будет воспользоваться <figure> и сослаться на него как «смотри рисунок ниже». Потому что при перемещении иллюстрации искажается смысл текста.

В примере 1 показано применение <figure> для иллюстрации текста.

Пример 1. Использование <figure>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
 </head>
 <body>
  <p>Зубчатые механизмы используют для изменения параметров вращательного движения, 
   а также для преобразования вращательного движения в поступательное. Зубчатый
   механизм с круглыми колёсами и реечной передачей, используемый в стрелочных 
   электроприводах железных дорог, показан на рис. 4.</p>
  <figure>
   <img src="image/fig4.png" width="600" height="416" alt="Рис. 4">
   <figcaption>Рис. 4. Зубчатый
    механизм с круглыми колёсами и реечной передачей</figcaption>
   </figure>
 </body>
</html>

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

Вид картинки с заголовком

Рис. 1. Вид картинки с заголовком

Содержимое <figure> выравнивается по левому краю и к нему добавляются небольшие отступы, это заметно по картинке, она отступает немного вправо относительно левого края текста. Для изменения способа выравнивания, например, по центру, в стилях используем свойство text-align.

figure {
 text-align: center; /* Выравнивание по центру */
}

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 24.08.2018
Редакторы: Влад Мержевич