header, nav, main, footer: большая четвёрка
Разделяйте страницу на области, которые ожидают увидеть пользователи
«header, nav, main, footer: большая четвёрка» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
A Map for Your Page
Sighted users scan a page in a glance. Screen reader users need a map, and HTML5 landmark elements draw it for them.
Meet the Big Four
Four elements cover most pages: header, nav, main, and footer. Together they split your layout into regions users can jump between. 🗺️
header: The Top Banner
A page-level header holds your site name, logo, and intro content. Screen readers expose it as the banner region.
<header>
<h1>CoddyKit</h1>
</header>nav: Where Links Live
Wrap your primary set of links in nav. It tells assistive tech this block is navigation, so users can find or skip it fast.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: The Real Content
The main element wraps the unique content of the page. It is the destination users care about most.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: The Bottom Region
A page-level footer holds copyright, legal links, and contact info. Screen readers announce it as the contentinfo region.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Implicit Roles for Free
These tags carry built-in ARIA roles, so header becomes banner and nav becomes navigation with zero extra attributes.
Context Changes the Role
A header inside an article is just a section header, not the page banner. Only a top-level header counts as the banner landmark.
Why div Cannot Do This
A div has no role, so a screen reader sees nothing to jump to. Landmark tags turn invisible structure into real navigation.
<div class="nav">...</div>A Whole Page Mapped
Stack the four together and a screen reader user instantly hears the shape of your page before reading a word. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Free Skip-Ahead Power
With landmarks in place, users can jump past the header straight to main, skipping repeated links on every page.
Quick Check
Which landmark wraps the unique, primary content of a page?
Recap: The Big Four
You learned that header, nav, main, and footer give screen reader users a map. Native tags mean free landmark roles. 🙌
Часто задаваемые вопросы
Урок «header, nav, main, footer: большая четвёрка» бесплатный?
Да — полный текст урока «header, nav, main, footer: большая четвёрка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «header, nav, main, footer: большая четвёрка»?
Разделяйте страницу на области, которые ожидают увидеть пользователи Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «header, nav, main, footer: большая четвёрка»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- header, nav, main, footer: большая четвёрка
- Размещение содержимого в main и только в одном main
- Именование нескольких областей с помощью aria-label
- Навигация по ориентирам: как пользователи перемещаются по странице