HTML Academy · Урок

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

Применяйте figure не только к изображениям, но и к коду, диаграммам и цитатам

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

Иллюстрация — это не только изображение

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

Примеры кода
Математические уравнения
Графики и диаграммы
Цитаты
Аудио и видео с подписями

Фрагмент кода в иллюстрации

Обозначайте примеры кода как иллюстрации:

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

Аудио в иллюстрации

Аудио с описательной подписью:

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

Видео в иллюстрации

Видео с подписью, описывающей его содержимое:

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

График в иллюстрации

Изображение графика с источником данных в подписи:

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

Диаграмма SVG в иллюстрации

Диаграмма SVG с подписью:

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

Цитата в иллюстрации

Развёрнутая цитата в виде иллюстрации:

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

Снова об альтернативном тексте и подписи к иллюстрации

Ещё раз уточним различие:

Альтернативный текст — невидим; заменяет изображение для пользователей программ чтения с экрана; описывает то, что изображено
Подпись к иллюстрации — видима; содержит контекст, указание авторства или нумерацию; описывает значение иллюстрации

<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

Размещение подписи к иллюстрации

Подпись к иллюстрации может быть её первым или последним дочерним элементом:

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

Нумерация иллюстраций с помощью счётчиков CSS

Автоматически нумеруйте иллюстрации с помощью счётчиков CSS:

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

Когда не следует использовать иллюстрацию

Не заключайте каждое изображение в иллюстрацию:

Декоративные изображения (с пустым alt) → используйте просто <img alt="">
Изображения, предназначенные только для оформления → используйте фоновое изображение CSS
Фотографии пользователей в списке → используйте просто <img>
Логотип в шапке → используйте просто <img>

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

Какой дочерний элемент иллюстрации предоставляет видимую подпись для всех пользователей?

Итоги: иллюстрация

Основные сведения об элементе иллюстрации:

<figure> — самостоятельное содержимое, на которое ссылаются в тексте (изображения, код, графики, аудио, цитаты)
<figcaption> — видимая подпись, первый или последний дочерний элемент
Альтернативный текст = невидимое описание; подпись к иллюстрации = видимый контекст
Автоматическая нумерация с помощью счётчиков CSS
Не каждому изображению нужна иллюстрация

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

Урок «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 структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

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

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

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

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

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

← Назад к HTML Academy