Основний вміст

  • <body>

Тег <details>

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
12.0+15.0+6.0+4.0+6.0+

Специфікація

HTML:3.24.015.0XHTML:1.01.1

Опис

Тег <details> використовується для зберігання інформації, яку можна сховати або показати за бажанням користувача. За замовчуванням вміст тегу не відображається, для зміни статусу застосовується атрибут open.

Синтаксис

<details open="open">Текст</details>

Атрибути

open
Показує інформацію всередині тегу.

Закриваючий тег

Обов'язковий.

Приклад

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>details</title>
 </head> 
 <body>
  <details>Покажи, що у тебе є!</details>
 </body> 
</html>
HTML5

Часті запитання

  • Q: Як працює тег <details> в HTML?

    A: Елемент <details> використовується для створення спадаючого списку, який містить додаткову інформацію, яку можна показувати або приховувати за допомогою кнопки.

  • Q: Як використовувати тег <details> у HTML?

    A: Використовуйте тег <details> для обгортання контенту, який ви хочете приховати. Додайте до нього елемент <summary>, який буде видимим заголовком спадаючого списку.

  • Q: Як змінити стиль вигляду тегу <details> в HTML?

    A: Ви можете змінити стиль вигляду елементів <details> та <summary> за допомогою CSS, встановивши власні властивості для їх класів або ідентифікаторів.

  • Q: Як показати спадаючий список відразу при завантаженні сторінки з використанням тегу <details>?

    A: Встановіть атрибут 'open' для тегу <details>, щоб показати спадаючий список відразу при завантаженні сторінки.

  • Q: Які браузери підтримують тег <details> в HTML?

    A: Більшість сучасних браузерів підтримують тег <details>, але можуть виникати проблеми з підтримкою у старіших версіях деяких браузерів, таких як Internet Explorer.