Semantyka HTML5

Co to jest semantyka w HTML? 🧠

Semantyka oznacza znaczenie. W HTML chodzi o to, by używać takich znaczników, które opisują rolę fragmentu strony.

Zamiast używać wszędzie <div>, lepiej zastosować np. <header>, <main>, <nav>, <section>, <article>, <aside>, <footer>.

Dlaczego to ważne?

kod jest czytelniejszy,
wyszukiwarki lepiej rozumieją stronę (SEO),
czytniki ekranu łatwiej nawigują po stronie (dostępność).

Najważniejsze semantyczne znaczniki HTML5

Znacznik	Zastosowanie
`<header>`	nagłówek strony lub sekcji
`<nav>`	nawigacja (menu linków)
`<main>`	główna treść dokumentu
`<section>`	sekcja tematyczna
`<article>`	samodzielna treść (np. artykuł, wpis na blogu)
`<aside>`	treść poboczna (np. reklama, boczny panel)
`<footer>`	stopka strony lub sekcji

Przykład: strona bez semantyki

Przykład

<div class="header">Moja strona</div>
<div class="menu">...menu...</div>
<div class="content">Tu jest tresc</div>
<div class="footer">Stopka</div>

Kod działa, ale nie mówi nic o strukturze dokumentu.

Przykład: ta sama strona z semantyką

Przykład

<header>
  <h1>Moja strona</h1>
</header>

<nav>
  <a href="#home">Start</a>
  <a href="#about">O mnie</a>
  <a href="#contact">Kontakt</a>
</nav>

<main>
  <section id="home">
    <h2>Witaj!</h2>
    <p>To jest strona startowa.</p>
  </section>

  <section id="about">
    <h2>O mnie</h2>
    <article>
      <h3>Kim jestem?</h3>
      <p>Uczę się HTML i CSS.</p>
    </article>
  </section>
</main>

<aside>
  <p>Tu moze byc reklama albo ciekawostka.</p>
</aside>

<footer>
  <p>&copy; 2025 Moja strona</p>
</footer>

Taki kod jest dużo łatwiejszy do zrozumienia – zarówno dla człowieka, jak i dla przeglądarki czy czytnika ekranu.

Semantyka a SEO i dostępność

wyszukiwarki lepiej indeksują treść,
czytniki ekranu mogą przeskakiwać między sekcjami,
ułatwiasz sobie i innym pracę z kodem.

Dobra semantyka to podstawa profesjonalnych stron.

Dobre praktyki

używaj semantycznych znaczników zawsze, gdy to możliwe,
nie nadużywaj <div> tam, gdzie istnieje lepszy znacznik,
pilnuj hierarchii nagłówków wewnątrz sekcji.

Ćwiczenie

Weź prostą stronę napisaną tylko z <div>.
Zastąp je odpowiednimi znacznikami: <header>, <main>, <section>, <footer>.
Sprawdź, czy struktura jest czytelniejsza.