Tagi HTML: summary

Tag <summary> reprezentuje podsumowanie, podpis lub legendę dla nadrzędnego elementu <details>. To semantyczny element HTML5, który umożliwia tworzenie interaktywnych, rozwijanych sekcji treści na stronie internetowej.

Element <summary> powinien być pierwszym dzieckiem <details>. Kliknięcie w <summary> rozwija lub zwija zawartość ukrytą w <details>, bez konieczności użycia JavaScriptu.

Jak działa `<summary>` w praktyce?

Domyślnie przeglądarka wyświetla wyłącznie element <summary>, który pełni rolę klikalnego nagłówka. Użytkownik może w każdej chwili wyświetlić lub ukryć treść umieszczoną wewnątrz <details>. Jeśli <summary> nie będzie zdefiniowany, przeglądarka pokaże domyślną etykietę (np. Chrome: „Szczegóły”).

Przykład podstawowy

Oto najprostszy przykład użycia tagu <summary> wraz z <details>:

<details> <summary>Pokaż/Ukryj szczegóły produktu</summary> <p>Tutaj znajdują się dodatkowe informacje o produkcie, takie jak wymiary, waga, materiał wykonania itp.</p> <ul> <li>Wymiary: 10cm x 20cm x 5cm</li> <li>Waga: 500g</li> <li>Materiał: Plastik</li> </ul> </details>

Tekst w <summary> jest zawsze widoczny i klikalny, natomiast akapit i lista są ukrywane lub pokazywane po kliknięciu.

Praktyczne zastosowania

Tag <summary> sprawdza się doskonale w poniższych scenariuszach:

Sekcje FAQ (najczęściej zadawane pytania) – każde pytanie umieszczasz w <summary>, a odpowiedź w <details>;
Zaawansowane opcje formularza – ukrywanie dodatkowych ustawień do momentu, gdy użytkownik tego potrzebuje;
Analizy i dokumenty – pokazywanie podsumowań z możliwością przeglądania szczegółów.

Przykład – sekcja FAQ

Poniżej znajdziesz prostą implementację sekcji FAQ z użyciem <details> i <summary>:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>FAQ – Details i Summary</title> </head> <body> <h1>Najczęściej Zadawane Pytania</h1>


  <details>

    <summary>Jak mogę zmienić hasło?</summary>

    <p>Aby zmienić hasło, przejdź do ustawień konta, wybierz opcję "Bezpieczeństwo" i kliknij "Zmień hasło".</p>

  </details>
  <details>

    <summary>Jak skontaktować się z obsługą klienta?</summary>

    <p>Obsługę klienta możesz uzyskać za pośrednictwem:</p>

    <ul>

      <li>Email: [email protected]</li>

      <li>Chat: dostępny 24/7 na naszej stronie</li>

      <li>Telefon: +48 12 345 67 89</li>

    </ul>

  </details>

<details> <summary>Czy mogę anulować subskrypcję?</summary> <p>Tak, możesz anulować subskrypcję w każdej chwili. Przejdź do ustawień konta i kliknij "Anuluj subskrypcję".</p> </details> </body> </html>

Stylizacja CSS

Wygląd elementów <details> i <summary> można elastycznie dostosować za pomocą CSS. Oto przykład bardziej zaawansowanego stylu:

details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em; margin-bottom: 1em; }


summary {

  font-weight: bold;

  cursor: pointer;

  padding: 0.5em;

  margin: -0.5em -0.5em 0;

  background-color: #f0f0f0;

}
details[open] > summary {

  border-bottom: 1px solid #aaa;

  margin-bottom: 0.5em;

}
/* Ukrycie domyślnego znacznika w WebKit (Chrome, Safari) */

summary::-webkit-details-marker {

  display: none;

}
/* Dodanie własnego znacznika (+ / -) */

summary::before {

  content: "+";

  margin-right: 0.5em;

  font-weight: bold;

}

details[open] > summary::before { content: "-"; }

W powyższym kodzie wykorzystujemy selektor details[open] do zmiany stylu po rozwinięciu panelu. Przykładowo, można dodać czerwoną ramkę tylko dla otwartego panelu:

details[open] { border: 1px solid red; }

