Dokumentacja HTML z przykładami: Semantyczny HTML

Q: Jakie są znaczniki semantyczne w HTML?

Znaczniki układu to , , , , , i . Inne popularne znaczniki semantyczne to , , , , , oraz nagłówki od do .

Q: Czy div jest elementem semantycznym?

Nie. nie ma własnego znaczenia; to ogólne pudełko do stylowania i układu. Używaj go, gdy żaden znacznik semantyczny nie pasuje, a , , i pozostałych, gdy któryś pasuje.

Q: Ile elementów main może mieć strona?

Jeden widoczny na stronę. Obejmuje treść unikalną dla tej strony i nie powinien znajdować się wewnątrz , , , ani .

Czym jest semantyczny HTML

Semantyczny HTML to wybieranie każdego znacznika według tego, czym treść jest: nawigacja trafia do <nav>, główna treść do <main>, wpis na blogu do <article>. Znaczniki wyglądają jak zwykłe pudełka, ale mówią przeglądarce, czytnikom ekranu i wyszukiwarkom, jaką rolę pełni każda część strony. Oto cała strona zbudowana z semantycznych znaczników układu, z każdym obrysowanym i podpisanym:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Usuń element <style>, a strona będzie wyglądać jak zwykły tekst, ale struktura nadal będzie na miejscu dla każdego, kto czyta kod, i dla oprogramowania, które go czyta, nie patrząc na piksele.

Semantyczne znaczniki układu

Znacznik	Do czego służy	Punkt orientacyjny w czytniku ekranu
`<header>`	Wstęp strony lub artykułu: logo, tytuł, autor	banner (tylko gdy nie jest wewnątrz `article`, `aside`, `main`, `nav` ani `section`)
`<nav>`	Blok głównych linków nawigacyjnych	navigation
`<main>`	Treść unikalna dla tej strony, raz na stronę	main
`<article>`	Samodzielny fragment, który ma sens sam w sobie: wpis, komentarz, karta produktu	domyślnie brak
`<section>`	Tematyczna grupa treści z własnym nagłówkiem	region, tylko gdy ma dostępną nazwę
`<aside>`	Powiązana treść obok głównego toku: pasek boczny, notka	complementary
`<footer>`	Informacje zamykające stronę lub artykuł: prawa autorskie, autor, linki	contentinfo (tylko na poziomie strony)

Każdy znacznik ma własną stronę z większą liczbą szczegółów: header, nav, section i footer. Ta strona opisuje, jak do siebie pasują.

Dlaczego nie po prostu div

Strona zbudowana wyłącznie z elementów <div> może wyglądać identycznie jak semantyczna. Różnica tkwi w tym, co mówi kod. Naciśnij przyciski, żeby obrysować elementy niosące znaczenie w każdej wersji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Wersja z div znajduje 0, wersja semantyczna 4. To właśnie widzą technologie wspomagające: użytkownik czytnika ekranu na stronie semantycznej może od razu przeskoczyć do nawigacji albo głównej treści, a na stronie z div musi przeczytać wszystko po kolei. Nazwy klas takie jak class="nav" nic nie znaczą dla przeglądarki.

<div> pozostaje właściwym wyborem dla pudełek, które istnieją tylko do stylowania lub układu, jak opakowanie flex .cols w pierwszym przykładzie.

main, article i aside

<main> obejmuje to, co jest unikalne dla tej strony, i występuje raz. Wewnątrz niego <article> oznacza treść, która miałaby sens skopiowana samodzielnie na inną stronę, a <aside> treść powiązaną, którą można usunąć bez psucia artykułu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

Artykuł ma własne <header> i <footer>. Nie ograniczają się do poziomu strony: każdy otwiera albo zamyka najbliższy article lub section. Element <time datetime> podaje datę w formie czytelnej dla maszyn, a wyświetla ją w formie czytelnej dla ludzi.

Sprawdź strukturę nagłówków

Nagłówki to druga połowa struktury. Użytkownicy czytników ekranu często przechodzą przez stronę od nagłówka do nagłówka, więc poziomy powinny czytać się jak spis treści bez pominiętych poziomów. Ten skrypt wypisuje strukturę strony, na której działa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

