Від автора: семантичні теги figure і figcaption часто використовуються в парі. Якщо ви досі не читали документацію з тегами, вже користувалися ними в проектах або поняття не маєте, навіщо вони потрібні, в цій статті я навів кілька порад, які допоможуть вам правильно застосовувати ці елементи.
Тег figure зазвичай використовується для вставки зображень:
Тег figure – замкнута одиниця контенту. Якщо ви перемістіть елемент трохи нижче на сторінці або в самий низ, це ніяк не вплине на його значення в документі. Тому потрібно пам’ятати, що не всі зображення можна вказувати в тезі figure.
Кілька зображень в тезі figure
Якщо зображення пов’язані між собою і подаються в загальному контексті, то в тег figure можна прописати кілька img.
Figure можна використовувати і з іншими тегами
Тег figure не обмежується лише зображеннями. Його можна використовувати з:
Блоками для коду,
Відео,
Аудіофайлами або
Рекламою.
Приклад вставки блоку з кодом тег figure:
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
Вкладеність одного figure в інший
Тег figure можна помістити всередину іншого тега figure. У коді нижче для поліпшення семантики був доданий ARIA атрибут role.
Dog breeds
Adorable Maltese Terrier
Cute black labrador
Правильне застосування figcaption
Тег figcaption являє собою підпис або легенду до тегу figure. Не завжди тегу figure потрібен figcaption. Однак у випадках, коли цей тег необхідний, він повинен бути першим або останнім всередині figure:
Three different breeds of dog.
Або:
Three different breeds of dog.
Якщо потрібно додати більше семантики зображення, можна використовувати теги h1 і p.
Puppy School
Championship Class of 2016
А ви знаєте, як ще можна використовувати теги figure і figcaption?
