Тег figcaption в HTML: что это такое?

Синтаксис тега figcaption

<figure>
  <figcaption>Подпись к содержимому</figcaption>

  <!-- Содержимое figure -->
</figure>

Атрибуты тега figcaption

Тег figcaption поддерживает только глобальные атрибуты.

Примеры использования тега figcaption

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

<figure>
  <img src="cat.jpg" alt="Кот">
  <figcaption>Мой кот Барсик</figcaption>
</figure>

Подпись к блоку кода

<figure>
  <pre><code>console.log('Hello, World!');</code></pre>
  <figcaption>Пример простого JavaScript кода</figcaption>
</figure>

Подпись перед содержимым

<figure>
  <figcaption>График продаж за 2024 год</figcaption>
  <img src="sales-chart.jpg" alt="График продаж">
</figure>

Советы по использованию тега figcaption

• Используйте figcaption только внутри элемента figure.
• Размещайте figcaption либо в начале, либо в конце figure, но не в середине.
• Используйте семантические элементы внутри figcaption для лучшей структуры.
• Подпись должна быть краткой и информативной.
• Не дублируйте информацию из атрибута alt изображения.
• Можно использовать HTML-разметку внутри figcaption для форматирования текста.

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

1 Можно ли использовать figcaption без figure?

Нет, тег figcaption должен быть обязательно вложен в тег figure.

2 Сколько элементов figcaption можно использовать внутри figure?

Внутри одного элемента figure можно использовать только один элемент figcaption.

3 Где лучше размещать figcaption - до или после контента?

Элемент figcaption можно размещать как до, так и после основного контента figure. Выбор зависит от дизайна и логики представления информации.

Заключение

Тег figcaption является важным семантическим элементом HTML5, который помогает создавать структурированный и понятный контент. Правильное использование этого тега улучшает доступность и SEO вашего сайта.

Для получения дополнительной информации о теге figcaption, рекомендуем ознакомиться с официальной документацией на MDN.