Semantyczne znaczniki HTML5 — przegląd
Do tej pory często używaliśmy ogólnych elementów jak <div> do tworzenia struktury strony. W HTML5 wprowadzono jednak znaczniki semantyczne, które niosą określone znaczenie i ułatwiają definiowanie struktury logicznej dokumentu.
Najważniejsze znaczniki
-
<header> – nagłówek strony lub sekcji.
Zazwyczaj zawiera tytuł, logo, główne menu nawigacyjne lub inne elementy wprowadzające. Strona zwykle ma jeden główny <header>, ale sekcje i artykuły mogą mieć własne nagłówki.
-
<nav> – sekcja nawigacji.
Używana do grupowania linków nawigacyjnych (np. główne menu, paginacja). Nie każdą listę linków trzeba otaczać <nav> — tylko te istotne z punktu widzenia nawigacji.
-
<main> – główna zawartość strony.
Element unikalny na stronie (tylko jeden). Zawiera centralny kontent, np. treść artykułu czy wyniki wyszukiwania.
-
<section> – ogólna sekcja tematyczna.
Stosujemy do podziału strony na logiczne części tematyczne, zazwyczaj z własnym nagłówkiem (np. "O nas", "Usługi").
-
<article> – samodzielny fragment treści.
Przykłady: wpis na blogu, artykuł newsowy, post na forum. Artykuł powinien być kompletny i funkcjonować niezależnie poza stroną.
-
<aside> – zawartość poboczna.
Używany do informacji uzupełniających (pasek boczny, ciekawostka, reklama). Często występuje obok głównej treści.
-
<footer> – stopka strony lub sekcji.
Zawiera informacje końcowe: prawa autorskie, linki kontaktowe, metadane artykułu (autor, data) itp. Można mieć wiele footerów (główny i wewnętrzne dla sekcji/artykulów).
Dlaczego semantyka ma znaczenie?
- Łatwiejsze rozumienie kodu — programiści szybciej rozpoznają strukturę strony bez polegania na klasach typu div.header.
- Dostępność — czytniki ekranu potrafią nawigować po semantycznych elementach (np. „przejdź do nawigacji” lub „pomiń nawigację, przejdź do głównej treści”), co ułatwia korzystanie osobom niewidomym.
- SEO — wyszukiwarki biorą pod uwagę strukturę HTML; zawartość w <main> i <article> może być traktowana jako ważniejsza.
Przykładowy prosty układ strony artykułowej
<body>
<header>
<h1>Moja Strona</h1>
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="o-mnie.html">O mnie</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Tytuł artykułu</h2>
<p class="meta">Opublikowano 1 stycznia 2025 przez Jan Kowalski</p>
</header>
<p>Treść artykułu... (tu byłby tekst, akapity, obrazki itp.)</p>
<p>Ciąg dalszy treści artykułu...</p>
<footer>
<p>Autor: Jan Kowalski. Kategorie: <a href="#">HTML</a>, <a href="#">CSS</a>.</p>
</footer>
</article>
<aside>
<h3>Powiązane artykuły</h3>
<ul>
<li><a href="#">Jak zacząć z HTML</a></li>
<li><a href="#">10 wskazówek CSS</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>W tym kodzie
- Główny nagłówek strony z tytułem i menu znajduje się w <header>.
- <main> zawiera artykuł (<article>) oraz zawartość poboczną (<aside>).
- Artykuł ma własny <header> (tytuł i meta) oraz <footer> (informacje o autorze).
- Całość zamyka główny <footer> ze stopką strony.
Stosowanie semantycznych znaczników sprawia, że kod jest bardziej opisowy niż same <div>, co ułatwia pracę deweloperom, poprawia dostępność i pomaga wyszukiwarkom zrozumieć strukturę strony. Materiał opracowano na podstawie udostępnionych treści: .
