Элемент <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; /* Выравнивание по центру */
}
Автор: Влад Мержевич
Последнее изменение: 14.02.2024