Co to jest `details` w HTML?

Element <details> w HTML służy do tworzenia interaktywnych sekcji, które użytkownik może samodzielnie otwierać i zamykać, ukazując lub ukrywając dodatkowe szczegóły na stronie. Zastosowanie tego znacznika podnosi wygodę korzystania z witryn, poprawia dostępność informacji oraz ułatwia budowę uporządkowanych, rozbudowanych dokumentów i FAQ.

Budowa i sposób działania

• Znacznik <details> działa jako widget rozwijany, który domyślnie jest zamknięty,
• po jego kliknięciu rozwija się, odsłaniając całą, zdefiniowaną wewnątrz niego zawartość,
• najczęstszą praktyką jest umieszczenie wewnątrz <details> nagłówka w tagu <summary>, który stanowi widoczną etykietę do kliknięcia przez użytkownika.

Struktura elementu <details>

<details>
  <summary>Tytuł sekcji (kliknij, aby rozwinąć)</summary>
  <p>Treść widoczna po rozwinięciu sekcji.</p>
</details>

Przykłady zastosowań

1. FAQ (Najczęściej zadawane pytania) –

<details>
  <summary>Czy mogę zwrócić produkt?</summary>
  <p>Tak, każdy produkt można zwrócić w ciągu 14 dni od zakupu.</p>
</details>

2. Ukrywanie rozbudowanej dokumentacji technicznej –

<details>
  <summary>Pełna specyfikacja techniczna</summary>
  <ul>
    <li>Procesor: 8-rdzeniowy</li>
    <li>Pamięć RAM: 16GB</li>
    <li>Dysk: SSD 512GB</li>
  </ul>
</details>

3. Instrukcje i podpowiedzi kontekstowe –

<form>
  <label for="email">E-mail</label>
  <input id="email" type="email">
  <details>
    <summary>Jakiego formatu używać?</summary>
    <p>Wpisz poprawny adres e-mail, np. [email protected]</p>
  </details>
</form>

4. Zwijalne bloki kodu lub zaawansowane opcje w ustawieniach –

<details>
  <summary>Pokaż przykładowy kod</summary>
  <pre>
function hello() {
  console.log('Witaj świecie!');
}
  </pre>
</details>

Najważniejsze cechy i atrybuty

• Dowolna zawartość – wewnątrz <details> można umieścić tekst, obrazy, listy, tabele, formularze czy inne elementy HTML;
• Atrybut open – jeśli chcesz, aby sekcja domyślnie była rozwinięta, dodaj atrybut open:

<details open>
  <summary>Sekcja domyślnie otwarta</summary>
  <p>Ta treść jest widoczna od razu po załadowaniu strony.</p>
</details>

• Dostępność – poprawne użycie tagu <summary> wpływa pozytywnie na dostępność strony dla użytkowników korzystających z czytników ekranu.

Kompatybilność

Element <details> jest obsługiwany przez większość popularnych przeglądarek, takich jak Chrome, Firefox, Edge, Safari oraz Opera (od odpowiednich wersji przeglądarek). Nie wymaga dodatkowych bibliotek JavaScript do podstawowego działania.

Zastosowania w praktyce

Gdzie warto używać <details> –

• sekcje FAQ (FAQ Accordion),
• zwijane szczegóły produktu w sklepach internetowych,
• rozwijane informacje o plikach do pobrania,
• ukrywanie długich fragmentów kodu, cytatów lub zaawansowanych opcji formularza,
• pomoc kontekstowa przy polach formularzy.

Kiedy lepiej nie używać <details> –

• do budowy głównych nawigacji,
• jako zamiennik zaawansowanych rozwiązań typu modal/popup.

Podsumowanie praktyczne

Wykorzystanie <details> pozwala w prosty sposób stworzyć klarowne, interaktywne oraz przyjazne w obsłudze sekcje, znacząco podnosząc jakość i ergonomię treści publikowanych w serwisach internetowych.