HTML тег <summary>
HTML тег <summary> задаёт кликабельный заголовок виджета раскрытия <details>. Синтаксис, доступность, стилизация и примеры.
Тег <summary> определяет кликабельный заголовок — видимую метку — виджета раскрытия <details>. Нажатие на summary разворачивает или сворачивает остальное содержимое <details>, поэтому summary — это та часть, которая всегда остаётся на экране, независимо от того, открыт виджет или закрыт.
Элемент <summary> должен быть первым дочерним элементом элемента <details>. Если у <details> нет <summary>, браузер подставляет метку по умолчанию (обычно слово «Details»), что редко соответствует желаемому результату — поэтому почти каждый виджет раскрытия должен содержать этот тег.
На этой странице рассматривается синтаксис <summary>, его поведение, характеристики доступности, событие toggle и способы стилизации (включая удаление треугольника раскрытия).
Синтаксис
Тег <summary> используется парами. Текст метки записывается между открывающим тегом <summary> и закрывающим </summary>, и он располагается непосредственно внутри <details>.
Пример HTML тега <summary>
HTML тег <summary>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Copyright 2013-2014.</summary>
<p>W3docs. All rights reserved.</p>
<p>The content of the website is the property of W3Docs.com.</p>
</details>
</body>
</html>Насыщенное содержимое внутри <summary>
Summary не ограничен простым текстом. Он может содержать строчные элементы, такие как <strong>, <em>, <code> или иконку, что удобно для выделения метки:
<details>
<summary><strong>Shipping & returns</strong> — read before ordering</summary>
<p>Orders ship within 2 business days. Returns accepted for 30 days.</p>
</details>Старайтесь делать summary кратким и информативным: это метка, которую пользователь читает (а программа чтения с экрана озвучивает), чтобы решить, открывать ли виджет.
Доступность
Элемент <summary> предоставляет вспомогательным технологиям неявную ARIA-роль button и по умолчанию доступен для фокусировки и управления с клавиатуры:
- Tab перемещает фокус на summary.
- Enter или Space переключает родительский
<details>между открытым и закрытым состоянием.
По этой причине не следует вкладывать настоящую <button> или ссылку внутрь summary — сам summary уже является элементом управления. Убедитесь, что summary содержит чёткую, описательную метку, чтобы пользователи, перемещающиеся с помощью Tab или программы чтения с экрана, понимали, что раскрывает виджет.
Событие toggle и details.open
Состояние открыт/закрыт виджета раскрытия хранится в элементе <details>, а не в summary. boolean-атрибут open отражает это состояние, и его можно читать или задавать как details.open в JavaScript.
Каждый раз, когда состояние меняется — кликом, клавиатурой или скриптом — браузер генерирует событие toggle на элементе <details>. Прослушивание этого события позволяет реагировать на открытие или закрытие виджета пользователем (например, для отложенной загрузки содержимого или отправки аналитики) вместо постоянной проверки состояния:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('Details is now', details.open ? 'open' : 'closed');
});Как стилизовать тег <summary>
Стиль по умолчанию для <summary> использует CSS-свойство display со значением list-item, именно оно отрисовывает треугольник раскрытия (маркер) рядом с меткой.
Вы можете стилизовать summary как любой другой элемент — изменить цвет, добавить отступы или задать cursor:
summary {
color: blue;
cursor: pointer;
padding: 8px;
}Удаление треугольника раскрытия
Чтобы надёжно скрыть треугольник по умолчанию во всех браузерах, удалите маркер списка и очистите устаревший маркер WebKit/Blink:
summary {
list-style: none; /* Firefox and standards-based browsers */
}
summary::-webkit-details-marker {
display: none; /* Safari and older Chrome */
}Атрибуты
Тег <summary> не имеет собственных обязательных атрибутов. Он поддерживает глобальные атрибуты и атрибуты событий.
Создание FAQ / аккордеона
Поскольку каждый <details> работает независимо, можно разместить несколько таких элементов на странице, чтобы создать FAQ или аккордеон. Каждый <summary> является вопросом, а скрытое содержимое — ответом:
<details>
<summary>How do I track my order?</summary>
<p>Use the tracking link in your confirmation email.</p>
</details>
<details>
<summary>Can I change my shipping address?</summary>
<p>Yes, as long as the order has not yet shipped.</p>
</details>
<details>
<summary>Do you ship internationally?</summary>
<p>We ship to most countries. Rates are shown at checkout.</p>
</details>Чтобы одновременно мог быть открыт только один раздел (настоящий аккордеон), задайте элементам <details> одинаковый атрибут name, чтобы браузер делал их взаимоисключающими.
Тег <summary> является одним из элементов HTML5. См. также элемент <details>, которому он служит меткой.