Poznaj Programowanie

Tagi HTML: details

Piotr Grochal 7 min. czytania

Cześć, programiści i entuzjaści web developmentu! Dziś na naszym blogu o HTML, CSS i JavaScript zanurzymy się w fascynujący świat znaczników semantycznych HTML5. Skupimy się na elemencie <details>, który w połączeniu z <summary> pozwala tworzyć rozwijane panele – idealne do porządkowania treści bez użycia JS.

Najczęstsze zastosowania elementu <details> to między innymi:

  • ukrywanie dodatkowych informacji,
  • sekcje FAQ z pytaniami i odpowiedziami,
  • szczegóły produktów w e‑commerce,
  • menu pomocy lub dokumentacji.

Wyobraź sobie stronę, na której użytkownik klika nagłówek, a treść rozwija się płynnie jak akordeon. To natywne, lekkie i semantyczne rozwiązanie wspierane przez Chrome, Firefox, Safari oraz Edge. Zamiast hakować CSS-em czy dodawać JS, po prostu używasz znaczników.

Czym dokładnie jest <details> i jak działa?

Element <details> reprezentuje interaktywny widżet, który użytkownik może rozwinąć lub zwinąć, by pokazać/ukryć dodatkowe informacje. Działa jak spoiler lub akordeon – domyślnie jest zamknięty, a kliknięcie otwiera zawartość.

Kluczowy jest <summary> – musi być pierwszym dzieckiem <details>. To on pokazuje widoczny nagłówek/etykietę (np. „Pokaż szczegóły”). Jeśli pominiesz <summary>, przeglądarka może wstawić domyślny tekst (np. „Szczegóły”).

Podstawowa składnia HTML wygląda tak:

<details>
<summary>Kliknij, by rozwinąć</summary>
<p>Tutaj ukryta treść – paragraf, lista, obrazek czy nawet formularz!</p>
</details>

Po kliknięciu w <summary> cała zawartość po nim się rozwija. Proste, dostępne i bez JavaScript.

Atrybut open – kontrola stanu domyślnego

Domyślnie panel jest zamknięty. Dodaj atrybut <details open>, by otworzyć go od razu po załadowaniu strony. To atrybut logiczny – nie potrzebuje wartości (choć open="" też działa).

Przykład użycia atrybutu open:

<details open>
<summary>Domyślnie otwarty panel</summary>
<ul>
<li>Punkt 1: Wymiary 10x20 cm</li>
<li>Punkt 2: Waga 500g</li>
<li>Punkt 3: Materiał: aluminium</li>
</ul>
</details>

Rezultat: użytkownik widzi listę od razu, ale nadal może ją zwinąć, klikając <summary>.

Kontekst użycia w HTML5 warto zapamiętać w skrócie:

  • elementy nadrzędne – dowolne (np. <form>, <article>, <section>);
  • elementy potomne – dokładnie jeden <summary> jako pierwszy, potem flow content (treść blokowa/liniowa: tekst, listy, obrazy itp.);
  • znaczniki – obowiązkowe otwierający i zamykający;
  • wsparcie przeglądarek – szerokie w nowoczesnych przeglądarkach (realnie ~98% użytkowników);
  • interfejs DOM – HTMLDetailsElement; można sterować JS (np. details.open = true;).

Praktyczne przykłady użycia <details>

1. FAQ na stronie – idealne do pytań i odpowiedzi

Każde pytanie jako osobny blok <details> prezentuje się klarownie i oszczędza miejsce:

<section>
<h2>FAQ</h2>
<details>
<summary>Jak zacząć z HTML5?</summary>
<p>Użyj edytora jak VS Code, napisz &lt;!DOCTYPE html&gt; i dodaj semantyczne znaczniki jak &lt;details&gt;!</p>
</details>
<details>
<summary>Czy potrzebuję JavaScript do rozwijanych paneli?</summary>
<p>Nie! &lt;details&gt; to natywne rozwiązanie HTML5.</p>
</details>
</section>

Kliknij pytanie – odpowiedź się rozwija. Rozwiązanie jest semantyczne i przyjazne dla czytników ekranu.

2. Szczegóły produktu w e‑sklepie

Specyfikacja pojawia się na żądanie, bez przeładowywania widoku:

