HTML Academy · Lekcja

Element section a div

Poznanie sytuacji, w których należy użyć section zamiast zwykłego div

Element section a div to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element section

Element <section> grupuje powiązaną treść w sekcję tematyczną:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section a div

Kluczowe pytanie brzmi: czy ta grupa ma temat lub cel, który można by nazwać?

<section> — tak; reprezentuje grupowanie tematyczne i powinien mieć nagłówek
<div> — nie; jest tylko kontenerem do stylizacji lub obsługi skryptów

section wymaga nagłówka

Każdy element <section> powinien mieć nagłówek (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Kiedy używać section

Elementu <section> należy używać w przypadku:

Rozdziałów dokumentu
Kart lub kroków w kreatorze
Części długiego artykułu (Wprowadzenie, Metody, Wyniki)
Sekcji marketingowych strony głównej (Funkcje, Cennik, Opinie klientów)

Kiedy używać div

Elementu <div> należy używać, gdy potrzebny jest tylko kontener dla CSS lub JavaScriptu, bez znaczenia semantycznego:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section w długim artykule

Używaj sekcji do tworzenia rozdziałów wewnątrz artykułu:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Sekcje strony głównej

Struktura strony głównej z sekcjami:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section tworzy kontekst nagłówka

Sekcje tworzą nowe konteksty nagłówków w algorytmie konspektu dokumentu HTML5:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby dla sekcji

Powiąż sekcję z jej nagłówkiem na potrzeby czytników ekranu:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Schemat decyzyjny

Jakiego elementu kontenera należy użyć?

Główna nawigacja? → <nav>
Główna treść strony? → <main>
Samodzielna treść? → <article>
Grupowanie tematyczne z nagłówkiem? → <section>
Pasek boczny lub powiązana treść? → <aside>
Tylko kontener do stylizacji? → <div>

section bez nagłówka: użyj div

Jeśli nie można nadać sekcji nagłówka, należy zamiast niej użyć div:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Szybkie sprawdzenie

Kiedy należy wybrać div zamiast section?

Podsumowanie: section a div

Najważniejsze informacje o section i div:

<section> — grupa tematyczna, która powinna mieć nagłówek
<div> — semantycznie neutralny kontener do stylizacji lub obsługi skryptów
section tworzy nazwany region orientacyjny, ułatwiający nawigację czytnikiem ekranu
Dodaj aria-labelledby, aby połączyć sekcję z jej nagłówkiem
W razie wątpliwości użyj div — później zawsze można go zastąpić bardziej semantycznym elementem

Często zadawane pytania

Czy lekcja „Element section a div” jest bezpłatna?

Tak — pełny tekst „Element section a div” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element section a div”?

Poznanie sytuacji, w których należy użyć section zamiast zwykłego div Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Element section a div”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy