Dokumentacja HTML z przykładami: Section

Do czego służy znacznik section

<section> grupuje treść na jeden temat i zaczyna się nagłówkiem, który ten temat nazywa. Strona docelowa podzielona na "Features", "Pricing" i "FAQ" to podręcznikowy przykład:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Każda sekcja to rozdział strony, a każdy nagłówek to pozycja w spisie treści strony. Jak inne znaczniki semantyczne, <section> nie ma domyślnego stylu; ramki pochodzą z CSS.

section vs article vs div

Na ekranie wszystkie trzy wyglądają tak samo. Różnią się tym, co mówią o treści:

Element	Znaczy	Test
`<article>`	Kompletny, samodzielny fragment	Czy miałby sens opublikowany osobno, na innej stronie albo w kanale?
`<section>`	Tematyczna część większej całości	Czy ma (albo potrzebuje) nagłówka i czy jest jednym rozdziałem czegoś?
`<div>`	Nic: pudełko do stylu lub układu	Czy jest tylko dla CSS albo JavaScript?

Wpisy na blogu, komentarze na forum, artykuły prasowe i karty produktów to article. "Features", "Rozdział 2" i "Podobne produkty" to section. Wiersz flex, który ustawia trzy karty w rzędzie, to div.

Article wewnątrz section

Te dwa elementy zagnieżdżają się w obie strony. Tutaj sekcja "Latest posts" zawiera kilka niezależnych artykułów:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Zwróć uwagę na <div class="grid">: istnieje tylko po to, żeby ułożyć karty w rzędzie, więc div to dla niego właściwy znacznik. Każda karta to article, bo każdy wpis jest samodzielny.

Section wewnątrz article

Długi artykuł można podzielić na sekcje, jak książkę na rozdziały. Poziomy nagłówków kontynuują się od nagłówka samego artykułu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Niebieskie pole to article (cały przewodnik), zielone paski to jego sekcje. Nadaj sekcji jej własny poziom nagłówka: article z h2 zawiera sekcje z h3.

Nazwane sekcje stają się punktami orientacyjnymi

Czytniki ekranu pokazują niektóre elementy jako punkty orientacyjne (landmarks), między którymi użytkownicy mogą przeskakiwać. <section> staje się punktem orientacyjnym typu region tylko wtedy, gdy ma dostępną nazwę. Skieruj aria-labelledby na jej nagłówek:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Rób to dla kilku sekcji, do których użytkownik chciałby przeskoczyć bezpośrednio, a nie dla każdej: strona z dwudziestoma punktami orientacyjnymi jest tak samo trudna do przejrzenia jak strona bez żadnego. Nienazwane sekcje też pomagają, bo ich nagłówki pojawiają się na liście nagłówków w czytniku ekranu.

Sekcje są też dobrym celem dla linków wewnątrz strony. Nadaj sekcji id, a link z href="#id" przeskoczy do niej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Częste błędy

Używanie <section> jako opakowania do stylów. Jeśli nie ma nagłówka ani tematu, użyj <div>. Strona o semantycznym HTML pokazuje, gdzie pasuje każdy znacznik układu.
Obejmowanie pojedynczego wpisu na blogu elementem <section>. Wpis, który jest samodzielny, to <article>.
Sekcje bez nagłówków. Dodaj nagłówek, nawet ukryty wizualnie, albo zastanów się, czy to naprawdę sekcja.
Zastępowanie <main> elementem <section>. Główna treść strony trafia do <main>; sekcje są w jego wnętrzu.
Nazywanie każdej sekcji. Dodawaj aria-labelledby tylko do ważnych, żeby lista punktów orientacyjnych pozostała krótka.

Najczęściej zadawane pytania

Czym jest znacznik section w HTML?

<section> grupuje treść należącą do jednego tematu, na przykład rozdział dokumentu albo część "Cennik" strony docelowej. Zwykle powinna zaczynać się nagłówkiem, który mówi, czego dotyczy sekcja.

Czym różni się section od div?

<section> mówi, że treść jest tematyczną częścią dokumentu z własnym nagłówkiem. <div> nic nie mówi; to pudełko do stylowania albo układu. Jeśli potrzebujesz tylko opakowania dla CSS, użyj <div>.

Czym różni się section od article?

<article> to treść, która ma sens sama w sobie, poza stroną: wpis na blogu, komentarz, karta produktu. <section> to część czegoś większego, która ma sens tylko w swoim kontekście. Zapytaj, czy dałoby się opublikować ten fragment osobno: jeśli tak, to article.

Czy article może zawierać section, a section zawierać article?

Tak, oba warianty. Długi artykuł można podzielić na sekcje, a sekcja taka jak "Najnowsze wpisy" może zawierać listę artykułów.

Czy section potrzebuje nagłówka?

Prawie zawsze powinna go mieć, bo to nagłówek nazywa temat. Jeśli nie umiesz wymyślić dla niej nagłówka, ta treść prawdopodobnie nie jest sekcją i lepiej pasuje <div>.

Powiązane zagadnienia