Какие семантические HTML-теги можно использовать для реализации аккордеона без JavaScript?

Использование семантических тегов для аккордеона

Для создания аккордеона без JavaScript идеально подходят теги <details> и <summary>. Они являются частью HTML5 и предоставляют встроенную функциональность раскрытия и скрытия содержимого. Это семантически корректно, так как браузеры и вспомогательные технологии (например, скринридеры) правильно интерпретируют эти элементы.

Как это работает

Каждый раздел аккордеона оборачивается в <details>. Внутри него первый дочерний элемент — <summary>, который служит заголовком. Остальное содержимое будет скрыто до клика. При клике на <summary> браузер переключает атрибут open у <details>, показывая или скрывая содержимое.

Пример кода

<details>
  <summary>Раздел 1</summary>
  <p>Содержимое первого раздела.</p>
</details>
<details>
  <summary>Раздел 2</summary>
  <p>Содержимое второго раздела.</p>
</details>
<details>
  <summary>Раздел 3</summary>
  <p>Содержимое третьего раздела.</p>
</details>

Особенности и стилизация

По умолчанию <details> отображается как блок с маркером (треугольником) слева от <summary>. Вы можете стилизовать его с помощью CSS, например, убрать маркер или добавить анимацию. Однако для сложных аккордеонов с одновременным открытием только одного раздела потребуется JavaScript, так как HTML не предоставляет такой функциональности из коробки.

Вывод

Теги <details> и <summary> — это простой и доступный способ создания аккордеонов без JavaScript. Они подходят для случаев, когда не требуется сложное поведение, например, для FAQ или документации. Если нужна более тонкая настройка, стоит рассмотреть JavaScript-решения.