<summary> w HTML to element definiujący widoczny nagłówek w obrębie kontenera <details>, który pełni rolę przełącznika – kliknięcie w ten nagłówek rozwija lub zwija dodatkowe, ukryte treści opisane w <details>. Najczęściej używany jest do tworzenia rozwijalnych sekcji, często z podsumowaniem lub pytaniem, a szczegóły są prezentowane dopiero po interakcji użytkownika.
Czym jest <summary>?
- Rola – stanowi widoczny nagłówek, podpis lub legendę segmentu
<details>– to tekst, który widzi użytkownik zanim rozwinie szczegóły; - Interaktywny przycisk – po kliknięciu nagłówka, wyświetlana jest reszta ukrytej zawartości powiązanej z
<details>; - Zasada umiejscowienia –
<summary>powinien być pierwszym elementem potomnym<details>.
Składnia i podstawowe użycie
Przykładowy kod:
<details>
<summary>Dowiedz się więcej o naszej ofercie</summary>
<p>
Oferujemy szeroki wachlarz usług dedykowanych małym i dużym firmom. Skontaktuj się, by uzyskać indywidualną wycenę.
</p>
</details>
- Efekt działania – na stronie wyświetli się tylko nagłówek „Dowiedz się więcej o naszej ofercie”. Po kliknięciu pojawi się ukryty opis usługi.
Szczegółowe informacje i atrybuty
- Atrybuty –
<summary>nie posiada dedykowanych atrybutów, obsługuje jednak wszystkie globalne atrybuty HTML (np.id,class,style); - Zawartość – najczęściej stosuje się tekst, ale możliwe jest użycie innych elementów frazowanych (np. ikony lub fragment kodu), dla lepszej czytelności lub efektów wizualnych;
- Obsługa przez przeglądarki – tag jest szeroko wspierany przez nowoczesne przeglądarki – pełna obsługa zaczyna się od starszych wersji najważniejszych browserów;
- Standard prezentacji – w większości przeglądarek
<summary>pojawia się z domyślną strzałką sygnalizującą, że element jest rozwijalny.
Przykłady praktycznego zastosowania
1. FAQ (najczęściej zadawane pytania) –
<details>
<summary>Jak złożyć zamówienie?</summary>
<p>Wystarczy dodać wybrane produkty do koszyka i przejść do procesu składania zamówienia.</p>
</details>
2. Pokazywanie zaawansowanych opcji formularza –
<form>
<label>Wybierz plik:
<input type="file" accept=".html, .css, .js">
</label>
<details>
<summary>Lista dopuszczalnych typów pliku</summary>
<ul>
<li>Plik HTML</li>
<li>Plik CSS</li>
<li>Plik JS</li>
</ul>
<p><b>Możesz wybrać tylko jeden plik.</b></p>
</details>
</form>
3. Sekcje z rozwijanymi szczegółami w dokumentacji lub poradniku –
<details>
<summary>Przykład kodu z wyjaśnieniem</summary>
<pre>
<code>
function helloWorld() {
console.log("Hello, world!");
}
</code>
</pre>
</details>
Zalety stosowania <summary> i <details>
- Lepsza dostępność – sekcje mogą być ukryte dla osób, które chcą szybko przejść przez najważniejsze informacje;
- Poprawa UX – pozwala uniknąć przeładowania strony dużą ilością treści jednocześnie;
- Obsługa przez urządzenia mobilne – elementy są responsywne i łatwe do obsługi na ekranach dotykowych.
Dobre praktyki
- Staraj się, aby tekst w
<summary>był jasny, zwięzły i zachęcał do rozwoju sekcji, - unikaj zagnieżdżania innych elementów
<summary>bezpośrednio w środku – każdy<details>powinien mieć maksymalnie jeden własny nagłówek<summary>, - stosuj dla treści, które naturalnie można schować (np. odpowiedzi w FAQ, instrukcje dodatkowe, szczegóły techniczne).
Prawidłowe wykorzystywanie tagu <summary> w ramach <details> pozwala tworzyć czytelniejsze, bardziej zorganizowane i wygodne w obsłudze treści internetowe, które dostosowują się do potrzeb użytkownika.