<article class="produkt">
<h3>iPhone 15</h3>
<p>Cena: 4999 zł</p>
<details>
<summary>Pokaż specyfikację techniczną</summary>
<table>
<tr><td>Ekran</td><td>6.1" Super Retina</td></tr>
<tr><td>Pamięć</td><td>128 GB</td></tr>
<tr><td>Bateria</td><td>3349 mAh</td></tr>
</table>
</details>
</article>

3. Formularz z pomocą

Dodaj kontekstowe wskazówki, które nie rozpraszają użytkownika:

<form>
<label>Plik do uploadu:</label>
<input type="file" accept=".html,.css,.js">
<details>
<summary>Ilość plików: tylko jeden!</summary>
<p><strong>Ostrzeżenie:</strong> Wybierz dokładnie jeden plik.</p>
</details>
</form>

4. Menu nawigacyjne z podpunktami

Proste, responsywne menu rozwijane – bez linii JavaScript:

<nav>
<details>
<summary>Produkty</summary>
<ul>
<li><a href="/laptopy">Laptopy</a></li>
<li><a href="/smartfony">Smartfony</a></li>
</ul>
</details>
</nav>

Stylizacja CSS – dostosuj wygląd do swojego designu

Domyślny wygląd <details> jest prosty (trójkąt obok summary), ale CSS pozwala całkowicie zmienić estetykę. Użyj selektorów takich jak details[open], summary::before czy ::-webkit-details-marker.

Kompletny przykład stylizacji, który możesz skopiować i przetestować:

<!DOCTYPE html>
<html lang="pl">
<head>
<style>
details {
border: 1px solid #ddd;
border-radius: 8px;
padding: 0.5em;
margin-bottom: 1em;
background: #f9f9f9;
font-family: Arial, sans-serif;
}
summary {
font-weight: bold;
cursor: pointer;
padding: 0.5em;
background: linear-gradient(to right, #e0e0e0, #f0f0f0);
border-radius: 4px;
}
/* Stan otwarty */
details[open] > summary {
border-bottom: 1px solid #ccc;
margin-bottom: 0.5em;
}
/* Ukryj domyślny marker w Chrome/Safari */
summary::-webkit-details-marker {
display: none;
}
/* Dodaj własny + / - */
summary::before {
content: '+ ';
color: #007bff;
font-weight: bold;
}
details[open] summary::before {
content: '− ';
}
/* Wcięcie zawartości */
details > *:not(summary) {
margin-left: 20px;
color: #555;
}
</style>
</head>
<body>
<details>
<summary>Stylizowany panel</summary>
<p>To jest rozwijana treść z niestandardowym designem!</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</details>
</body>
</html>

Efekt: elegancki akordeon z własnym znacznikiem (+/−), gradientem i wcięciami, działający w wielu przeglądarkach.

Uwaga na przeglądarki – ::-webkit-details-marker działa tylko w silniku WebKit (Chrome, Safari). W Firefoxie rozważ list-style-image lub własne rozwiązanie. Testuj zawsze!

Dostępność (a11y) i najlepsze praktyki

Pamiętaj o następujących zasadach, aby zapewnić dobrą dostępność i UX:

  • screen readery – ogłaszają „rozwijalny [summary], zwinięty/rozwinięty”, co zapewnia sensowny ARIA‑like UX bez dodatkowego kodu;
  • klawiatura – obsługa działa natywnie (Tab do fokusu, Enter/Spacja do przełączania);
  • najlepsze praktyki –
    • używaj <summary> z opisowym tekstem (nie tylko ikonki),
    • nie nadużywaj – maksymalnie 5–7 komponentów na stronę, by nie komplikować nawigacji,
    • łącz z <fieldset> w formularzach dla lepszego grupowania,
    • dodaj hook JS: details.addEventListener('toggle', () => console.log('Zmiana stanu!'));.
  • ograniczenia – brak wsparcia w IE11 (użyj polyfill); brak natywnej animacji – możesz dodać transition w CSS (np. na max-height).

Zaawansowane triki z JavaScript

Choć <details> jest samodzielny, JavaScript może rozszerzyć jego możliwości, np. logowanie otwarć lub zapisywanie stanu:

document.querySelectorAll('details').forEach(detail => {
detail.addEventListener('toggle', () => {
if (detail.open) {
console.log('Otwarto: ' + detail.querySelector('summary').textContent);
}
});
});

W praktyce możesz zapisywać stan w localStorage lub dodać animację otwierania/zamykania.