Тег <details>

Тег <details> (укр. — “деталі” або “додаткові відомості”) в HTML використовується для створення розкривних блоків, які за замовчуванням можуть бути прихованими та розкриватися при натисканні. Це зручний елемент для створення FAQ, підказок, прихованих описів тощо — без необхідності писати JavaScript.

Всередині тегу <details> часто використовується тег <summary> — він визначає заголовок розкривного блоку.

Атрибути

Специфічні атрибути

  • open — якщо присутній, елемент буде відкритий за замовчуванням при завантаженні сторінки. Наприклад:
<details open>
    <summary>Що таке HTML?</summary>
    <p>HTML — це мова розмітки гіпертексту.</p>
</details>

Глобальні атрибути

Тег <details> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<details id="faq1">
    <summary>Що таке CSS?</summary>
    <p>CSS — це каскадні таблиці стилів.</p>
</details>
  • class — для стилізації через CSS. Наприклад:
<details class="faq-block">
    <summary>Що таке JavaScript?</summary>
    <p>JavaScript — це мова програмування для створення динамічних вебсторінок.</p>
</details>
  • style — для інлайн-стилів. Наприклад:
<details style="border: 1px solid #ccc; padding: 10px;">
    <summary>Що таке DOM?</summary>
    <p>DOM — це об’єктна модель документа.</p>
</details>
  • title — текстова підказка при наведенні. Наприклад:
<details title="Розгорнути для перегляду">
    <summary>Що таке API?</summary>
    <p>API — це інтерфейс прикладного програмування.</p>
</details>
  • lang — вказує мову вмісту елемента. Наприклад:
<details lang="uk">
    <summary>Що таке сервер?</summary>
    <p>Сервер — це пристрій або програма, яка обробляє запити клієнтів.</p>
</details>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання details</title>
    <style>
        details {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        summary {
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>FAQ:</h2>

    <details>
        <summary>Що таке HTML?</summary>
        <p>HTML — це мова розмітки гіпертексту.</p>
    </details>

    <details open>
        <summary>Що таке CSS?</summary>
        <p>CSS — це каскадні таблиці стилів для оформлення сторінок.</p>
    </details>

    <details>
        <summary>Що таке JavaScript?</summary>
        <p>JavaScript — це мова програмування для взаємодії з вебсторінкою.</p>
    </details>
</body>
</html>

Додаткові моменти

  • Тег <summary> рекомендується завжди використовувати як перший дочірній елемент <details>.
  • За замовчуванням браузери додають стрілочку ( disclosure triangle ), яка вказує на можливість розгортання.
  • Можна стилізувати вигляд елемента та стрілочки через CSS.
  • Працює без JavaScript — повністю нативна поведінка.
  • Підвищує доступність контенту, особливо в довгих документах.
  • Підтримується усіма сучасними браузерами (крім дуже старих версій IE).