Co to jest `section` w HTML?

<section> w HTML to semantyczny element blokowy, służący do wydzielania logicznych, tematycznie powiązanych fragmentów treści na stronie internetowej. Dzięki niemu struktura dokumentu staje się czytelniejsza zarówno dla programistów, jak i przeglądarek oraz asystentów głosowych.

Główne cechy i zastosowanie <section>

• Oddziela tematycznie spójne części strony – każdy <section> powinien dotyczyć konkretnego zagadnienia, np. „O nas”, „Kontakt”, „Produkty”;
• Zazwyczaj zawiera nagłówek (np. <h1>, <h2>, …) określający tytuł sekcji;
• Poprawia semantykę strony – ułatwia automatycznym narzędziom (np. czytnikom ekranu) rozumienie układu treści;
• Wygląd domyślny sekcji nie różni się od zwykłego <div>, ale znaczenie semantyczne jest inne – <section> oznacza pełen, zamknięty temat lub rozdział, natomiast <div> to zwykły pojemnik bez takiego znaczenia.

Składnia

<section>
  <!-- Treść sekcji -->
</section>

Praktyczne przykłady użycia

Struktura strony głównej

<main>
  <section>
    <h2>O nas</h2>
    <p>Poznaj naszą firmę – kim jesteśmy i czym się zajmujemy.</p>
  </section>
  <section>
    <h2>Nasze produkty</h2>
    <ul>
      <li>Produkt A</li>
      <li>Produkt B</li>
    </ul>
  </section>
  <section>
    <h2>Kontakt</h2>
    <p>Skontaktuj się z nami przez formularz lub telefon.</p>
  </section>
</main>

Wydzielony rozdział na blogu lub w artykule

<article>
  <h1>Jak dbać o rośliny domowe</h1>
  <section>
    <h2>Podlewanie</h2>
    <p>Rośliny potrzebują regularnego, ale racjonalnego podlewania.</p>
  </section>
  <section>
    <h2>Nawożenie</h2>
    <p>Stosuj nawozy zgodnie z wymaganiami konkretnego gatunku.</p>
  </section>
</article>

Układ dokumentu typu FAQ

<section>
  <h2>Jakie są godziny otwarcia?</h2>
  <p>Jesteśmy czynni od poniedziałku do piątku w godzinach 9:00–17:00.</p>
</section>
<section>
  <h2>Czy oferujecie wysyłkę zagraniczną?</h2>
  <p>Tak, wysyłamy nasze produkty na terenie całej Europy.</p>
</section>

Różnica między <section> a <div>

Dobre praktyki

• Używaj <section>, gdy chcesz wyróżnić samodzielną część dokumentu, np. rozdział, blok tematyczny;
• Nie używaj <section> tylko do stylizacji (do tego służy <div>);
• Każda sekcja powinna zawierać nagłówek określający, o czym jest dana część.

Podsumowanie

Element <section> pomaga budować przejrzystą, logiczną i semantycznie poprawną strukturę HTML. Dzięki temu strony są bardziej dostępne, łatwiejsze w utrzymaniu i lepiej rozumiane przez wyszukiwarki oraz narzędzia wspomagające. To podstawowe narzędzie nowoczesnego web developera, które w połączeniu z innymi semantycznymi znacznikami zapewnia wysoką jakość kodu.