Aby dodać zakładkę w HTML, możesz skorzystać z dwóch popularnych podejść:
- zakładki jako interaktywne „taby” przełączające widok poszczególnych sekcji bez przeładowania strony,
- zakładki jako odnośniki do konkretnych miejsc (anchor) w obrębie tej samej strony.
W poniższym poradniku przedstawiam oba sposoby z praktycznymi przykładami i wyjaśnieniem.
Zakładki jako „taby” – przełączalne sekcje
Ten typ zakładek umożliwia użytkownikowi wygodne przeglądanie różnych treści, które są ukryte lub pokazywane po kliknięciu odpowiedniej etykiety. Rozwiązanie takie często spotyka się w panelach ustawień, kart produktowych czy FAQ.
Przykład prostego menu zakładek w HTML i CSS
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zakładki w HTML</title>
<style>
ul.tabs { list-style: none; margin: 0; padding: 0; display: flex; border-bottom: 2px solid #ccc; }
ul.tabs li { margin: 0; }
ul.tabs li a { display: block; padding: 10px 30px; background: #f3f3f3; border: 1px solid #ccc; border-bottom: none; text-decoration: none; color: #333; border-radius: 10px 10px 0 0; margin-right: 3px; }
ul.tabs li a.active, ul.tabs li a:hover { background: #fff; font-weight: bold; color: #0073e6; border-bottom: 2px solid #fff; }
.tab-content { display: none; border: 1px solid #ccc; padding: 20px; border-radius: 0 0 10px 10px; }
.tab-content.active { display: block; }
</style>
</head>
<body>
<ul class="tabs">
<li><a href="#tab1" class="active">Zakładka 1</a></li>
<li><a href="#tab2">Zakładka 2</a></li>
<li><a href="#tab3">Zakładka 3</a></li>
</ul>
<div id="tab1" class="tab-content active">
<h3>Treść zakładki 1</h3>
<p>Opis lub zawartość pierwszej sekcji.</p>
</div>
<div id="tab2" class="tab-content">
<h3>Treść zakładki 2</h3>
<p>Tekst drugiej sekcji.</p>
</div>
<div id="tab3" class="tab-content">
<h3>Treść zakładki 3</h3>
<p>Zawartość trzeciej zakładki.</p>
</div>
<script>
const tabLinks = document.querySelectorAll('.tabs a');
const tabContents = document.querySelectorAll('.tab-content');
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
tabLinks.forEach(l => l.classList.remove('active'));
tabContents.forEach(tab => tab.classList.remove('active'));
link.classList.add('active');
const target = document.querySelector(link.getAttribute('href'));
target.classList.add('active');
});
});
</script>
</body>
</html>
Wyjaśnienie działania
- każda zakładka jest elementem listy i zawiera odnośnik do
divz odpowiednią treścią (id: tab1, tab2, itd.), - za pomocą CSS i JavaScript pokazujemy tylko wybraną zakładkę, ukrywając pozostałe,
- pozwala to dynamicznie przełączać widoki bez przeładowania strony.
Zastosowania
- karty produktowe (np. „Opis”, „Dane techniczne”, „Opinie”)
- panele ustawień i formularze wieloetapowe
- FAQ i zestawienia informacji
Zakładki jako odnośniki do sekcji (tzw. kotwice)
Taki mechanizm wykorzystuje znaczniki id oraz linki wewnętrzne <a>, pozwalając na „skakanie” do konkretnych fragmentów strony.
Przykład kodu
<ul>
<li><a href="#sekcja1">Przejdź do sekcji 1</a></li>
<li><a href="#sekcja2">Przejdź do sekcji 2</a></li>
<li><a href="#sekcja3">Przejdź do sekcji 3</a></li>
</ul>
<h2 id="sekcja1">Sekcja 1</h2>
<p>Treść pierwszej sekcji...</p>
<h2 id="sekcja2">Sekcja 2</h2>
<p>Treść drugiej sekcji...</p>
<h2 id="sekcja3">Sekcja 3</h2>
<p>Treść trzeciej sekcji...</p>
Opis działania
- kliknięcie w link „Przejdź do sekcji 2” przenosi użytkownika bezpośrednio do nagłówka
Sekcja 2, - mechanizm ten jest wbudowany w HTML i nie wymaga dodatkowego CSS czy JavaScriptu.
Przykładowe użycia
- spisy treści do długich dokumentów lub artykułów
- FAQ z szybkim dostępem do każdego pytania
- portfolio lub strony „One Page” z wieloma sekcjami
Wskazówki praktyczne
- Warstwa wizualna – zakładki możesz stylizować za pomocą CSS, dodając kolory, animacje lub ikony;
- Dostępność (accessibility) – korzystaj z semantycznych znaczników i atrybutów ARIA, aby zakładki były czytelne dla czytników ekranu;
- Responsywność – sprawdź wygląd zakładek na telefonach i tabletach, aby zapewnić dobrą obsługę dotykiem.
Dzięki powyższym przykładom z łatwością dodasz zarówno zakładki przełączające widok (taby), jak i proste zakładki-kotwice ułatwiające nawigację w obrębie strony. To wygodne i intuicyjne rozwiązania, regularnie stosowane w nowoczesnych serwisach internetowych.
