Самоучитель HTML Справочник HTML Глобальные атрибуты MIME-типы События Типы элементов Таблица цветов Спецсимволы HTML Коды языков
Теги HTML

Элемент <figure>

Элемент <figure> (от англ. figure — рисунок, иллюстрация) используется для представления содержимого, которое может быть связано с основным контентом документа. Часто используется совместно с элементом <figcaption>, который позволяет добавить подпись или описание к содержимому элемента <figure>.

Обычно применяется для иллюстраций, фотографий, листингов кода, схем, графиков, диаграмм и другого медиаконтента.

Элемент <figure> может иметь только один элемент <figcaption>, при этом он должен располагаться в качестве первого или последнего дочернего элемента.

Категории Потоковое содержимое, явное содержимое.
Синтаксис <figure>...</figure>
Опускание тегов Начальный и конечный теги обязательны.
Модель содержимого Либо: один элемент <figcaption>, за которым следует потоковое содержимое.
Либо: потоковое содержимое, за которым следует один элемент <figcaption>.
Либо: потоковое содержимое.

Атрибуты

Для элемента <figure> доступны глобальные атрибуты и события.

Стиль по умолчанию

Стиль по умолчанию для элемента <figure>, определённый в спецификации HTML:

figure {
  display: block;
  margin-block: 1em;
  margin-inline: 40px;
}

Примеры

Изображение:
figure {
  max-width: 363px;
  margin: auto;
  padding: 5px;
  border: 5px double #404040;
}

figcaption {
  background-color: #404040;
  color: white;
  padding: 4px;
  text-align: center;
  font-style: italic;
}
<figure>
  <img src="butterfly.png" alt="Рисунок бабочки">
  <figcaption>
    Изображение, сгенерированное с помощью нейросети.
  </figcaption>
</figure>

Результат

Тег figcaption, изображение сгенерированное с помощью нейросети
Изображение, сгенерированное с помощью нейросети.
Листинг кода:
figure {
  background-color: #e6f9fe;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
}

pre {
  background-color: #282c34;
  color: #61dafb;
  padding: 10px;
  border-radius: 3px;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
}

figcaption {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 7px;
  text-align: center;
}
<figure>
  <figcaption>
    Пример кода на JavaScript, выводящий сообщение в консоль.
  </figcaption>
  <pre><code>console.log('Hello, world!');</code></pre>
</figure>

Результат

Пример кода на JavaScript, выводящий сообщение в консоль.
console.log('Hello, world!');
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru