HTML5 details и summary: аккордеон без JavaScript — практическое руководство
HTML5 <details> и <summary>: аккордеон без JavaScript — практическое руководство
Запрос «HTML5 details summary аккордеон без JavaScript» популярен у начинающих и практикующих верстальщиков, потому что эти элементы позволяют быстро сделать раскрывающиеся блоки (FAQ, спойлеры, разделы документации) без JS и с отличной поддержкой доступности. Ниже — пошаговое руководство, кодовые примеры и лучшие практики стилизации и UX.
Что такое <details> и <summary>
<details> — контейнер для скрытого по умолчанию контента. <summary> — заголовок, по нажатию на который блок раскрывается. Браузеры автоматически добавляют управление клавиатурой, роль и состояние для скринридеров, так что это по умолчанию доступное решение.
<details>
<summary>Что такое HTML5 Details?</summary>
<p>Это нативный способ делать сворачиваемые блоки без JavaScript.</p>
</details>
Чтобы показать блок раскрытым по умолчанию, используйте булев атрибут open:
<details open>
<summary>Открыто при загрузке</summary>
<p>Контент виден сразу.</p>
</details>
Пример: FAQ‑аккордеон без JS
Соберём секцию часто задаваемых вопросов на HTML5 details/summary и аккуратно её стилизуем. Добавим читаемый маркер, плавное раскрытие и фокус для клавиатуры.
<section class="faq">
<h2>FAQ: Аккордеон на HTML5</h2>
<details class="faq-item" open>
<summary>Как работает элемент <code>details</code>?</summary>
<div class="content">
<div class="content-inner">
<p>По клику на <summary> браузер сам скрывает/показывает контент и обновляет состояние для доступности.</p>
</div>
</div>
</details>
<details class="faq-item">
<summary>Можно ли стилизовать маркер?</summary>
<div class="content">
<div class="content-inner">
<p>Да. Скрываем стандартный маркер и рисуем свой через псевдоэлемент.</p>
</div>
</div>
</details>
<details class="faq-item">
<summary>Будет ли это решение доступным?</summary>
<div class="content">
<div class="content-inner">
<p>Да, элементы поддерживают клавиатуру и скринридеры из коробки.</p>
</div>
</div>
</details>
</section>
.faq { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.faq-item { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.faq-item + .faq-item { margin-top: 12px; }
/* Сводим маркер к нулю и делаем кликабельную шапку */
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
/* Кастомный индикатор раскрытия */
.faq-item summary::before { content: '▸'; display: inline-block; transition: transform .2s ease; color: #6b7280; }
.faq-item[open] summary::before { transform: rotate(90deg); }
/* Фокус и hover состояния */
.faq-item summary:hover { background: #f9fafb; }
.faq-item summary:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; border-radius: 10px; }
/* Плавное раскрытие контента (CSS Grid trick) */
.faq-item .content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item[open] .content { grid-template-rows: 1fr; }
.faq-item .content-inner { overflow: hidden; }
.faq-item .content-inner { padding: 0 1.25rem 1rem; color: #374151; }
Трюк с grid-template-rows даёт плавное открытие/закрытие без JS. Внутренний контейнер .content-inner не даёт контенту «выпрыгнуть» во время анимации.
Доступность (a11y) и UX‑советы
Продвинутая стилизация: тени, разделители, состояния
/* Разделитель между вопросом и ответом */
.faq-item[open] summary { border-bottom: 1px solid #f3f4f6; }
/* Состояние «открыт»: меняем цвет заголовка */
.faq-item[open] summary { color: #111827; }
/* Тёмная тема (пример) */
@media (prefers-color-scheme: dark) {
.faq-item { background: #111827; border-color: #1f2937; box-shadow: none; }
.faq-item summary { color: #e5e7eb; }
.faq-item .content-inner { color: #d1d5db; }
}
Частые ошибки и как их избежать
SEO: индексируется ли скрытый контент?
Да. По актуальным рекомендациям Google контент в раскрывающихся блоках (аккордеонах, вкладках) учитывается при мобильной индексации наравне с видимым, если он предназначен для удобства пользователя. Поэтому <details> подходит для FAQ, схем и длинных инструкций. Главное — не прятать «спам» и оставаться полезными.
Наследуемые и вложенные блоки
<details> можно вкладывать друг в друга, но делайте это умеренно, чтобы не запутать пользователей. Пример вложенного спойлера:
<details>
<summary>Продвинутый раздел</summary>
<p>Общее описание.</p>
<details>
<summary>Подраздел</summary>
<p>Детали для любопытных.</p>
</details>
</details>
Режим «только один пункт открыт» (необязательно)
Нативно <details> не умеет ограничивать одновременное раскрытие элементов. Если вам принципиально нужно поведение «аккордеон с одним открытым пунктом», добавьте небольшой JS (прогрессивное улучшение).
document.addEventListener('click', function(e) {
const summary = e.target.closest('summary');
if (!summary) return;
const current = summary.parentElement;
const container = current.closest('.faq');
if (!container) return;
container.querySelectorAll('details[open]').forEach(d => {
if (d !== current) d.removeAttribute('open');
});
});
Это улучшение не ломает базовую доступность: если JS отключён, элементы продолжают работать независимо друг от друга.
Практические рекомендации
open — так повысите вовлечённость.Где потренироваться и закрепить навыки
Хотите уверенно верстать такие блоки, собирать полноценные страницы и проекты? Посмотрите практический курс по вёрстке:
Прокачать вёрстку на курсе «Вёрстка сайта с нуля 2.0» ↗ — много практики, разбор типовых паттернов и проверка домашних работ.
Итог
Элементы <details> и <summary> — простой, доступный и SEO‑дружественный способ сделать аккордеон без JavaScript. Используйте их для FAQ, спойлеров и документации, стилизуйте маркер, добавляйте аккуратную анимацию и помните о доступности. Такой подход снижает сложность кода и улучшает производительность интерфейса.
