Poznaj Programowanie

Tagi HTML: section

Piotr Grochal 6 min. czytania

W dzisiejszym świecie web developmentu, gdzie semantyka HTML odgrywa kluczową rolę w dostępności, SEO i czytelności kodu, element <section> zasługuje na szczególne miejsce w Twoim arsenale.

W przeciwieństwie do generycznego <div>, <section> niesie znaczenie semantyczne i informuje przeglądarki, czytniki ekranu oraz wyszukiwarki o strukturze dokumentu.

Czym dokładnie jest <section> i kiedy go używać?

Element <section> reprezentuje ogólną sekcję dokumentu, która stanowi samodzielny, tematycznie spójny fragment treści. Typowe przykłady to:

  • rozdziały książki lub długiego artykułu,
  • poszczególne zakładki w interfejsie z kartami (tabbed interface),
  • sekcje strony głównej, jak „O nas”, „Usługi” czy „Kontakt”.

Ważna zasada semantyczna – każda <section> powinna zawierać nagłówek (<h1>–<h6>), aby jasno określić jej temat. Bez nagłówka tracisz korzyści z semantyki – lepiej wtedy użyć <div>. Nie stosuj <section> jako kontenera do stylizacji; do tego przeznaczony jest <div>.

Zgodnie ze specyfikacją HTML5, <section> dopuszcza treść ogólną i postrzegalną (np. paragrafy, listy, obrazy), a jako elementy nadrzędne pozwala na większość kontenerów treściowych, z wyjątkiem <address>.

Przykłady praktycznego użycia <section>

Oto prosty przykład struktury książki lub artykułu blogowego:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja książka</title>
</head>
<body>
<h1>Moja książka</h1>

<section>
<h2>Rozdział 1. Jak to wszystko się zaczęło</h2>
<p>Wszystko zaczęło się od tego, że... Tutaj opisujemy początek historii.</p>
</section>

<section>
<h2>Rozdział 2. Jak to się potoczyło dalej</h2>
<p>Dalej było tak, że... Szczegóły rozwoju fabuły.</p>
</section>
</body>
</html>

Ten kod dzieli treść na logiczne rozdziały, co ułatwia nawigację i poprawia dostępność.

<section> na stronie głównej firmy

Na landing page’u <section> idealnie nadaje się do podziału na bloki tematyczne. Dodaj atrybuty ARIA dla lepszej dostępności:

<main>
<section id="o-nas" aria-labelledby="o-nas-heading">
<h2 id="o-nas-heading">O Nas</h2>
<p>Jesteśmy firmą z wieloletnim doświadczeniem w branży IT. Nasza pasja to tworzenie nowoczesnych stron www.</p>
</section>

<section id="uslugi" aria-labelledby="uslugi-heading">
<h2 id="uslugi-heading">Nasze Usługi</h2>
<ul>
<li>Projektowanie stron HTML/CSS</li>
<li>Integracja JavaScript</li>
<li>Optymalizacja SEO</li>
</ul>
</section>

<section id="kontakt" aria-labelledby="kontakt-heading">
<h2 id="kontakt-heading">Kontakt</h2>
<p>[email protected] | tel. 123-456-789</p>
</section>
</main>

Tutaj każda sekcja ma unikalny ID i nagłówek z aria-labelledby, co znacząco wspomaga czytniki ekranu.

Połączenie <section> z <article>

Często <section> zawiera <article>, lub odwrotnie. Oto przykład bloga z komentarzami:

<article>
<!-- Główny post blogowy -->
<h2>Tytuł Posta</h2>
<p>Treść posta...</p>

<section id="comments">
<h3>Komentarze</h3>

<article class="comment">
<!-- Pojedynczy komentarz jako samodzielny artykuł -->
<header>
<p>Autor: Użytkownik1</p>
<time datetime="2026-03-20">20 marca 2026</time>
</header>
<p>Świetny artykuł! Dziękuję za wyjaśnienia.</p>
</article>

<article class="comment">
<header>
<p>Autor: Użytkownik2</p>
<time datetime="2026-03-20">20 marca 2026</time>
</header>
<p>Popieram, semantyka to podstawa.</p>
</article>
</section>
</article>

<section id="comments"> grupuje komentarze tematycznie, a każdy <article> jest samodzielny i możliwy do ponownego wykorzystania.

Różnice między <section>, <article>, <div> i innymi elementami semantycznymi

Aby uniknąć błędów, zrozum poniższą hierarchię i przeznaczenie elementów:

Element Opis Kiedy używać? Przykład
<section> tematycznie spójna sekcja z nagłówkiem rozdziały, bloki strony głównej „O nas”, „Usługi”
<article> samodzielna jednostka treści (może stać sama) wpisy blogowe, posty, komentarze pojedynczy artykuł
<div> generyczny kontener bez semantyki stylizacja, layout bez znaczenia flexbox wrapper
<main> główna treść strony (tylko jedna na stronę) zawartość unikalna strony cały content
<aside> treść poboczna (sidebar) reklamy, linki powiązane widgety boczne

Błąd do uniknięcia – zastępowanie wszystkiego <div>. Przykład nie-semantyczny:

<!-- ŹLE - brak semantyki -->
<div>
<div>Tytuł</div>
<div>Treść</div>
</div>

Zamiast tego używaj semantycznych elementów dla lepszego SEO i dostępności.

Zalety <section> w praktyce: SEO, dostępność i wydajność

Najważniejsze korzyści ze stosowania <section> to:

  • SEO – wyszukiwarki lepiej rozumieją strukturę dokumentu, co poprawia widoczność i trafność wyników;
  • Dostępność – czytniki ekranu (np. NVDA) ogłaszają sekcje na podstawie nagłówków, ułatwiając nawigację osobom niewidomym i słabowidzącym;
  • Responsywność – logiczne bloki ułatwiają stylizację z CSS Grid/Flexbox i tworzenie spójnych układów;
  • Przyszłość – narzędzia analityczne i AI coraz lepiej parsują semantyczny kod, wspierając automatyczne audyty i generowanie podsumowań.

Stylizacja CSS dla <section>

Poniżej przykładowe reguły CSS, które wizualnie podkreślą sekcje bez utraty semantyki:

section {
padding: 2rem;
margin-bottom: 2rem;
border-left: 4px solid #007cba;
}
section h2 {
color: #007cba;
font-size: 1.5rem;
}
@media (max-width: 768px) {
section {
padding: 1rem;
}
}

Ten styl wzmacnia podział treści na sekcje i poprawia czytelność na różnych urządzeniach.

Najczęstsze błędy i jak ich unikać

Unikaj poniższych pułapek podczas pracy z <section>:

  1. Brak nagłówka – zawsze dodawaj <h2> lub podobny;
  2. Nadmierne zagnieżdżanie – unikaj zbyt głębokich hierarchii bez realnej potrzeby;
  3. Używanie <section> zamiast <div> do layoutu – semantyka jest ważniejsza od samej stylizacji;
  4. Ignorowanie ARIA – dla złożonych sekcji dodawaj aria-labelledby i dbaj o unikalne identyfikatory.