HTML-тег <summary>

HTML-тег <summary> используется для создания видимого заголовка элемента <details> . Элемент <details> используется для отображения сворачиваемого содержимого, а тег <summary> предоставляет кликабельную метку, которая переключает видимость содержимого.

По умолчанию текст <summary> видим, и щелчок по нему разворачивает или сворачивает скрытое содержимое внутри элемента <details> .

Базовый синтаксис HTML-тега <summary>

Тег <summary> должен быть вложен в элемент <details> . Его базовая структура: 

<details>
    <summary>Summary Text</summary>
    Hidden content goes here.
</details>

Нажатие на текст <summary> переключает видимость содержимого внутри тега <details> .

Пример использования тега <summary>

Вот пример использования тега <summary> для создания сворачиваемого содержимого раздела часто задаваемых вопросов: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Frequently Asked Questions</h2>

        <details>
            <summary>What is HTML?</summary>
            HTML(HyperText Markup Language) is the standard language for creating webpages.
        </details>

        <details>
            <summary>What is the <summary> tag?</summary>
            The <summary> tag is used to provide a clickable label for the <details> element.
        </details>
    </body>
</html>

Пояснение: Щелчок по вопросу в каждом теге <summary> разворачивает или сворачивает ответ внутри соответствующего элемента <details> .

Стилизация тега <summary> с помощью CSS

Вы можете настроить внешний вид тега <summary> с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            summary {
                cursor: pointer;
                font-size: 18px;
                font-weight: bold;
                color: #007BFF;
            }
            details[open] summary {
                color: #FF5722;
            }
        </style>
    </head>
    <body>
        <h2>Styled Summary Example</h2>

        <details>
            <summary>Click to reveal content</summary>
            This is the hidden content that becomes visible when you click the summary.
        </details>
    </body>
</html>

Результат: текст резюме меняет цвет при развертывании элемента <details> , обеспечивая визуальную обратную связь для пользователя.

Атрибуты HTML-тега <summary>

  • Глобальные атрибуты: тег <summary> поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: к тегу <summary> можно прикрепить обработчики событий, такие как onclick , onmouseover и т. д.

Эти атрибуты позволяют динамически стилизовать и взаимодействовать с элементом <summary> .

Практическое применение тега <summary>

  • Часто задаваемые вопросы: используйте тег <summary> для создания расширяемых вопросов со скрытыми ответами.
  • Сворачиваемые разделы: организуйте длинные документы или статьи в разделы, которые можно разворачивать или сворачивать.
  • Интерактивные руководства: предоставляют пошаговые инструкции со сворачиваемыми этапами для лучшего пользовательского опыта.
  • Меню: создайте сворачиваемые навигационные меню с помощью элементов <details> и <summary> .

Тег <summary> при использовании с элементом <details> создает доступный, удобный и интерактивный контент для веб-страниц.