h4 pod "Brewing" pomija poziom. Zmień go na h3, a struktura będzie czysta. Poziomy nagłówków wybieraj według struktury, a ich rozmiar zmieniaj w CSS, jeśli chcesz, żeby były większe albo mniejsze.

Więcej znaczników semantycznych

Semantyka to nie tylko układ. Te znaczniki na poziomie tekstu też niosą znaczenie:

Znacznik	Znaczenie
`<strong>`	Ważny tekst (domyślnie pogrubiony)
`<em>`	Akcent, emfaza (domyślnie kursywa)
`<figure>` i `<figcaption>`	Obrazek, wykres albo przykład kodu z podpisem
`<time datetime="...">`	Data lub godzina w formie czytelnej dla maszyn
`<address>`	Dane kontaktowe autora strony lub artykułu
`<mark>`	Wyróżniony tekst, na przykład wynik wyszukiwania
`<abbr title="...">`	Skrót z pełną formą
`<button>`	Coś, co wykonuje akcję

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Najedź na skrót "W3C", żeby zobaczyć jego pełną formę w dymku.

Częste błędy

Używanie znacznika dla wyglądu. <blockquote> służy do cytatów, a nie do wcięć; <h3> to poziom nagłówka, a nie średniej wielkości pogrubiony tekst. Styl nadawaj w CSS.
Obejmowanie wszystkiego elementem <section>. Sekcja powinna mieć nagłówek i temat. Jeśli potrzebujesz pudełka do stylowania, użyj <div>.
Więcej niż jeden widoczny <main>. Trzymaj jeden na stronę i nigdy nie zagnieżdżaj go w <article>, <aside>, <header>, <nav> ani <footer>.
Umieszczanie każdej listy linków w <nav>. Zostaw go dla głównych bloków nawigacji, jak menu witryny czy spis treści. Kilka linków w stopce go nie potrzebuje.
Klikalne elementy <div>. Do <div onclick> nie da się dotrzeć klawiaturą. Używaj <button> do akcji i <a href> do nawigacji.

Najczęściej zadawane pytania

Czym jest semantyczny HTML?

Semantyczny HTML to kod, w którym każdy znacznik opisuje znaczenie swojej treści: <nav> dla nawigacji, <article> dla samodzielnego fragmentu, <button> dla przycisku. Przeglądarka, czytniki ekranu i wyszukiwarki rozumieją wtedy stronę bez zgadywania na podstawie nazw klas czy stylów.

Jakie są znaczniki semantyczne w HTML?

Znaczniki układu to <header>, <nav>, <main>, <article>, <section>, <aside> i <footer>. Inne popularne znaczniki semantyczne to <figure>, <figcaption>, <time>, <address>, <strong>, <em> oraz nagłówki od <h1> do <h6>.

Czy div jest elementem semantycznym?

Nie. <div> nie ma własnego znaczenia; to ogólne pudełko do stylowania i układu. Używaj go, gdy żaden znacznik semantyczny nie pasuje, a <header>, <main>, <nav> i pozostałych, gdy któryś pasuje.

Do czego służy znacznik aside?

<aside> zawiera treść związaną z główną treścią, ale niebędącą częścią jej toku: pasek boczny, blok podobnych linków, notkę słowniczkową albo wyróżniony cytat. Na poziomie strony czytniki ekranu pokazują go jako punkt orientacyjny complementary.

Ile elementów main może mieć strona?

Jeden widoczny <main> na stronę. Obejmuje treść unikalną dla tej strony i nie powinien znajdować się wewnątrz <header>, <nav>, <article>, <aside> ani <footer>.

Czy semantyczny HTML pomaga w SEO?

Pomaga wyszukiwarkom zrozumieć, która część strony jest główną treścią, która nawigacją i jak powiązane są nagłówki. Sam w sobie nie jest skrótem do wyższych pozycji, ale eliminuje zgadywanie i poprawia dostępność, a to i tak warto robić.

Powiązane zagadnienia