W3docs
ru
Войти

HTML тег <details>

Тег <details> содержит дополнительную информацию, которую пользователь может открыть и просмотреть. Атрибуты тега и примеры.

Тег <details> является одним из элементов HTML5. Он создаёт виджет раскрытия: интерактивный элемент управления, который пользователь может открыть, чтобы увидеть дополнительное содержимое, и закрыть снова, чтобы скрыть его. По умолчанию содержимое остаётся скрытым, а браузер отображает небольшой треугольник (маркер раскрытия), который поворачивается, указывая на открытое или закрытое состояние.

Первым дочерним элементом <details> должен быть элемент <summary>, который задаёт видимую метку, по которой пользователь щёлкает для переключения виджета. <summary> — это сам элемент управления, а остальное содержимое внутри <details> — то, что отображается или скрывается. Если <summary> опущен, браузер подставляет метку по умолчанию, например «Подробнее».

Зачем использовать <details>

Главное преимущество <details> — он даёт полноценный виджет показа/скрытия без какого-либо JavaScript. Браузер берёт на себя поведение открытия/закрытия, поддержку клавиатуры и доступность.

Типичные сценарии использования:

  • Списки FAQ — каждый вопрос является <summary>, а ответ раскрывается по щелчку.
  • Постепенное раскрытие — скрытие расширенных настроек, длинного юридического текста или разделов «читать далее», чтобы страница оставалась удобной для просмотра.
  • Запасной аккордеон без JS — поскольку виджет работает без скриптов, <details> служит надёжной основой для аккордеонов. Даже если JavaScript не загрузится, содержимое по-прежнему будет доступно.

По сравнению с аккордеоном, созданным вручную на JavaScript, <details> требует меньше кода, автоматически доступен с клавиатуры и для программ экранного чтения, а также корректно деградирует. Обращайтесь к пользовательскому JS-виджету только тогда, когда вам нужно поведение, которое нативный элемент обеспечить не может (например, анимированные переходы высоты по всему содержимому).

Синтаксис

Тег <details> используется парно. Содержимое записывается между открывающим (<details>) и закрывающим (</details>) тегами.

Пример HTML-тега <details>:

HTML-тег <details>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>
Попробуйте сами »

Результат

details example

Атрибут open

Добавьте boolean-атрибут open, чтобы виджет был раскрыт при загрузке страницы:

<details open>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>

Атрибут open отражает текущее состояние в реальном времени. Когда пользователь переключает виджет, браузер автоматически добавляет или удаляет open на элементе — управлять этим вручную не нужно. Вы также можете переключить его самостоятельно из скрипта:

const details = document.querySelector('details');
details.open = true;   // expand
details.open = false;  // collapse

Чтение details.open сообщает, открыт ли виджет в данный момент.

Пример HTML-тега <details> внутри тега <form>:

HTML-тег <details>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>
Попробуйте сами »

Атрибуты

АтрибутЗначениеОписание
openopenУказывает, что информация в теге должна изначально отображаться в раскрытом виде.

Тег <details> также поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать HTML-тег <details>

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

Стилизация маркера раскрытия

Большинство браузеров отображают треугольник открытия/закрытия через псевдоэлемент ::marker у <summary>. Чтобы изменить или убрать его, задайте list-style для summary:

/* Remove the default triangle */
summary {
  list-style: none;
}

/* Replace it with your own characters */
summary::marker {
  content: "▶ ";
}
details[open] summary::marker {
  content: "▼ ";
}

Старые браузеры на основе WebKit (старые версии Safari/Chrome) использовали нестандартный псевдоэлемент summary::-webkit-details-marker. Чтобы охватить и их, скройте его тоже:

summary::-webkit-details-marker {
  display: none;
}

Событие toggle

Элемент <details> генерирует событие toggle каждый раз, когда открывается или закрывается. Это правильный хук для отложенной загрузки контента, отправки аналитики или синхронизации состояния интерфейса:

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Opened');
  } else {
    console.log('Closed');
  }
});

Событие срабатывает после того, как состояние уже изменилось, поэтому details.open отражает новое значение внутри обработчика.

Доступность

Нативная пара <details>/<summary> имеет встроенную поддержку доступности. Браузеры представляют <summary> с ролью, похожей на кнопку, а <details> — как group, объявляют развёрнутое/свёрнутое состояние программам экранного чтения, делают summary фокусируемым и управляемым с помощью Enter и Space. Это главная причина предпочитать нативный элемент скриптовому аккордеону — вы получаете правильную семантику и поддержку клавиатуры бесплатно, без необходимости самостоятельно управлять aria-expanded.

Группировка с помощью атрибута name

Современные браузеры (Chrome 120+ и другие новые движки) поддерживают атрибут name у <details>. Когда несколько элементов <details> имеют одинаковый name, они ведут себя как эксклюзивная группа, подобно аккордеону: открытие одного автоматически закрывает остальные.

<details name="faq" open>
  <summary>Question one</summary>
  <p>Answer one.</p>
</details>
<details name="faq">
  <summary>Question two</summary>
  <p>Answer two.</p>
</details>

Поскольку это более новая возможность, браузеры, не поддерживающие name, просто игнорируют его и позволяют каждому виджету открываться независимо — безопасное прогрессивное улучшение.

Связанные теги

  • <summary> — видимая метка и элемент управления для виджета <details>.
  • <dialog> — нативный модальный или немодальный диалог, полезный, когда нужен оверлей, а не встроенное раскрытие.

Практика

Практика
Что верно относительно HTML-тега <details>?
Что верно относительно HTML-тега <details>?
Was this page helpful?