Atrybut `open`

Element <details> posiada atrybut open, który pozwala na domyślne wyświetlenie zawartości bez konieczności klikania:

<details open> <summary>Ta sekcja jest domyślnie rozwinięta</summary> <p>Ta treść będzie widoczna od razu, bez konieczności klikania na summary.</p> </details>

Atrybuty i wsparcie

Element <summary> obsługuje atrybuty globalne i zdarzeniowe (m.in. id, class, title, zdarzenia typu click). Zarówno znacznik otwierający, jak i zamykający są obowiązkowe, a interaktywność zapewniają domyślnie przeglądarki.

Dostępność w popularnych przeglądarkach wygląda następująco:

Przeglądarka	Wsparcie `<details>`/`<summary>`
Chrome	Tak
Firefox	Tak
Safari	Tak
Edge	Tak
Opera	Tak
Internet Explorer	Nie

Zaawansowany przykład – formularz z opcjami

Poniżej znajdziesz przykład formularza, w którym dodatkowe ustawienia są ukryte w <details> i rozwijane po kliknięciu w <summary>:

<form> <label for="email">Email:</label> <input type="email" id="email" name="email" required>


  <details>

    <summary>Zaawansowane ustawienia</summary>
    <fieldset>

      <legend>Powiadomienia</legend>

      <label>

        <input type="checkbox" name="notifications" checked>

        Włącz powiadomienia e-mail

      </label>

      <label>

        <input type="checkbox" name="newsletter">

        Subskrybuj nasz newsletter

      </label>

    </fieldset>
    <fieldset>

      <legend>Prywatność</legend>

      <label>

        <input type="radio" name="privacy" value="public">

        Profil publiczny

      </label>

      <label>

        <input type="radio" name="privacy" value="private" checked>

        Profil prywatny

      </label>

    </fieldset>
  </details>

<button type="submit">Wyślij formularz</button> </form>

Obsługa JavaScriptem

Możesz programistycznie kontrolować element <details> i reagować na jego stan za pomocą prostych instrukcji:

// Pobranie elementu details const details = document.querySelector('details');


// Sprawdzenie, czy panel jest otwarty

if (details.open) {

  console.log('Panel jest rozwinięty');

}
// Programistyczne otwarcie/zamknięcie panelu

details.open = true;  // Otwiera panel

details.open = false; // Zamyka panel

// Nasłuchiwanie zmiany stanu details.addEventListener('toggle', function() { if (this.open) { console.log('Panel został otwarty'); } else { console.log('Panel został zamknięty'); } });

Dobre praktyki dostępności i UX

Aby zachować spójność doświadczenia i dostępność interfejsu, stosuj poniższe wskazówki:

Krótkie i opisowe nagłówki – treść w <summary> powinna jasno opisywać zawartość sekcji, np. „Parametry techniczne”;
Bez zagnieżdżania interaktywnych elementów – unikaj przycisków i linków wewnątrz <summary>, aby nie zaburzać nawigacji klawiaturą;
Stan wyjściowy – sekcje o krytycznej treści ustaw jako otwarte (open), aby nie ukrywać ważnych informacji;
Konsekwentna stylizacja – wyraźnie odróżnij stan zwinięty i rozwinięty (np. ikoną lub zmianą tła), by poprawić zrozumiałość.

Wiadomości kluczowe

Najważniejsze informacje, które warto zapamiętać:

Semantyka – <summary> i <details> tworzą semantyczną strukturę rozumianą przez czytniki ekranu i roboty wyszukiwarek;
Dostępność – elementy domyślnie obsługują nawigację klawiaturą (Tab, Enter/Space);
Brak JavaScriptu – podstawowa funkcjonalność działa bez dodatkowego kodu;
Stylizacja – wygląd można w pełni dostosować w CSS (np. przy użyciu ::-webkit-details-marker do zmiany znacznika).

Tag <summary> to proste, ale potężne narzędzie, które pozwala budować przejrzyste i interaktywne interfejsy bez złożonego JavaScriptu, oszczędzając miejsce i poprawiając wygodę użytkownika – zwłaszcza na urządzeniach mobilnych.

Jak działa <summary> w praktyce?