Фигуры и подписи (figure, figcaption)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 29
Автор
Рек. время прохождения 5 минут
Упражнений 14
Комментарии 0
Тренажер HTML
Элементы figure и figcaption используются для семантической разметки иллюстраций, диаграмм, фотографий, листингов кода и другого контента, который дополняет основной текст. Figure создает независимый блок контента, а figcaption добавляет к нему подпись. Эти элементы помогают поисковым системам и скринридерам лучше понимать структуру документа. В заданиях вы научитесь правильно использовать эти теги для различных типов контента - от простых изображений до сложных композиций с несколькими медиафайлами."
Список тем

Базовый элемент figure

id: 37871_figure-basic

Создайте простую фигуру с изображением природы. Используйте правильный семантический элемент для обертки изображения.

CSS
figure {
  margin: 20px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

img {
  width: 100%;
  height: auto;
  display: block;
}
HTML
<input1>
  <img src="https://naytikurs.ru/img/1.png" alt="Природа">
</input1>
Для создания семантической обертки вокруг изображения используется тег figure. Он группирует контент, который является самодостаточным и может быть перемещен в другое место документа без потери смысла.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление подписи к изображению

id: 37871_figcaption-basic

Добавьте подпись к изображению горного пейзажа. Подпись должна быть семантически связана с изображением.

CSS
figure {
  margin: 15px 0;
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
}

img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

figcaption {
  margin-top: 10px;
  font-style: italic;
  color: #666;
  font-size: 14px;
}
HTML
<figure>
  <img src="https://naytikurs.ru/img/2.png" alt="Горы">
  <input1>Горный пейзаж на закате</input1>
</figure>
Для добавления подписи к содержимому figure используется тег figcaption. Он должен быть прямым потомком figure и может располагаться до или после основного контента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подпись перед изображением

id: 37871_figcaption-before

Создайте фигуру, где подпись расположена перед изображением. Это часто используется для заголовков иллюстраций.

CSS
figure {
  background: linear-gradient(to bottom, #f0f0f0, #fff);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

figcaption {
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  font-size: 16px;
}

img {
  width: 100%;
  border-radius: 5px;
}
HTML
<input1>
  <input2>Рисунок 1. Архитектура здания</input2>
  <img src="https://naytikurs.ru/img/4.png" alt="Здание">
</input1>
Тег figcaption может располагаться как перед, так и после основного контента внутри figure. Порядок элементов определяет визуальное отображение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с несколькими изображениями

id: 37871_figure-multiple-images

Создайте фигуру с двумя связанными изображениями и общей подписью. Это используется для сравнения или демонстрации последовательности.

CSS
figure {
  background: #fafafa;
  padding: 15px;
  border-left: 4px solid #4CAF50;
}

.image-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

img {
  width: 50%;
  height: auto;
}

figcaption {
  text-align: center;
  color: #555;
  font-size: 14px;
}
HTML
<input1>
  <div class="image-group">
    <img src="https://naytikurs.ru/img/5.png" alt="До">
    <img src="https://naytikurs.ru/img/6.png" alt="После">
  </div>
  <input2>Сравнение: до и после обработки</input2>
</input1>
Внутри одного figure может быть несколько изображений или других элементов. Они группируются как единое целое с общей подписью figcaption.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с видео контентом

id: 37871_figure-video

Оформите видео как фигуру с описательной подписью. Видео должно иметь элементы управления.

CSS
figure {
  margin: 0;
  padding: 10px;
  background: #222;
  border-radius: 8px;
}

video {
  width: 100%;
  border-radius: 4px;
}

figcaption {
  color: #fff;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.9;
}
HTML
<input1>
  <input2 src="https://naytikurs.ru/img/1.mp4" controls></input2>
  <figcaption>Видеоурок: основы веб-разработки</figcaption>
</input1>
Figure может содержать не только изображения, но и видео, аудио, диаграммы и другой контент. Для видео используйте тег video с атрибутом controls.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с аудио

id: 37871_figure-audio

Создайте фигуру с аудиоплеером и подписью. Аудио должно иметь элементы управления воспроизведением.

CSS
figure {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

audio {
  width: 100%;
  max-width: 300px;
}

figcaption {
  color: white;
  margin-top: 15px;
  font-weight: 500;
}
HTML
<figure>
  <input1 src="https://naytikurs.ru/img/1.mp3" input2></input1>
  <figcaption>Подкаст: Современные технологии</figcaption>
</figure>
Для аудио контента используется тег audio с атрибутом controls. Figure семантически группирует аудио с его описанием.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с блоком кода

id: 37871_figure-code

Оформите пример кода как фигуру с подписью. Код должен быть в соответствующих семантических тегах.

CSS
figure {
  margin: 15px 0;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

pre {
  margin: 0;
  padding: 15px;
  background: #282c34;
  color: #abb2bf;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

figcaption {
  padding: 10px 15px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  font-size: 13px;
  color: #666;
}
HTML
<input1>
  <pre><input2>function hello() {
  console.log('Hello, World!');
}</input2></pre>
  <figcaption>Пример 1. Функция приветствия</figcaption>
</input1>
Figure может содержать примеры кода. Используйте теги pre и code для правильной семантической разметки кода.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с цитатой

id: 37871_figure-blockquote

Создайте фигуру с цитатой и указанием источника в подписи. Цитата должна быть в правильном семантическом теге.

CSS
figure {
  margin: 20px 0;
  padding: 0;
  border-left: 5px solid #3498db;
  background: #ecf0f1;
}

blockquote {
  margin: 0;
  padding: 20px;
  font-style: italic;
  font-size: 16px;
  color: #2c3e50;
}

figcaption {
  padding: 10px 20px;
  background: #fff;
  color: #7f8c8d;
  font-size: 14px;
  text-align: right;
}
HTML
<figure>
  <input1>«Простота — залог надежности»</input1>
  <input2>— Эдсгер Дейкстра</input2>
</figure>
Для цитат используется тег blockquote. Figure группирует цитату с информацией об источнике в figcaption.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с SVG графикой

id: 37871_figure-svg

Оформите SVG изображение как фигуру с подписью. SVG должно быть встроено через тег img.

CSS
figure {
  display: inline-block;
  margin: 10px;
  padding: 15px;
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
}

img {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #555;
}
HTML
<input1>
  <img src="https://naytikurs.ru/img/11s.svg" input2="Иконка">
  <input3>Векторная иконка</input3>
</input1>
SVG графика может быть добавлена через тег img с указанием пути к SVG файлу. Figure семантически группирует графику с описанием.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с таблицей данных

id: 37871_figure-table

Создайте фигуру с таблицей и описательной подписью. Таблица должна содержать простые данные.

CSS
figure {
  margin: 15px 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

figcaption {
  padding: 10px;
  background: #f5f5f5;
  font-size: 14px;
  color: #666;
}
HTML
<input1>
  <input2>
    <tr><td>HTML</td><td>Структура</td></tr>
    <tr><td>CSS</td><td>Стили</td></tr>
    <tr><td>JS</td><td>Логика</td></tr>
  </input2>
  <figcaption>Таблица 1. Веб-технологии</figcaption>
</input1>
Figure может содержать таблицы. Это полезно когда таблица является иллюстрацией к тексту. Используйте теги table, tr, td.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с диаграммой

id: 37871_figure-diagram

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

CSS
figure {
  margin: 20px auto;
  max-width: 350px;
  padding: 10px;
  background: #fafafa;
  border: 2px solid #e0e0e0;
}

img {
  width: 100%;
  height: auto;
}

figcaption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  text-align: center;
}

.figure-number {
  font-weight: bold;
  color: #333;
}
HTML
<input1>
  <img src="https://naytikurs.ru/img/7.png" alt="График роста">
  <input2><span class="figure-number">Рис. 3.</span> Динамика роста показателей за 2024 год</input2>
</input1>
В научных и технических документах фигуры часто нумеруются. Figure и figcaption идеально подходят для такой разметки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фигура с атрибутами доступности

id: 37871_figure-accessibility

Создайте доступную фигуру с изображением, используя ARIA атрибуты для улучшения доступности.

CSS
figure {
  margin: 15px 0;
  padding: 15px;
  background: linear-gradient(to right, #f5f7fa, #c3cfe2);
  border-radius: 10px;
}

img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

figcaption {
  margin-top: 12px;
  color: #2c3e50;
  font-weight: 500;
  text-align: center;
}
HTML
<figure input1="figure" input2="caption1">
  <img src="https://naytikurs.ru/img/8.png" alt="Пейзаж">
  <figcaption input3="caption1">Осенний пейзаж в парке</figcaption>
</figure>
Для улучшения доступности можно использовать атрибут role со значением 'figure' и aria-labelledby для связи с подписью.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Галерея с несколькими фигурами

id: 37871_figure-gallery

Создайте мини-галерею из двух независимых фигур, каждая со своим изображением и подписью.

Комплексная фигура с медиа

id: 37871_figure-complex

Создайте сложную фигуру с картинкой в формате WebP и развернутой подписью с дополнительной информацией.

CSS
figure {
  max-width: 350px;
  margin: 20px auto;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

figcaption {
  padding: 15px;
  background: #f7f7f7;
}

.caption-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.caption-meta {
  font-size: 12px;
  color: #777;
}
HTML
<input1>
  <img src="https://naytikurs.ru/img/1w.webp" input2="Современная архитектура">
  <input3>
    <div class="caption-title">Инновационный дизайн</div>
    <div class="caption-meta">Фото: WebP формат • 2024 год</div>
  </input3>
</input1>
Figure может содержать сложный контент. Figcaption может включать не только текст, но и дополнительную разметку для детального описания.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру