INF.03Frontend & CSS
Semantyka HTML5 (header, nav, main, article, section, footer)
Wprowadzone w standardzie HTML5 znaczniki opisujące znaczenie i rolę zawartości strony dla przeglądarek, czytników ekranowych i robotów wyszukiwarek.
Główne znaczniki semantyczne HTML5:
<header>– nagłówek witryny lub sekcji (logo, tytuł, autor).<nav>– główny blok linków nawigacyjnych.<main>– unikalna, główna treść dokumentu (może wystąpić tylko raz na stronie).<article>– samodzielna, niezależna treść nadająca się do ponownej publikacji (artykuł na blogu, post, komentarz).<section>– tematyczna sekcja dokumentu, zazwyczaj posiadająca własny nagłówek (<h2>-<h6>).<aside>– panel boczny z treściami pobocznymi (sidebar, reklamy, powiązane linki).<footer>– stopka dokumentu (prawa autorskie, kontakt, regulamin).
Dlaczego semantyka jest kluczowa?
- Dostępność (a11y) – ułatwia osobom niepełnosprawnym korzystanie z czytników ekranu.
- SEO – roboty Google lepiej rozumieją hierarchię i treść strony.
- Czytelność kodu – zastępuje nieczytelny ciąg znaczników
<div class="...">.
Chcesz sprawdzić to pojęcie w praktyce?
Przeszukaj pytania z oficjalnych arkuszy CKE powiązane z hasłem Semantyka HTML5 (header, nav, main, article, section, footer) lub rozpocznij trening.