Co to jest w HTML?

<section> w HTML to semantyczny element służący do wydzielania samodzielnych, logicznie powiązanych sekcji treści w dokumencie, takich jak rozdziały, podrozdziały, grupy artykułów czy bloki tematyczne. <section> pomaga organizować strukturę strony, poprawia jej dostępność oraz ułatwia zrozumienie zawartości przez przeglądarki, czytniki ekranu i wyszukiwarki.

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

• <section> reprezentuje wydzieloną, samodzielną sekcję dokumentu o wspólnej tematyce, która z reguły powinna posiadać własny nagłówek (np. <h1>, <h2>, <h3>);
• Stosuje się go, gdy brak jest bardziej precyzyjnego semantycznego elementu, a bloki treści stanowią logiczne i tematyczne całości;
• Typowe zastosowania – rozdziały artykułów, różne segmenty strony (np. „O nas”, „Kontakt”, „Aktualności”), sekcje na stronie głównej z własnymi nagłówkami.

Podstawowa składnia

<section>
  <h2>Tytuł sekcji</h2>
  <p>Treść tej sekcji...</p>
</section>

Przykłady zastosowania <section>

Podział artykułu na sekcje

<article>
  <h1>Czym jest HTML?</h1>
  <section>
    <h2>Historia HTML</h2>
    <p>HTML został stworzony na początku lat 90...</p>
  </section>
  <section>
    <h2>Znaczenie we współczesnym webie</h2>
    <p>Dziś HTML jest podstawą funkcjonowania sieci...</p>
  </section>
</article>

Powyżej każdy blok tematyczny artykułu jest oddzielony semantycznie za pomocą <section>, przez co dokument zyskuje przejrzystą strukturę.

Strona główna z różnymi blokami

<main>
  <section>
    <h2>Aktualności</h2>
    <ul>
      <li>Wydarzenie A</li>
      <li>Wydarzenie B</li>
    </ul>
  </section>
  <section>
    <h2>O nas</h2>
    <p>Poznaj nasz zespół oraz misję naszej firmy...</p>
  </section>
  <section>
    <h2>Kontakt</h2>
    <address>
      Adres: ul. Przykładowa 1<br>
      Email: [email protected]
    </address>
  </section>
</main>

Każda sekcja grupuje samodzielny obszar tematyczny strony głównej.

Najczęstsze błędy

• Nie stosuj <section> wyłącznie jako zamiennika divów – jeśli fragment nie ma własnego tematu lub nagłówka, lepszym wyborem jest <div>;
• Każda sekcja powinna mieć nagłówek – to kluczowe dla semantyki i dostępności strony.

Porównanie <section> z innymi elementami

Dodatkowe wskazówki użytkowe

• Nawigacja po sekcjach – struktura oparta na <section> z nagłówkami wspiera korzystanie z czytników ekranu oraz umożliwia łatwe generowanie spisów treści;
• SEO i analityka semantyczna – silnie semantyczna struktura poprawia odbiór strony przez roboty wyszukiwarki i narzędzia analityczne.

Podsumowanie

Element <section> pozwala porządkować treść HTML w logiczne, samodzielne bloki tematyczne. To narzędzie nie tylko dla programisty, ale także dla użytkownika: ułatwia czytanie, dostępność i nawigację po stronie. Prawidłowe wykorzystanie <section> buduje nowoczesne, przyjazne i profesjonalne aplikacje internetowe.