<summary>
- 25 января 2023
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023