Создание подписей изображений с использованием элементов фигур

2 февраля 2017 | Опубликовано в css | 1 Комментарий »

Создается впечатление, что многие разработчики слишком часто используют элемент фигур HTML5, оборачивая в него все изображения, так же, как те, кто только познакомился с элементом блока, используют его там, где надо и где не надо. Но элемент фигуры подходит не для всех изображений.

Перед использованием элемента фигуры следует спросить себя: «Если переместить этот элемент фигуры из его текущего окружения и использовать его в другом месте, будет ли понятно, что это такое?»

Обратите внимание, что элемент фигуры можно применить не только к изображениям: элементы видео и графики оба могут располагаться в элементах фигур. Но, как и всегда, важен ответ на вопрос. Логотипы и другие виды декоративных изображений не нужно располагать в элементах фигур.

Подводя итог, если при перемещении на другую страницу элемент фигуры перестает быть понятным, не стоит использовать элемент фигуры для этого содержимого. Обычно это означает, что у содержимого элемента фигуры должна быть подпись. И как раз для этого в HTML5 есть элемент подписи фигуры, который используется следующим образом:

<figure>
        <img src="paradise-pool.jpg" style="width: 100%; height: auto;">
        <figcaption>Edge of Virgin Gorda</figcaption>
</figure>

Код CSS ниже может быть применен, если элемент фигуры используется только в одном месте на странице или на всем сайте:

figure, figure img {
        margin-bottom: 1rem;
        text-align: center;
}

Так как подписи фигуры — блочные элементы, которым легко задавать свойства, они могут быть использованы для разных целей: их можно анимировать, даже размещать в трехмерном пространстве.

Использование элемента подписи фигур и атрибута подписи

Разработчики иногда путают назначение элемента подписи фигур и атрибута подписи. Их роли следующие:

alt (атрибут подписи) – это описание изображения, значение которого должно быть выбрано так, чтобы дать пользователю представление о том, что представлено на изображении, даже если пользователь не видит само изображение.
<figcaption> (элемент подписи) — это подпись для содержимого <figure> (элемента фигуры). Ее текст может совпадать со значением атрибута подписи, хотя это маловероятно.

То есть, изображения могут описываться и подписываться следующим образом:

<figure>
        <img src="sunflowers-blue.jpg" alt="Картина маслом, изображающая подсолнухи на синем фоне">
        <img src="sunflowers-yellow.jpg" alt="Картина маслом, изображающая подсолнухи на желтом фоне">
        <figcaption>Цикл картин «Подсолнкхи» нидерландского художника Винсента ван Гога </figcaption>
</figure>