Создание подписей изображений с использованием элементов фигур
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>
Если элемент подписи фигур и атрибут подписи могут быть одинаковыми, атрибут подписи должен присутствовать, но без значения, например, таким образом:
<img src="yellow-submarine.jpg" alt>
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Немного сумасшествия в иллюстрациях Iza Dudzik
-
Насыщенные красные оттенки в веб-дизайне
-
Используем необычные шрифты для заполнения макета сайта
-
Постеры WWF о защите природы
-
Бесплатные фотографии аттракционов
-
Текстовый гранж-эффект в Adobe Photoshop
-
Тема ретро в веб-дизайне
-
Бесплатные визитные карточки в векторном формате
-
Стильные обложки для CD и винила
-
Бесплатные шабоны для полиграфии в женственном стиле
-
Создание бокового меню
-
Рисуем револьвер в Adobe Illustrator
-
Стильные страницы "О нас"
-
Сказочные иллюстрации для вдохновения
Самые комментируемые
- 50 прикольных страниц ошибки 404
88
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
56
- Рисуем животных: кошки и их анатомия
53