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

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

<table>
  <caption>Заголовок таблицы</caption>

  <!-- Содержимое таблицы -->
</table>

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

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

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

Простая таблица с заголовком

<table>
  <caption>Расписание занятий</caption>
  <tr>
    <th>Время</th>
    <th>Предмет</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td>Математика</td>
  </tr>
</table>

Таблица со стилизованным заголовком

<style>
  caption {
    caption-side: bottom;
    font-weight: bold;
    color: #333;
    padding: 10px;
  }
</style>

<table>
  <caption>Примечание к таблице</caption>
  <tr>
    <td>Данные</td>
  </tr>
</table>

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

• Размещайте тег caption сразу после открывающего тега table.
• Используйте краткие и информативные заголовки.
• Применяйте CSS для стилизации заголовка таблицы.
• Не используйте caption для размещения сложного контента - только для заголовка.
• Помните, что caption улучшает доступность таблицы для программ чтения с экрана.
• В случае, если таблица является единственным дочерним элементов в теге <figure>, вместо <caption> необходимо использовать элемент <figcaption>.

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

1 Где должен располагаться тег caption?

Тег caption должен быть первым дочерним элементом тега table и может использоваться только один раз в таблице.

2 Можно ли стилизовать caption с помощью CSS?

Да, caption можно стилизовать как любой другой HTML-элемент, используя CSS-свойства.

3 Как выровнять caption относительно таблицы?

Для выравнивания caption можно использовать CSS-свойство caption-side со значениями top (по умолчанию) или bottom.

Заключение

Тег caption является важным семантическим элементом для создания заголовков таблиц в HTML. Правильное использование этого тега улучшает структуру документа и делает таблицы более понятными как для пользователей, так и для поисковых систем.

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