<section> vs <article> vs <div>
<article> to samodzielna treść, <section> jest tematyczną częścią czegoś większego, a <div> to neutralny kontener bez żadnego znaczenia.
Porównanie w tabeli
#Niesie znaczenie semantyczne
Ma sens wyrwana z kontekstu
Powinien mieć własny nagłówek
Rola dla czytników ekranu
Kiedy wybrać
Przykład
#<article>
<header>
<h2>Pierwszy tydzień nauki HTML</h2>
</header>
<section>
<h3>Co już umiem</h3>
<p>Struktura dokumentu, nagłówki i podstawowa semantyka.</p>
</section>
<div class="tags" style="display: flex; gap: 6px;">
<span>HTML</span><span>początki</span>
</div>
</article>Definicja i zastosowanie
#Różnica między <article> i <section> to głównie samodzielność treści. Dobry test dla <article>: czy ten fragment miałby sens wyrwany z kontekstu, na przykład w czytniku RSS albo wklejony na inną stronę? Jeśli tak, to artykuł, na przykład wpis na blogu, komentarz albo karta produktu. <section> grupuje treść wokół jednego tematu w ramach większej całości, na przykład rozdział artykułu albo blok "Cennik" na stronie głównej, i zwykle ma własny nagłówek.
<div> nie niesie żadnego znaczenia. Nie informuje czytników ekranu, wyszukiwarek ani innych programistów o tym, czym jest dana część strony. Istnieje wyłącznie jako hak do stylowania w CSS albo do znalezienia w JavaScripcie.
Zasada wyboru brzmi: najpierw sprawdź <article> (treść do samodzielnego udostępnienia), potem <section> (tematyczna część z nagłówkiem), a <div> zostaw na sytuacje, gdy potrzebujesz tylko kontenera bez żadnego znaczenia. Te elementy można też swobodnie zagnieżdżać, na przykład komentarze jako <article> wewnątrz głównego artykułu.
Składnia
#<article>...</article>
<section>
<h2>...</h2>
...
</section>
<div>...</div>Więcej przykładów
#<article>
<h2>Jak wybrać pierwszy język programowania</h2>
<p>Najważniejsze jest to, co chcesz zbudować.</p>
<section>
<h3>Komentarze</h3>
<article>
<p><strong>Ola:</strong> Zaczęłam od Pythona i nie żałuję.</p>
</article>
</section>
</article><section aria-labelledby="pricing-title">
<h2 id="pricing-title">Cennik</h2>
<div class="plans" style="display: flex; gap: 12px;">
<div class="plan">Free</div>
<div class="plan">Premium</div>
</div>
</section><div class="plans"> nie opisuje treści, tylko grupuje karty do Flexboxa. Nagłówek i sens strony niesie <section>.
Dobre praktyki
#- Jeśli wahasz się między
<section>a<div>, zapytaj: czy ta część ma własny temat i nagłówek? Jeśli nie, zwykle wystarczy<div>. - Nie zamieniaj każdego
<div>na<article>albo<section>tylko po to, żeby kod wyglądał semantycznie. Semantyka ma pomagać, nie opisywać wszystko naraz. - Komentarze pod wpisem to naturalny przykład zagnieżdżonych
<article>wewnątrz głównego artykułu.
Powiązane hasła
#- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <div>Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- <h1>-<h6>Nagłówki sześciu poziomów, od najważniejszego h1 do najmniej ważnego h6. Razem tworzą spis treści strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.