header, nav, main, footer: wielka czwórka
Umieść stronę w regionach, których użytkownicy oczekują
header, nav, main, footer: wielka czwórka to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Mapa strony
Użytkownicy widzący potrafią błyskawicznie przejrzeć stronę. Użytkownicy czytników ekranu potrzebują mapy, a elementy HTML5 typu landmark ją dla nich tworzą.
Poznaj wielką czwórkę
Większość stron opiera się na czterech elementach: header, nav, main i footer. Razem dzielą układ na regiony, między którymi użytkownicy mogą się szybko przełączać. 🗺️
header: Górny baner
Element header na poziomie strony zawiera nazwę witryny, logo i treści wprowadzające. Czytniki ekranu udostępniają go jako region banera.
<header>
<h1>CoddyKit</h1>
</header>nav: Miejsce na odnośniki
Umieść główny zestaw odnośników w elemencie nav. Informuje on technologie wspomagające, że ten blok służy do nawigacji, dzięki czemu użytkownicy mogą go szybko znaleźć lub pominąć.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: Właściwa treść
Element main obejmuje unikatową treść strony. To właśnie do niej użytkownicy chcą przede wszystkim dotrzeć.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: Dolny region
Element footer na poziomie strony zawiera informacje o prawach autorskich, odnośniki prawne i dane kontaktowe. Czytniki ekranu ogłaszają go jako region informacji o treści.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Domyślne role bez dodatkowej pracy
Te znaczniki mają wbudowane role ARIA, więc header staje się banerem, a nav — nawigacją, bez żadnych dodatkowych atrybutów.
Kontekst zmienia rolę
Header umieszczony wewnątrz article jest tylko nagłówkiem sekcji, a nie banerem strony. Za punkt orientacyjny typu baner uznaje się wyłącznie header najwyższego poziomu.
Dlaczego div nie może tego zrobić
Element div nie ma roli, więc czytnik ekranu nie widzi niczego, do czego można przejść. Znaczniki punktów orientacyjnych zamieniają niewidoczną strukturę w prawdziwą nawigację.
<div class="nav">...</div>Cała strona na mapie
Połącz te cztery elementy, a użytkownik czytnika ekranu natychmiast usłyszy układ Twojej strony, zanim przeczyta choćby jedno słowo. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Swobodne pomijanie treści
Po dodaniu punktów orientacyjnych użytkownicy mogą przeskoczyć z nagłówka bezpośrednio do main, pomijając powtarzające się odnośniki na każdej stronie.
Szybkie sprawdzenie
Który punkt orientacyjny obejmuje unikatową, główną treść strony?
Podsumowanie: wielka czwórka
Dowiedziałeś się, że elementy header, nav, main i footer tworzą dla użytkowników czytników ekranu mapę strony. Natywne znaczniki zapewniają role punktów orientacyjnych bez dodatkowej pracy. 🙌
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „header, nav, main, footer: wielka czwórka” jest bezpłatna?
Tak — pełny tekst „header, nav, main, footer: wielka czwórka” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „header, nav, main, footer: wielka czwórka”?
Umieść stronę w regionach, których użytkownicy oczekują Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „header, nav, main, footer: wielka czwórka”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- header, nav, main, footer: wielka czwórka
- Umieszczanie treści w main i tylko jednym main
- Nazywanie wielu regionów za pomocą aria-label
- Nawigacja po punktach orientacyjnych: jak użytkownicy przemieszczają się po stronie