21. Co to jest tag `<details>` w HTML i jak się go używa?

Co to jest tag <details> i jak się go używa?

Tag <details> w HTML to interaktywny element, który pozwala użytkownikom odkrywać dodatkowe informacje na żądanie. Jest powszechnie używany do tworzenia rozwijalnych sekcji treści, takich jak FAQ lub dodatkowe materiały do czytania.

Podstawowe użycie

Oto prosty przykład użycia tagu <details>:

<details>
  <summary>Kliknij, aby zobaczyć więcej szczegółów</summary>
  <p>To jest dodatkowa treść, która była wcześniej ukryta.</p>
</details>

W tym przykładzie:

• Tag <summary> zapewnia streszczenie lub nagłówek dla treści, którą można rozwinąć. Działa jako klikalny obszar do przełączania widoczności zawartości wewnątrz <details>.
• <p> wewnątrz <details> zawiera treść, która początkowo jest ukryta i staje się widoczna, gdy użytkownik kliknie na <summary>.

Dostępność

Elementy <details> i <summary> są zaprojektowane tak, aby były dostępne domyślnie, wspierając nawigację klawiaturą i czytniki ekranu. Dzięki temu są doskonałym wyborem do poprawy doświadczeń użytkownika bez konieczności stosowania dodatkowego JavaScriptu lub CSS dla podstawowej funkcjonalności.

Przypadki użycia

• FAQ: Możesz użyć <details> do tworzenia rozwijalnych sekcji dla często zadawanych pytań.
• Rozwijanie treści: Dostarczanie bardziej szczegółowych informacji, które użytkownicy mogą wybrać, aby je zobaczyć.
• Stopniowe ujawnianie: Oferowanie dodatkowej treści bez przytłaczania użytkownika informacjami z góry.

Podsumowując, tag <details> jest potężnym narzędziem do zarządzania widocznością treści w sposób przyjazny dla użytkownika i dostępny.