Пошук уроків, статей та іншого контенту
Вчить об’єднувати зображення, схеми та підписи в єдину змістову групу за допомогою figure і figcaption.
figureЕлемент <figure> об’єднує самостійний візуальний матеріал і його підпис в одну змістову групу.
Усередині figure можуть бути:
зображення;
схема або діаграма;
фрагмент коду;
відео;
кілька пов’язаних зображень;
інший матеріал, який можна перемістити в інше місце документа без втрати змісту.
Підпис додається за допомогою елемента <figcaption>.
<figure>
<img src="architecture.png" alt="Схема взаємодії клієнта із сервером">
<figcaption>Рисунок 1. Клієнт надсилає запит до сервера та отримує відповідь.</figcaption>
</figure>figure описує змістовий зв’язок між ілюстрацією та підписом. Сам по собі цей елемент не додає спеціального вигляду — браузер за замовчуванням лише відображає його як блочний елемент із невеликими стандартними відступами.
figureТипова структура має такий вигляд:
<figure>
<!-- Ілюстрація або інший самостійний матеріал -->
<figcaption>
<!-- Підпис до матеріалу -->
</figcaption>
</figure><figcaption> може розташовуватися перед або після основного вмісту figure.
<figure>
<figcaption>Схема обробки форми</figcaption>
<img src="form-flow.png" alt="Послідовність перевірки та надсилання форми">
</figure>Найчастіше підпис розміщують після зображення, оскільки користувач спочатку бачить ілюстрацію, а потім читає пояснення.
figure і figcaption на практиціРозглянемо сторінку зі схемою роботи вебзастосунку. Для прикладу використаємо вбудовану SVG-схему, тому файл можна відкрити без додаткових ресурсів.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Схема запиту</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: Arial, sans-serif;
color: #1f2937;
background-color: #f3f4f6;
}
article {
max-width: 760px;
margin: 0 auto;
padding: 24px;
background-color: #ffffff;
border-radius: 12px;
}
figure {
margin: 24px 0;
padding: 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
background-color: #f9fafb;
}
figure svg {
display: block;
width: 100%;
height: auto;
}
figcaption {
margin-top: 12px;
color: #4b5563;
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>Як клієнт отримує дані</h1>
<p>
Вебсторінка надсилає запит до сервера, а сервер повертає відповідь
із потрібними даними.
</p>
<figure>
<svg
viewBox="0 0 700 220"
role="img"
aria-labelledby="diagram-title diagram-description"
>
<title id="diagram-title">Схема обміну даними</title>
<desc id="diagram-description">
Клієнт надсилає HTTP-запит серверу, сервер обробляє його
та повертає HTTP-відповідь клієнту.
</desc>
<rect x="40" y="70" width="180" height="80" rx="12" fill="#dbeafe" />
<text x="130" y="118" text-anchor="middle" font-size="20">
Клієнт
</text>
<rect x="480" y="70" width="180" height="80" rx="12" fill="#dcfce7" />
<text x="570" y="118" text-anchor="middle" font-size="20">
Сервер
</text>
<line x1="220" y1="95" x2="480" y2="95" stroke="#2563eb" stroke-width="3" />
<polygon points="480,95 465,87 465,103" fill="#2563eb" />
<text x="350" y="82" text-anchor="middle" font-size="16">
HTTP-запит
</text>
<line x1="480" y1="125" x2="220" y2="125" stroke="#16a34a" stroke-width="3" />
<polygon points="220,125 235,117 235,133" fill="#16a34a" />
<text x="350" y="153" text-anchor="middle" font-size="16">
HTTP-відповідь
</text>
</svg>
<figcaption>
Схема обміну даними між клієнтом і сервером.
</figcaption>
</figure>
</article>
</body>
</html>У цьому прикладі:
<figure> об’єднує схему та її опис;
<svg> є ілюстрацією;
<figcaption> пояснює, що саме показано на схемі;
CSS відповідає лише за оформлення, а не за змістовий зв’язок;
атрибути role, <title> і <desc> роблять SVG зрозумілішим для допоміжних технологій.
figure для звичайного зображенняНайпоширеніший варіант — зображення з підписом:
<figure>
<img
src="dashboard.png"
alt="Панель із графіком продажів за чотири місяці"
>
<figcaption>
Графік продажів за січень–квітень 2025 року.
</figcaption>
</figure>Тут у зображення і підпису різні завдання:
alt описує, що зображено, для користувачів, які не бачать картинку або не можуть її завантажити;
figcaption пояснює роль ілюстрації в поточному матеріалі або додає контекст.
Не варто повністю повторювати один і той самий текст в alt і figcaption.
Поганий приклад:
<figure>
<img
src="sales-chart.png"
alt="Графік продажів за січень–квітень 2025 року"
>
<figcaption>
Графік продажів за січень–квітень 2025 року.
</figcaption>
</figure>Користувач допоміжної технології може почути однакову інформацію двічі.
Краще розподілити інформацію:
<figure>
<img
src="sales-chart.png"
alt="Стовпчикова діаграма зі зростанням значень від січня до квітня"
>
<figcaption>
Продажі зросли на 28% протягом першого кварталу.
</figcaption>
</figure>alt описує саму візуальну форму, а figcaption повідомляє важливий висновок.
figureКілька зображень можна об’єднати в один figure, якщо вони утворюють одну змістову групу.
<figure class="comparison">
<div>
<img src="before.png" alt="Інтерфейс до оновлення">
<img src="after.png" alt="Інтерфейс після оновлення">
</div>
<figcaption>
Порівняння інтерфейсу до та після оновлення дизайну.
</figcaption>
</figure>Такий підхід доречний для:
порівняння «до» і «після»;
кількох частин однієї схеми;
набору кадрів, що показують один процес;
групи пов’язаних ілюстрацій із єдиним поясненням.
Якщо кожне зображення має окремий зміст і окремий підпис, краще створити кілька незалежних елементів figure.
<figure>
<img src="mobile-layout.png" alt="Макет сторінки для мобільного пристрою">
<figcaption>Мобільна версія макета.</figcaption>
</figure>
<figure>
<img src="desktop-layout.png" alt="Макет сторінки для широкого екрана">
<figcaption>Версія макета для широкого екрана.</figcaption>
</figure>figure не потрібенНе кожне зображення потрібно обгортати в figure.
Звичайне зображення без підпису може залишатися окремим елементом:
<img src="logo.svg" alt="Логотип компанії">figure варто використовувати, коли ілюстрація:
має власний підпис;
є важливою частиною пояснення;
утворює окрему змістову одиницю;
може бути переміщена в інше місце документа без руйнування основного тексту.
Логотип, іконка кнопки або декоративне зображення зазвичай не потребують figure.
figure і figcaptionСемантична структура не залежить від зовнішнього вигляду. За допомогою CSS можна змінити:
ширину ілюстрації;
відступи;
рамку;
фон;
вирівнювання підпису;
розмір і колір тексту.
figure {
max-width: 640px;
margin: 32px auto;
}
figure img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
figcaption {
margin-top: 8px;
color: #555;
font-size: 0.9rem;
line-height: 1.4;
text-align: center;
}Властивість display: block для зображення допомагає прибрати зайвий пробіл, який може з’являтися під рядковим зображенням. height: auto зберігає пропорції картинки під час зміни ширини.
div замість figure<div class="image">
<img src="diagram.png" alt="Схема процесу">
<p>Схема процесу.</p>
</div>Такий код може виглядати правильно, але він не передає браузеру змістовий зв’язок між ілюстрацією та підписом.
Якщо матеріал має підпис і є самостійною змістовою одиницею, використовуйте:
<figure>
<img src="diagram.png" alt="Схема процесу">
<figcaption>Схема процесу.</figcaption>
</figure>p замість figcaption<figure>
<img src="diagram.png" alt="Схема процесу">
<p>Схема процесу.</p>
</figure>Візуально результат може бути схожим, але <p> — це звичайний абзац, а <figcaption> спеціально позначає підпис до вмісту figure.
alt у зображення<figure>
<img src="diagram.png">
<figcaption>Схема процесу.</figcaption>
</figure>figcaption не замінює alt. Для змістового зображення альтернативний текст потрібно додати окремо:
<figure>
<img src="diagram.png" alt="Етапи обробки замовлення">
<figcaption>Схема процесу обробки замовлення.</figcaption>
</figure>figureНе потрібно створювати figure для кожної іконки або декоративної картинки. Це ускладнює структуру документа й не додає корисної семантики.
figure<figure>
<img src="diagram.png" alt="Схема процесу">
</figure>
<p>Схема процесу.</p>Такий абзац уже не є семантично пов’язаним із конкретним figure. Підпис потрібно розміщувати всередині елемента:
<figure>
<img src="diagram.png" alt="Схема процесу">
<figcaption>Схема процесу.</figcaption>
</figure><figure> об’єднує ілюстрацію або інший самостійний матеріал із пов’язаним підписом.
<figcaption> містить підпис до вмісту figure.
figcaption може бути перед або після основного вмісту.
alt описує зображення, а figcaption додає контекст або пояснення.
Кілька зображень можна розмістити в одному figure, якщо вони утворюють єдину змістову групу.
Для окремих зображень без підпису figure зазвичай не потрібен.
Семантична структура figure і figcaption не залежить від CSS-оформлення.