Классы Bootstrap для стилизации figure и figcaption

В этой статье познакомимся с классами фреймворка Bootstrap 4, предназначенными для добавления базовых CSS стилей к HTML элементу figure.
Назначение HTML элемента figure
Элемент figure был добавлен в HTML5 и предназначен для разметки контента (изображения, таблицы, фрагмента кода), смысл которого может быть понятен и вне документа, в котором он расположен.
Обычно контент элемента figure сопровождается текстовой надписью, которая размечается с помощью HTML элемента figcaption.
Классы Bootstrap, добавляющие к элементу figure стили
В Bootstrap 4 имеются стили для базового оформления HTML элемента figure.
В качестве примера рассмотрим элемент figure, состоящий из изображения (img) и текстового заголовка (figure-caption).
Для применения этих стилей необходимо выполнить следующее:
- добавить класс figure к html-элементу figure;
- добавить класс figure-img к элементу img;
- добавить класс figure-caption к элементу figure-caption.
Элемент figure, имеющий базовое оформление:
<!-- Элемент figure, к которому добавлен Bootstrap класс figure -->
<figure class="figure">
<!-- Изображение -->
<img src="image.png" class="img-fluid figure-img" alt="">
<!-- Текстовая надпись -->
<figcaption class="figure-caption">Описание рисунка</figcaption>
</figure>

Во фреймворке Bootstrap 4 изображение, помещённое в HTML-элемент figure, автоматически не становится адаптивным. Поэтому, кроме figure-img к тегу img необходимо добавить ещё класс img-fluid.
HTML код элемента figure, изображение которого имеет скруглённые углы:
<figure class="figure">
<!-- Углы изображения скруглены с помощью стилей, добавленных к нему посредством класса rounded -->
<img src="image.png" class="img-fluid figure-img rounded" alt="">
<figcaption class="figure-caption">Описание рисунка</figcaption>
</figure>
Выравнивание текстовой надписи
Выровнять надпись figcaption относительно изображения, расположенного в figure, можно с помощью одного из следующих классов:
- text-left (по левому краю);
- text-center (по центру);
- text-right (по правому краю).
Например, figure с текстовой надписью, выровненной по правому краю:
<figure class="figure">
<img src="image.png" class="img-fluid figure-img" alt="">
<!-- Надпись, выровненная по правому краю -->
<figcaption class="figure-caption text-right">...</figcaption>
</figure>

Figure с текстовой надписью figcaption, выровненной по центру:
<figure class="figure">
<img src="image.png" class="img-fluid figure-img" alt="">
<!-- Надпись, выровненная по правому краю -->
<figcaption class="figure-caption text-center">...</figcaption>
</figure>
Кроме поисковых роботов семантическая разметка ещё используется в различных вспомогательных программах (например, программах чтения с экрана). Такая разметка позволяет программе более точно понять, что и где у вас расположено. В результате, это позволяет пользователю более просто и удобно с ней взаимодействовать. Эти программы, например, используют люди с ограниченными возможностями.
Если вам это не нужно, то можете не размечать так. Тут уже решайте сами, нужно ли вам это или нет. Например, он используется на zen.yandex.ru.
В HTML спецификации элемент figure предлагают использовать для разметки содержимого, которое является важным, но его положение в тексте тесно не связано с предыдущим и последующим содержимым. Его можно перенести в другое место основного содержимого документа. Это его семантический смысл. Т.е. если контент удовлетворяет этому смыслу, то его следует разметить с помощью figure. Кроме этого, он часто используется в сочетании с элементом figcaption. Figcaption используется для разметки текста, который используется в качестве заголовка или описания для figure.
Он применяется не только для изображений, с помощью него вы можете также выделять диаграммы, аудио, графики, таблицы, код и т.д.