HTML-тег <details>

HTML-тег <details> используется для создания сворачиваемого раздела, позволяющего пользователям отображать или скрывать контент. Он представляет собой интерактивный элемент, полезный для добавления дополнительной информации или деталей, которые не видны сразу.

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

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

Базовая структура тега <details> следующая: 

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

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

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

  • open: Этот логический атрибут указывает, что данные видны(открыты) по умолчанию. Если атрибут отсутствует, данные по умолчанию свёрнуты.
  • Глобальные атрибуты: тег <details> поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: Тег <details> поддерживает такие атрибуты событий, как onclick и onfocus .

Базовый пример HTML-тега <details>

Вот простой пример, демонстрирующий использование тега <details> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <details>
            <summary>What is HTML?</summary>
            HTML(HyperText Markup Language) is the standard language for creating web pages.
        </details>
    </body>
</html>

Пояснение: В этом примере содержимое тега <details> по умолчанию скрыто. Нажатие на ссылку «Что такое HTML?» открывает скрытое содержимое.

Использование атрибута open в теге <details>

Атрибут open делает тег <details> расширенным по умолчанию: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Open Attribute Example</h2>
        <details open>
            <summary>Advantages of HTML</summary>
            HTML is easy to learn, widely supported, and essential for web development.
        </details>
    </body>
</html>
Использование открытого атрибута в теге details

Объяснение: Атрибут open делает содержимое внутри тега <details> видимым при загрузке страницы.

Стилизация тегов <details> и <summary>

Теги <details> и <summary> можно стилизовать с помощью CSS для придания индивидуального вида: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            details {
                margin: 10px 0;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                background-color: #f9f9f9;
            }

            summary {
                font-weight: bold;
                cursor: pointer;
                color: #007BFF;
            }

            summary:hover {
                color: #0056b3;
            }
        </style>
    </head>
    <body>
        <h2>Styled Details Tag Example</h2>
        <details>
            <summary>Click to learn more</summary>
            This is a styled collapsible section using CSS.
        </details>
    </body>
</html>
Оформление деталей и резюме Теги

Результат: Тег <details> оформлен отступами, рамкой и светлым фоном. Тег <summary> оформлен жирным шрифтом и эффектом наведения для лучшей интерактивности.

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

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

Расширенный пример: вложенные теги <details>

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Nested Details Example</h2>
        <details>
            <summary>Programming Languages</summary>
            <p>Here are some popular programming languages:</p>
            <details>

Объяснение: Внешний тег <details> предоставляет категорию высокого уровня, а вложенные теги предоставляют более подробную информацию о каждом элементе.