Кратко

  • Пара details и summary даёт странице раскрывающийся блок, которым по запросу читателя управляет браузер.
  • Общий name превращает несколько блоков в исключающую группу: открытие одного закрывает другой.

Длинная веб-страница легко превращается в опрокинутый ящик: инструкции, дополнительные настройки и подробности валяются перед глазами одновременно. Сворачивать разделы с помощью скрипта разработчики умели и раньше. HTML добавил готовую петлю. Внутри <details> первым ставят <summary>; браузер показывает табличку и берёт на себя открывание. Ручка остаётся у читателя. Скромная вещь, зато ею приходится пользоваться куда чаще, чем парадными воротами.

Первый опубликованный W3C черновик разметки HTML от марта 2010 года пометил details и summary как новые элементы. details описывался как средство получить дополнительную информацию по запросу, а булев атрибут open указывал видимое состояние. В документе закрепилось ясное решение: содержание остаётся в документе, а действие по его показу получает собственную форму в языке страницы.

Справочник W3C 2011 года сохранил эту конструкцию. Сначала идёт заголовок, затем содержание; open указывает, должно ли оно быть видно. Связь между табличкой и содержимым теперь читается в самой разметке, а не только в отдельной программе. Автор по-прежнему решает, что положить внутрь и как назвать дверь. Надпись «Ещё» компактна, но заставляет посетителя угадывать, чего именно ему предложили ещё.

Действующий стандарт HTML расписывает механику. Первый дочерний summary становится легендой блока; если автор его пропустил, браузеру следует предложить собственную. Без open виден только заголовок, с open — и остальное. По действию пользователя браузер добавляет или удаляет атрибут. Событие toggle сообщает о перемене. Разметка, состояние экрана и жест человека соединены коротким и проверяемым правилом.

Даже крошечный треугольник рядом с заголовком описан в правилах отображения: для закрытого и открытого состояния предусмотрены разные маркеры. Он показывает место действия и сообщает результат. Отчёт о ходе работы, дополнительные параметры, объёмный справочник — всем подходит знакомый сигнал. Хорошую дверную ручку замечают главным образом тогда, когда она оказывается не с той стороны.

Позднее двери получили общий распорядок. Одинаковый name связывает несколько details: открытие одного закрывает другое уже открытое. Браузер сам собирает исключающий аккордеон. Стандарт предупреждает, что такая аккуратность способна раздражать тех, кому нужно держать открытыми несколько разделов. Экран выглядит чище, а читатель ходит по коридору взад-вперёд. За порядок платят не пиксели, а внимание.

История этой мелочи — история распределения полномочий. Автор устраивает комнаты, подписывает двери и может установить правило закрывания соседней. Браузер двигает петли. Читатель выбирает, куда заглянуть. Хорошая подпись обещает точное содержание, а хорошая планировка позволяет сравнивать нужные разделы. HTML сделал механизм; удобство дома остаётся редакторским решением.