Umieszczanie treści w main i tylko jednym main
Zdefiniuj jeden główny region treści
Umieszczanie treści w main i tylko jednym main to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 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.
main to główna atrakcja
Każda strona ma swoją gwiazdę: unikatową treść. Element main to miejsce, w którym się ona znajduje, oddzielone od nagłówków i stopek.
Zawsze jedno main
Strona powinna mieć dokładnie jeden landmark main. Dwa elementy main dezorientują użytkowników, którzy oczekują jednego głównego miejsca docelowego.
Co należy umieścić wewnątrz
Umieść główną treść strony w elemencie main: artykuł, formularz lub panel. To właśnie po tę treść użytkownik przyszedł.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Co pozostaje na zewnątrz
Powtarzalne elementy, takie jak logo witryny, globalna nawigacja i linki w stopce, znajdują się poza elementem main, ponieważ nie są unikatowe dla tej strony.
Cel linku pomijającego
Link pomijający wskazuje element main, aby użytkownicy klawiatury mogli przejść bezpośrednio do treści, omijając powtarzalny nagłówek obecny na każdej stronie.
<a href="#main">Skip to content</a>
<main id="main">...</main>Ustaw możliwość skupienia dla main
Dodaj do elementu main wartość tabindex równą -1, aby link pomijający mógł przenieść fokus do jego wnętrza, bez dodawania go do zwykłej kolejności przechodzenia klawiszem Tab.
<main id="main" tabindex="-1">
...
</main>Dwa elementy main — ukryta zasada
Jeśli kiedykolwiek potrzebujesz drugiego elementu main, wszystkie poza jednym muszą być ukryte. W danym momencie dozwolony jest tylko jeden widoczny element main.
Nie zagnieżdżaj main
Element main nie może znajdować się wewnątrz article, aside, nav, header ani footer. Umieszcza się go na najwyższym poziomie elementu body strony.
Awaryjne użycie roli main
W przypadku bardzo starych przeglądarek można dodać role o wartości main jako rozwiązanie awaryjne, ale we współczesnych projektach właściwym wyborem jest natywny element main.
<main role="main">...</main>Dlaczego jeden main pomaga
Gdy istnieje jeden element main, użytkownicy czytników ekranu naciskają jeden klawisz i za każdym razem trafiają dokładnie do treści — na każdej stronie. 🎯
Przejrzysta struktura strony
Najpierw header, potem nav, następnie jeden element main, a na końcu footer. Taka przewidywalna struktura ułatwia słuchowe przeglądanie strony.
Szybkie sprawdzenie
Ile widocznych landmarków main powinna udostępniać pojedyncza strona?
Podsumowanie: jedno przejrzyste main
Nauczyłeś się umieszczać unikatową treść w jednym elemencie main, pozostawiać powtarzalne elementy poza nim i używać go jako celu linku pomijającego. 🙌
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 „Umieszczanie treści w main i tylko jednym main” jest bezpłatna?
Tak — pełny tekst „Umieszczanie treści w main i tylko jednym main” 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 „Umieszczanie treści w main i tylko jednym main”?
Zdefiniuj jeden główny region treści Ć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 2 z 4.
Ile czasu zajmuje lekcja „Umieszczanie treści w main i tylko jednym main”?
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