Порада: як правильно використовувати тег figure і тег figcaption

27

Від автора: семантичні теги figure і figcaption часто використовуються в парі. Якщо ви досі не читали документацію з тегами, вже користувалися ними в проектах або поняття не маєте, навіщо вони потрібні, в цій статті я навів кілька порад, які допоможуть вам правильно застосовувати ці елементи.

Тег figure зазвичай використовується для вставки зображень:

Порада: як правильно використовувати тег figure і тег figcaption

Тег figure – замкнута одиниця контенту. Якщо ви перемістіть елемент трохи нижче на сторінці або в самий низ, це ніяк не вплине на його значення в документі. Тому потрібно пам’ятати, що не всі зображення можна вказувати в тезі figure.

Кілька зображень в тезі figure

Якщо зображення пов’язані між собою і подаються в загальному контексті, то в тег figure можна прописати кілька img.

Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption

Figure можна використовувати і з іншими тегами

Тег figure не обмежується лише зображеннями. Його можна використовувати з:

Блоками для коду,

Відео,

Аудіофайлами або

Рекламою.

Приклад вставки блоку з кодом тег figure:

p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}

Вкладеність одного figure в інший

Тег figure можна помістити всередину іншого тега figure. У коді нижче для поліпшення семантики був доданий ARIA атрибут role.

Dog breeds
Порада: як правильно використовувати тег figure і тег figcaption
Adorable Maltese Terrier
Порада: як правильно використовувати тег figure і тег figcaption
Cute black labrador

Правильне застосування figcaption

Тег figcaption являє собою підпис або легенду до тегу figure. Не завжди тегу figure потрібен figcaption. Однак у випадках, коли цей тег необхідний, він повинен бути першим або останнім всередині figure:

Three different breeds of dog.
Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption

Або:

Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption
Порада: як правильно використовувати тег figure і тег figcaption
Three different breeds of dog.

Якщо потрібно додати більше семантики зображення, можна використовувати теги h1 і p.

Порада: як правильно використовувати тег figure і тег figcaption

Puppy School

Championship Class of 2016

А ви знаєте, як ще можна використовувати теги figure і figcaption?