HTML Academy · Урок

figure и figcaption

Оборачивайте изображения в семантические контейнеры figure с подписями

«figure и figcaption» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое figure

Элемент <figure> размечает самостоятельное содержимое, на которое ссылаются из основного текста:

Изображения с подписями
Листинги кода
Диаграммы, графики и иллюстрации
Цитаты

Главная особенность: если удалить этот элемент из основного потока, окружающий текст всё равно останется понятным.

figure с figcaption

<figcaption> добавляет подпись к figure:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Расположение figcaption

<figcaption> можно разместить перед основным содержимым или после него:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Доступность: alt и figcaption

Поймите разницу:

alt — описывает содержимое изображения для средств чтения с экрана и отображается, если изображение не загрузилось
figcaption — видимая подпись, содержащая контекст, источник или пояснение

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

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Листинг кода в figure

Используйте <figure> для подписанных примеров кода:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Цитата в figure

<figure> отлично сочетается с <blockquote>:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Несколько изображений в figure

Figure может содержать несколько связанных изображений:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure и div

Когда использовать <figure>, а когда — <div>:

Используйте <figure>, если содержимое можно перенести в приложение
Используйте <figure>, если нужна видимая подпись
Используйте <div> для контейнеров макета или групп изображений, не являющихся самостоятельным содержимым

Связывание figure с текстом

Ссылайтесь на figure из основного текста:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

Для изображений figure не обязателен

Не нужно помещать каждое изображение в <figure>:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Оформление figure и figcaption

Распространённый CSS для figure:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Быстрая проверка

В чём заключается главное различие между текстом alt и figcaption?

Повторение: figure и figcaption

Основные сведения о figure:

<figure> — самостоятельное содержимое, на которое ссылаются из основного текста
<figcaption> — видимая подпись, первый или последний дочерний элемент figure
alt — невидимое описание для средств чтения с экрана
figcaption — видимый контекст для всех пользователей
Подходит для изображений, кода, цитат и графиков

Часто задаваемые вопросы

Урок «figure и figcaption» бесплатный?

Да — полный текст урока «figure и figcaption» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «figure и figcaption»?

Оборачивайте изображения в семантические контейнеры figure с подписями Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «figure и figcaption»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy