Bloki semantyczne pomagają uporządkować strukturę strony i lepiej powiedzieć przeglądarce (oraz Google), co dana część strony oznacza.

<header> – nagłówek strony / sekcji

<header>
  <h1>Moja strona</h1>
  <nav>...</nav>
</header>

<main> – główna treść dokumentu

<main>
  <h2>Witaj na stronie</h2>
  <p>Tutaj jest najważniejsza zawartość.</p>
</main>

<section> – tematyczna grupa treści

<section>
  <h2>O nas</h2>
  <p>Jesteśmy super firmą...</p>
</section>

<aside> – treść poboczna (sidebar, reklama, cytat)

<aside>
  <h3>Polecamy</h3>
  <p>Najlepszy kurs CSS!</p>
</aside>

<footer> – stopka strony / sekcji

<footer>
  <p>© 2026 Moja Firma</p>
</footer>

<div> i <span> – uniwersalne kontenery

<div class="card">
  <h3>Karta produktu</h3>
  <span class="price">99 zł</span>
</div>

Najczęściej używane semantyczne elementy (HTML5):

Element	Do czego służy	Przykład użycia
<header>	Nagłówek strony lub sekcji (logo, menu)	Baner górny, nagłówek artykułu
<main>	Główna, unikalna treść strony	Zawartość bez sidebarów i stopki
<section>	Tematyczny blok treści	Rozdział, galeria, „o nas”
<article>	Samodzielna, niezależna treść	Post na blogu, komentarz, news
<aside>	Treść poboczna, luźno związana	Sidebar, baner, ciekawostka
<footer>	Stopka strony / sekcji	Copyright, dane kontaktowe
<div>	Zwykły kontener (brak semantyki)	Wrapper, grid, card
<span>	Mały inline kontener	Podświetlenie słowa, ikona, cena

Zadanie

Stwórz prostą stronę zawierającą:
1. <header> z tytułem i nawigacją
2. <main> z dwoma <section> (np. „O mnie” i „Projekty”)
3. <aside> z ciekawostką po prawej
4. <footer> z podpisem © stworzysz go za pomogą ©