Тег <summary>

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

Атрибути

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

Тег <summary> не має специфічних (унікальних) атрибутів.

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

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

  • id — унікальний ідентифікатор. Наприклад:
<details>
    <summary id="question1">Що таке HTML?</summary>
    <p>HTML — це мова розмітки гіпертексту.</p>
</details>
  • class — для CSS-стилізації. Наприклад:
<details>
    <summary class="faq-title">Що таке CSS?</summary>
    <p>CSS — це каскадні таблиці стилів.</p>
</details>
  • style — для інлайн-стилів. Наприклад:
<details>
    <summary style="color: blue;">Що таке JavaScript?</summary>
    <p>JavaScript — це мова програмування для динаміки вебсторінок.</p>
</details>
  • title — текстова підказка при наведенні. Наприклад:
<details>
    <summary title="Клікніть, щоб дізнатись більше">Що таке DOM?</summary>
    <p>DOM — це об’єктна модель документа.</p>
</details>
  • lang — вказує мову вмісту елемента. Наприклад:
<details>
    <summary lang="uk">Що таке сервер?</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>Приклад використання summary</title>
    <style>
        details {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        summary {
            font-weight: bold;
            cursor: pointer;
            color: darkblue;
        }
    </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>.
  • При відсутності <summary> браузер все одно дозволяє відкривати/закривати <details>, але без текстової підказки.
  • Може містити текст, інлайн-елементи (наприклад, <strong>, <span>, <em>), але не блокові елементи.
  • Підтримує кастомну стилізацію: можна змінити вигляд стрілочки через псевдоелементи (::marker у підтримуваних браузерах).
  • Підтримується усіма сучасними браузерами.