<summary>

Тег <summary> используется для предоставления подписи к содержимому элемента <details>.

Синтаксис тега <summary>

<details>
  <summary>Краткое описание деталей</summary>
  <!-- содержимое, которое должно быть скрыто или показано -->
</details>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <summary> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Простое резюме:

<details>
  <summary>Нажмите, чтобы показать больше</summary>
  <p>Скрытое содержимое, которое может быть показано, когда пользователь нажимает на резюме</p>
</details>

Вложенное резюме:

<details>
  <summary>Нажмите, чтобы показать больше</summary>
  <details>
    <summary>Нажмите, чтобы показать еще больше</summary>
    <p>Скрытое содержимое, которое может быть показано, когда пользователь нажимает на вложенное резюме</p>
  </details>
</details>Индивидуальный стиль резюме:

Для чего использовать тег <summary>

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

Атрибуты тега <summary>

У тега <summary> нет специфических атрибутов.

Глобальные атрибуты

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

Ограничения

• тег <summary> всегда должен содержаться в теге <details>;
• тег <summary> не должен содержать интерактивного содержимого, такого как ссылки или кнопки.

Нюансы

Если тег <summary> пуст, некоторые программы чтения экрана будут считывать текст no summary вместо содержимого элемента details.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <summary> не существует.

Чем заменить тег

Тег <summary> нельзя заменить одним тегом, но той же функциональности можно добиться с помощью других элементов HTML и CSS. Например, вы можете использовать кнопку или ссылку с CSS для скрытия и отображения содержимого.

Актуальность

Тег <summary> не является устаревшим.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.