Semantyka (znaczeniowość) w HTML5 polega na tym, że elementy strony opisujemy znacznikami mówiącymi jaką funkcję pełnią, a nie tylko jak są "pudełkami" do stylowania. Dzięki temu przeglądarka, wyszukiwarka i technologie asystujące (np. czytniki ekranu) łatwiej rozpoznają strukturę dokumentu.
W praktyce typowy szkielet strony semantycznej wykorzystuje m.in.:
- <header> – nagłówek strony lub sekcji (np. logo, tytuł, elementy wprowadzające),
- <nav> – obszar nawigacji (menu),
- <main> – główną, unikalną treść dokumentu (zwykle tylko raz na stronie),
- <section> – logiczne sekcje tematyczne,
- <article> – samodzielne, niezależne treści (np. wpis, artykuł, karta z treścią),
- <aside> – treści poboczne (np. panel boczny, elementy uzupełniające),
- <footer> – stopkę strony lub sekcji (np. prawa autorskie, linki pomocnicze).
Poprawny wykaz znaczników jest więc tym, który odwzorowuje role elementów projektu (nagłówek, menu, treść główna, treści poboczne, stopka) za pomocą powyższych elementów semantycznych.
Dlaczego pozostałe wykazy są błędne? Najczęściej zawierają jeden z typowych problemów:
- użycie niesemantycznych kontenerów (<div>) zamiast elementów znaczeniowych – kod działa wizualnie, ale nie jest semantyczny,
- zastąpienie elementów układu nieadekwatnymi znacznikami (np. nawigacja jako zwykła sekcja bez <nav>),
- niewłaściwe zastosowanie <main> (np. wielokrotnie na stronie albo jako kontener dla elementów niebędących treścią główną),
- pomieszanie roli <section> i <article> (sekcja to grupowanie tematyczne, artykuł to niezależna jednostka treści).
Wskazówka egzaminacyjna: najpierw nazwij role obszarów na projekcie (nagłówek/menu/treść/poboczne/stopka), a dopiero potem dopasuj do nich znaczniki HTML5.
