Тег <figure>
Тег <figure> (укр. – “фігура”) використовується для групування контенту, який має власний зміст і може бути окремо ідентифікованим елементом на сторінці. Це зазвичай зображення, діаграми, таблиці, відео, ілюстрації або навіть мультимедійні елементи, що мають опис або підпис. Тег <figure> дозволяє зв’язувати контент із його описом, який зазвичай міститься в тегу <figcaption>.
Атрибути
Специфічні атрибути
Тег <figure> не має специфічних атрибутів.
Глобальні атрибути
- id — унікальний ідентифікатор для елемента. Наприклад:
<figure id="figure1">
<img src="image.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>- class — задає клас для застосування стилів через CSS. Наприклад:
<figure class="image-gallery">
<img src="image.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>- style — дозволяє застосувати інлайн-стилізацію до елемента. Наприклад:
<figure style="text-align: center;">
<img src="image.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>- title — текстовий опис для елемента, який може відображатися при наведенні курсора. Наприклад:
<figure title="Приклад зображення">
<img src="image.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>
Приклад використання
<figure>
<img src="cat.jpg" alt="Милий кіт">
<figcaption>Милий кіт на сонці</figcaption>
</figure><figure>
<video controls>
<source src="video.mp4" type="video/mp4">
Ваш браузер не підтримує відео.
</video>
<figcaption>Це відео про природу</figcaption>
</figure>Додаткові моменти
- Для кожної фігури, що містить зображення або мультимедіа, надавайте опис у тегу
<figcaption>, щоб покращити доступність для користувачів і пошукових систем. Це також сприяє SEO, оскільки дозволяє пошуковим системам краще розуміти контент. - Тег
<figure>може містити декілька елементів, таких як зображення і текст, графіки або відео, але головне — це те, що він об’єднує контент, який має своє значення і може бути виділений окремо від основного контенту. - Коли ви використовуєте
<figure>, пошукові системи можуть краще ідентифікувати зображення і мультимедіа контент. Важливо зазначити, що<figcaption>також допомагає з контекстом для пошукових систем, покращуючи видимість зображень і відео. - Для покращення доступності важливо надавати чіткі та зрозумілі описи в
<figcaption>, особливо для тих, хто використовує екранні читалки. Це дозволяє користувачам без зору чи з обмеженими можливостями отримувати точну інформацію про контент, який вони не можуть побачити. - Переконайтеся, що ваші зображення та інші мультимедійні елементи мають адаптивний дизайн. Це можна зробити, використовуючи CSS для налаштування розмірів та позиціонування елементів.
