Размещение содержимого в main и только в одном main
Определяйте единственную основную область содержимого
«Размещение содержимого в main и только в одном main» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
main — главный элемент страницы
На каждой странице есть одна главная ценность: её уникальное содержимое. Элемент main содержит это содержимое отдельно от верхнего и нижнего колонтитулов.
Только один main
На странице должен быть ровно один ориентир main. Два элемента main запутают пользователей, которые ожидают единственное основное место назначения.
Что помещать внутрь
Поместите основное содержимое страницы в main: статью, форму или панель управления. Именно за этим пользователь пришёл на страницу.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Что остаётся снаружи
Повторяющиеся элементы, например логотип сайта, общая навигация и ссылки в нижнем колонтитуле, должны находиться за пределами main, поскольку они не уникальны для этой страницы.
Место назначения ссылки пропуска
Ссылка пропуска указывает на main, чтобы пользователи клавиатуры могли сразу перейти к содержимому, минуя повторяющийся на каждой странице верхний колонтитул.
<a href="#main">Skip to content</a>
<main id="main">...</main>Сделайте main фокусируемым
Добавьте к main значение tabindex -1, чтобы ссылка пропуска могла переместить в него фокус, но сам элемент не попадал в порядок перехода по клавише Tab.
<main id="main" tabindex="-1">
...
</main>Два main: скрытое правило
Если вам когда-либо понадобится второй main, все элементы, кроме одного, должны быть скрыты от просмотра. Одновременно допускается только один видимый main.
Не вкладывайте main
Элемент main не может находиться внутри article, aside, nav, header или footer. Он располагается на верхнем уровне тела страницы.
Запасной вариант с ролью main
Для очень старых браузеров можно добавить role со значением main как запасной вариант, но встроенный элемент main — правильный современный выбор.
<main role="main">...</main>Почему один main помогает
При наличии одного main пользователи программ чтения с экрана нажимают одну клавишу и точно переходят к содержимому — на каждой странице и каждый раз. 🎯
Понятная структура страницы
Header, затем nav, затем один main, а после него footer. Такая предсказуемая структура позволяет легко просматривать страницу на слух.
Быстрая проверка
Сколько видимых ориентиров main должна предоставлять одна страница?
Итоги: один понятный main
Вы научились помещать уникальное содержимое в единственный main, оставлять повторяющиеся части снаружи и использовать его как место назначения ссылки пропуска. 🙌
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Размещение содержимого в main и только в одном main» бесплатный?
Да — полный текст урока «Размещение содержимого в main и только в одном main» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Размещение содержимого в main и только в одном main»?
Определяйте единственную основную область содержимого Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Размещение содержимого в main и только в одном main»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- header, nav, main, footer: большая четвёрка
- Размещение содержимого в main и только в одном main
- Именование нескольких областей с помощью aria-label
- Навигация по ориентирам: как пользователи перемещаются по странице