Jak zrobić spis treści w HTML?

Aby stworzyć spis treści w HTML, należy wykorzystać proste znaczniki HTML oraz mechanizm zakotwiczeń (tzw. „kotwic”), pozwalający na nawigację po stronie. Spis treści poprawia czytelność dłuższych artykułów, ułatwia użytkownikowi szybkie dotarcie do interesujących sekcji oraz wpływa pozytywnie na odbiór strony.

Podstawowa struktura spisu treści w HTML

Najprostszy spis treści można zbudować przy użyciu listy uporządkowanej (<ol>) lub nieuporządkowanej (<ul>), w której umieszcza się odnośniki (<a>) wskazujące na odpowiednie sekcje artykułu:

<nav>
  <h2>Spis treści</h2>
  <ul>
    <li><a href="#sekcja1">Wstęp</a></li>
    <li><a href="#sekcja2">Podstawy HTML</a></li>
    <li><a href="#sekcja3">Zaawansowane techniki</a></li>
    <li><a href="#sekcja4">Podsumowanie</a></li>
  </ul>
</nav>

Następnie, w odpowiednich miejscach artykułu należy ustawić znaczniki nagłówków (<h2>, <h3> itd.) ze zgodnymi identyfikatorami (atrybut id):

<h2 id="sekcja1">Wstęp</h2>
<p>Treść wstępu...</p>
<h2 id="sekcja2">Podstawy HTML</h2>
<p>Treść o podstawach HTML...</p>
<h2 id="sekcja3">Zaawansowane techniki</h2>
<p>Opis technik zaawansowanych...</p>
<h2 id="sekcja4">Podsumowanie</h2>
<p>Podsumowanie artykułu...</p>

Dzięki temu po kliknięciu na element spisu treści przeglądarka przewinie stronę do właściwej sekcji.

Przykład spisu treści z poziomami nagłówków

Wsparcie dla rozbudowanych artykułów wymaga użycia zagnieżdżonych list, które odwzorowują hierarchię nagłówków. Przykład poniżej prezentuje spis treści z rozgałęzieniami na podsekcje:

<nav>
  <h2>Spis treści</h2>
  <ul>
    <li><a href="#k1">1. Wprowadzenie</a></li>
    <li>
      <a href="#k2">2. HTML w praktyce</a>
      <ul>
        <li><a href="#k2-1">2.1. Struktura dokumentu</a></li>
        <li><a href="#k2-2">2.2. Znaczniki nagłówków</a></li>
      </ul>
    </li>
    <li><a href="#k3">3. Podsumowanie</a></li>
  </ul>
</nav>

I odpowiadające nagłówki:

<h2 id="k1">Wprowadzenie</h2>
<!-- treść -->
<h2 id="k2">HTML w praktyce</h2>
<h3 id="k2-1">Struktura dokumentu</h3>
<!-- treść -->
<h3 id="k2-2">Znaczniki nagłówków</h3>
<!-- treść -->
<h2 id="k3">Podsumowanie</h2>

Rozszerzenie o stylizację CSS

Aby spis treści był bardziej czytelny, warto dodać proste style CSS. Przykład minimalnej stylizacji:

nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  margin-bottom: 0.5em;
}
nav ul ul {
  margin-left: 1.5em;
  font-size: 0.95em;
}
nav a {
  text-decoration: none;
  color: #1565c0;
}
nav a:hover {
  text-decoration: underline;
}

Dzięki powyższym stylom spis treści staje się estetyczny i łatwy w obsłudze.

Automatyzacja spisu treści dla dynamicznych stron

W przypadku bardziej złożonych serwisów, gdzie liczba nagłówków jest duża i mogą się zmieniać, można posłużyć się JavaScriptem do automatycznego generowania spisu treści na podstawie nagłówków w treści artykułu. Takie rozwiązania często są stosowane na blogach, w dokumentacjach technicznych czy internetowych książkach.

Przykładowy skrypt generujący spis treści ze wszystkich nagłówków na stronie:

document.addEventListener("DOMContentLoaded", function() {
  const content = document.querySelector('main'); // główny content
  const headers = content.querySelectorAll('h2, h3');
  const toc = document.createElement('ul');
  headers.forEach(header => {
    if (!header.id) {
      header.id = header.textContent.trim().replace(/\s+/g, '-').toLowerCase();
    }
    const li = document.createElement('li');
    if (header.tagName.toLowerCase() === 'h3') {
      li.style.marginLeft = "20px";
    }
    const a = document.createElement('a');
    a.href = `#${header.id}`;
    a.textContent = header.textContent;
    li.appendChild(a);
    toc.appendChild(li);
  });
  const nav = document.createElement('nav');
  nav.innerHTML = '<h2>Spis treści</h2>';
  nav.appendChild(toc);
  document.body.insertBefore(nav, content);
});

Ten przykład przypisuje identyfikatory nagłówkom, a następnie generuje spis treści dynamicznie na początku strony.

Zastosowania spisu treści w HTML

Spis treści w HTML sprawdza się w różnych zastosowaniach:

• Długie artykuły poradnikowe i techniczne (łatwa nawigacja),
• Dokumentacje produktów i instrukcje obsługi,
• Strony główne szerokich kategorii tematycznych,
• Książki internetowe, publikacje naukowe, e-booki HTML,
• Blogi branżowe oraz strony firmowe ze strukturą rozdziałów.

Dobrze zorganizowany spis treści wpływa na ogólną użyteczność serwisu, poprawia czas pozostawania użytkownika na stronie oraz pozwala skuteczniej wypozycjonować treść w wyszukiwarkach.

Wskazówki praktyczne

• Unikaj tworzenia spisu treści ręcznie przy każdej aktualizacji nagłówków — stosuj półautomatyczne lub automatyczne rozwiązania, zwłaszcza przy dużych lub często modyfikowanych tekstach,
• Stosuj wyraźne i jednoznaczne tytuły nagłówków, by użytkownik łatwo mógł znaleźć poszukiwane informacje,
• Zadbaj o kontrast i czytelność – to ułatwi korzystanie z funkcji spisu treści wszystkim użytkownikom.

Tak skonstruowany spis treści w HTML sprawdzi się zarówno w prostych artykułach, jak i w rozbudowanych poradnikach czy dokumentacji technicznej.