НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

HTML Тег <figure>


Приклад

Використовуйте елемент <figure> для позначення фотографії в документі та елемент <figcaption> для визначення підпису до фотографії:

<figure>
  <img src="../images/pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Спробуйте самі »

Більше прикладів "Спробуйте самі" далі.


Визначення та використання

Тег <figure> визначає самодостатній вміст, як-от ілюстрації, діаграми, фотографії, переліки кодів тощо.

Хоча вміст елемента <figure> пов’язаний з основним потоком, його позиція не залежить від основного потоку, і якщо його видалити, це не повинно впливати на потік документа.

Порада: Елемент <figcaption> використовується для додавання підпису до елемента <figure>.


Підтримка браузерами

Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.

Елемент
<figure> 8.0 9.0 4.0 5.1 11.0

Глобальні атрибути

Тег <figure> також підтримує Глобальні атрибути в HTML.


Атрибути подій

Тег <figure> також підтримує Атрибути подій в HTML.


Більше прикладів

Приклад

Використовуйте CSS для стилізації елементів <figure> та <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>

<figure>
  <img src="../images/pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

</body>
</html>
Спробуйте самі »

Пов’язані сторінки

HTML DOM довідник: Об’єкт Figure


CSS налаштування за замовчуванням

Більшість браузерів будуть відображати елемент <figure> з наступними значеннями за замовчуванням:

Приклад

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
Спробуйте самі »