Semantyczne elementy — HTML

Semantyczny HTML opisuje przeznaczenie poszczególnych części strony.

Jak to działa?

<header>, <nav>, <main>, <article>, <section> i <footer> pomagają porządkować strukturę oraz wspierają dostępność.

Przykład 1 — poznaj zapis

<header><h1>Moja witryna</h1></header>
<nav><a href="/">Start</a></nav>
<main>
  <article><h2>Aktualność</h2><p>Treść...</p></article>
</main>
<footer>© 2026</footer>

Każdy znacznik opisuje rolę fragmentu dokumentu.

Przeczytaj kod linijka po linijce

<header><h1>Moja witryna</h1></header>Tworzymy nagłówek porządkujący treść strony.
<nav><a href="/">Start</a></nav>Ten znacznik określa element lub strukturę dokumentu.
<main>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Nagłówek, menu, artykuł i stopka w logicznym układzie.

Ten przykład dotyczy metadanych dokumentu — nie pojawia się jako treść strony.

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<main><section><h2>O mnie</h2><p>Uczę się HTML.</p></section></main>

Wynik drugiego przykładupo uruchomieniu przykładu

Sekcja O mnie wewnątrz głównej części strony.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj do układu dodatkową sekcję z nagłówkiem h2.