Структура страницы: шапка, main и подвал

Урок 1.5 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно

Цель урока: Разложить страницу на смысловые части: header, nav, main и footer.

Нужно знать заранее: Урок 1.4

Объяснение

Зачем это нужно: Когда блоков становится много, важно не только то, как они выглядят, но и что они значат. Семантические теги объясняют: здесь шапка, здесь меню, здесь основное содержимое, здесь подвал. Это помогает людям, поисковикам и скринридерам. И вам самим: через месяц вы быстрее поймёте свою страницу.

Как это работает: header — шапка страницы или блока: логотип, название, меню. nav — навигация: набор ссылок. main — основное содержимое. На странице должен быть один main. section — смысловой раздел внутри main. article — самостоятельная единица: статья, карточка, пост. aside — боковая колонка: дополнительная информация. footer — подвал: контакты, копирайт, ссылки. div — нейтральный контейнер, когда смысла нет. Его не запрещено использовать, но если подходит семантический тег, лучше он.

Пример с разбором: <header> <h1>Мой сайт</h1> <nav> <a href="#">Главная</a> <a href="#">Обо мне</a> </nav> </header> <main> <p>Здесь будет основное содержимое.</p> </main> <footer> <p>© 2026</p> </footer> Такую страницу можно прочитать без CSS: видно, где шапка, где меню, где главное, где подвал.

Разбор по шагам: 1. Начните с header: название и меню. 2. Добавьте main: всё, ради чего страница. 3. Закончите footer: контакты или копирайт. 4. Внутри main разбейте содержимое на section, если разделов несколько.

Частая ошибка: Всё в div. Тогда страница выглядит нормально, но структуры нет. Вторая ошибка — несколько main. Третья — header внутри main: шапка относится ко всей странице, а не к основному блоку.

Важно: Семантика — не «для галочки». По ней скринридер строит навигацию, а поисковик понимает, что главное. Один main на страницу — это правило, а не пожелание.

Проверь себя: Какой тег у основного содержимого? main. Сколько main может быть на странице? Один. Какой тег у подвала? footer. Зачем нужен nav? Для навигации по ссылкам.

Итог: Структура страницы — это не оформление, а смысл. header, nav, main, footer делают страницу понятной и людям, и машинам.

Что дальше: В уроке 1.6 — классы и id: как обратиться к элементу.

<header>
  <h1>Мой сайт</h1>
  <nav>
    <a href="#">Главная</a>
    <a href="#">Обо мне</a>
  </nav>
</header>
<main>
  <p>Здесь будет основное содержимое.</p>
</main>
<footer>
  <p>© 2026</p>
</footer>

Уроки модуля 1

• 1.1 Что такое интерфейс и из чего он собран (бесплатно)
• 1.2 Первая страница: заголовок и текст (бесплатно)
• 1.3 Кнопка, на которую хочется нажать (бесплатно)
• 1.4 Ссылка, картинка и список (бесплатно)
• 1.5 Структура страницы: шапка, main и подвал — вы здесь (бесплатно)
• 1.6 Классы и id: как обратиться к элементу (бесплатно)
• 1.7 Мини-проект: страница-визитка (бесплатно)
• 1.8 Разбор первой страницы: что поправить (бесплатно)