🧒 Представь: ты сделал крутую поделку на уроке труда
Допустим, это — кораблик из спичек. Ты пришёл в класс, поставил его на стол, и тут учитель говорит:
— «А где инструкция? Кто это сделал? Из чего? Сколько времени заняло?»
А ты только руками разводишь:
— «Ну… вот он!»
Тут-то и нужна карточка-подпись под поделкой:
«Кораблик. Сделал Иван Петров (5 «Б»). Материал: спички, клей, лак. Время: 3 часа.»
Без неё — просто вещь. С ней — понятный, самодостаточный элемент выставки.
Вот это и есть <figure> + <figcaption> в HTML.
📦 Что такое <figure>?
<figure> — это «подставка» или «рамка» для чего-то важного, но необязательного для основного текста.
✅ Подходит:
- фото,
- диаграмма,
- цитата,
- кусок кода,
- даже видео или аудио.
❌ Не подходит:
- логотип сайта (это часть интерфейса),
- кнопка «Купите сейчас!» (это функционал),
- фоновое изображение (оно «декор», а не контент).
🔹 Аналогия:
<figure> — как отдельная витрина в музее.
Внутри — экспонат. Рядом — табличка с описанием.
Если убрать витрину — рассказ в зале не сломается. Но с ней — понятнее и интереснее.
📝 А что внутри? <figcaption> — это табличка
<figcaption> — всегда внутри <figure>, и только один раз.
Он говорит: «Вот что это, зачем оно тут, и откупа оно».
🔹 Аналогия:
Как бирка на шнурке у школьной куртки в раздевалке.
Без бирки — все куртки одинаковые. С биркой — «Куртка Саши, 5 «Б», синяя, с капюшоном».
Бирка принадлежит куртке — она не висит где-то в углу класса.
💡 Когда НЕ нужно <figure>?
Если картинка — часть повествования, а не «отдельный экспонат».
Пример 1:
«Я открыл дверь — и увидел огромного пса»
→ Фото пса прямо здесь — без <figure>, просто <img>. Потому что оно вплетено в рассказ, как слово в предложении.
Пример 2:
«На уроке мы изучили схему работы сердца»
↓
<figure>
<img src="heart.png">
<figcaption>Рис. 3. Цикл кровообращения. Источник: Биология, 5 класс</figcaption>
</figure>
→ Здесь схема — отдельный объект для изучения, как плакат на стене. Можно посмотреть, отвернуться — и продолжить читать.
🔹 Правило на пальцах:
Если можно сказать: «Смотри вот это» — берёшь <figure>.
Если просто «…и вот он» — достаточно <img>.
🛠 Как писать — быстро и правильно
✅ Обязательно:
- <figcaption> — только внутри <figure>,
- <figcaption> может быть вверху или внизу (но чаще — внизу),
- alt у <img> — всё равно нужен (для слабовидящих и если картинка не загрузилась).
🎯 Зачем это вообще нужно?
- Для людей — сразу ясно: что это и зачем.
- Для поисковиков (Яндекс, Google) — они понимают: «Ага, это не просто фотка, а важный элемент!» → выше ранжирование.
- Для слабовидящих — скринридеры зачитывают <figcaption> как описание, и всё логично складывается.
🔹 Аналогия:
Как подписи в комиксе. Без них — просто люди молчат и машут руками. С ними — целая история!
✅ Вывод за 10 секунд
Используй <figure> + <figcaption>, когда:
🔹 У тебя отдельный контентный элемент (картинка, схема, цитата),
🔹 Он имеет самостоятельное значение,
🔹 И ему нужна пояснительная подпись — как на выставке, в музее или на школьной ярмарке.
А если сомневаешься — спроси себя:
«Можно ли это повесить на доску объявлений и чтобы всё было понятно?»
Если да — вперёд, в <figure>!
📌 Сохрани эту статью — и в следующий раз, когда будешь верстать, вспомнишь про витрину, бирку и поделку из спичек.
Потому что хороший код — как хорошая выставка: всё на месте, всё подписано, всё понятно.