Содержание
  1. Что такое футер сайта и какие задачи он закрывает
  2. Сколько ссылок класть в футер сайта
  3. Разметка футера сайта: рабочий HTML
  4. Почему в разметке подвала стоят именно эти теги
  5. Когда футер сайта перестаёт быть ориентиром contentinfo
  6. Как прижать футер сайта к низу короткой страницы
  7. Адаптивный футер сайта без медиазапросов
  8. Контраст текста в подвале: цифры вместо «на глаз»
  9. Типичные ошибки верстки футера сайта
  10. Чек-лист приёмки футера сайта
  11. Частые вопросы про футер сайта
ГайдыОбновлено · 08.2026

Верстка футера: завершение страницы с элегантностью

29 августа 2023 · 18 минут чтения

Проверка фактов
Юлия Найпак
Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.
Автор
Редакция
Коллектив авторов, редакторов и иллюстраторов статей на сайте блога онлайн-университета «Зерокодер». Пишем…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Футер сайта — нижний блок страницы, который повторяется на всех её экранах: навигация по разделам, контакты, правовые документы и копирайт. В разметке это тег <footer> в корне <body>, в CSS — сетка на grid и прижатие к низу через flex. От того, где именно стоит тег, зависит, попадёт ли подвал в список ориентиров скринридера.

Что нужно знать до того, как открывать редактор:

  • подвал в корне <body> получает роль contentinfo — по ней подвал попадает в список ориентиров, по которому скринридер ходит отдельной командой;
  • тот же тег внутри <section> или <article> роль contentinfo теряет, и в списке ориентиров его нет;
  • прижать подвал к низу короткой страницы — две строки CSS на flex или grid, без position: fixed;
  • одна строка repeat(auto-fit, minmax(220px, 1fr)) перестраивает колонки подвала от 3 до 1 без единого медиазапроса;
  • серый #999 на тёмном #333 даёт контраст 4,43:1 и не проходит порог WCAG 4,5:1 — до порога не хватает одного шага светлее.

Обновлено: август 2026. Все примеры кода прогнаны в Chromium 145.0.7632.6, замеры приведены в тексте.

Что такое футер сайта и какие задачи он закрывает

Футер (он же подвал, нижний колонтитул) закрывает страницу снизу и держит то, что нужно редко, но всем: реквизиты, документы, карту разделов, способы связи. Спецификация HTML описывает элемент так: «The footer element represents a footer for its nearest ancestor sectioning content element, or for the body element if there is no such ancestor» — то есть подвал относится к ближайшей секции, а если такой нет, ко всей странице.

Пользователь приходит в подвал по трём сценариям. Первый: дочитал страницу до конца и ищет, куда идти дальше. Второй: сразу мотает вниз за телефоном, адресом или ссылкой на соцсети — так ведут себя те, кто уже решил связаться. Третий: ищет юридическую страницу — оферту, политику обработки данных, реквизиты.

Из этих сценариев следует состав. Подвал держит навигацию второго уровня (то, чему не хватило места в шапке), контакты, правовой блок и копирайт. Всё остальное — подписка, переключатель языка, платёжные логотипы, бейджи наград — добавляется под конкретную задачу проекта.

Подвал и шапка делят между собой одну работу — ориентацию на сайте, поэтому дублировать в подвале всё меню бессмысленно: разделение функций элементов в верстке экономит и место, и внимание. По той же логике устроен боковой блок — про него отдельный разбор: верстка сайдбаров.

Короткий итог: состав подвала диктуют три сценария выше. Всё, что не попадает ни в один из них, уходит на отдельную страницу.

Сколько ссылок класть в футер сайта

Порядок блоков подвала по частоте обращений
Порядок блоков подвала по частоте обращений

Совет «не перегружайте подвал» встречается в каждой второй статье, но без числа он не помогает. Мы посчитали сами: взяли выдачу Яндекса по запросу «футер сайта» (замер 17 августа 2026 года) и разобрали подвалы всех девяти страниц из топ-10 — вторая строка там занята картиночной выдачей, считать в ней нечего. У шести из девяти подвал размечен тегом <footer>, у трёх этого тега в отдаче нет. У тех шести — от 3 до 56 ссылок, медиана 19,5.

Это замер. Рекомендация из него не следует автоматически, поэтому дальше — редакторское суждение: держаться ближе к медиане, 12–25 ссылок в 3–4 колонках. Пятьдесят с лишним ссылок в подвале встречаются, но такой блок работает уже как карта сайта, и с телефона его не разбирают.

Ещё цифра из того же замера: тег <address> для контактов не использует ни одна из девяти страниц, отдельный <nav> внутри подвала — одна. Семантика подвала на практике проседает даже у тех, кто сам про неё пишет.

Порядок колонок стоит выстраивать по убыванию спроса: сначала разделы, за ними контакты, затем правовое, в самом низу копирайт. На телефоне колонки складываются в столбик именно в этом порядке, и первым под большим пальцем оказывается то, за чем чаще приходят.

Две практики из старого набора рекомендаций держатся до сих пор. Первая — согласованность с остальным сайтом: подвал берёт ту же палитру, ту же сетку и ту же типографику, что и шапка, иначе он читается как чужой блок. Вторая — ссылка «Наверх». Она имеет смысл на длинных страницах: каталог, лента, лонгрид. Верстать её стоит кнопкой: <button type="button"> с обработчиком window.scrollTo({top: 0, behavior: 'smooth'}). Вариант с якорем на пустой хеш добавляет в адрес страницы решётку и оставляет её там после прокрутки.

Короткий итог: 12–25 ссылок, 3–4 смысловые группы, порядок групп — по частоте обращений.

Разметка футера сайта: рабочий HTML

Это законченный подвал, который можно вставить в проект целиком. Дальше по тексту разобрано, почему каждый тег стоит именно здесь.

<footer class="site-footer">
  <div class="site-footer__inner">

    <nav class="site-footer__col" aria-label="Разделы сайта">
      <h2 class="site-footer__title">Разделы</h2>
      <ul>
        <li><a href="/about/">О компании</a></li>
        <li><a href="/services/">Услуги</a></li>
        <li><a href="/blog/">Блог</a></li>
      </ul>
    </nav>

    <nav class="site-footer__col" aria-label="Документы">
      <h2 class="site-footer__title">Документы</h2>
      <ul>
        <li><a href="/privacy/">Политика конфиденциальности</a></li>
        <li><a href="/terms/">Пользовательское соглашение</a></li>
      </ul>
    </nav>

    <address class="site-footer__col">
      <b>ООО «Ромашка»</b><br>
      <a href="tel:+74951234567">+7 495 123-45-67</a><br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>

  </div>

  <p class="site-footer__legal"><small>© 2026 ООО «Ромашка»</small></p>
</footer>

Почему в разметке подвала стоят именно эти теги

Разбор по элементам — четыре решения, которые чаще всего делают наугад.

  • Два <nav> с aria-label. Каждая колонка ссылок — самостоятельная навигация. Когда навигаций на странице больше одной, их нужно подписать, иначе в списке ориентиров окажутся два одинаковых пункта «navigation». В замере дерева доступности Chromium 145 разметка выше отдала ориентиры «navigation: Разделы сайта» и «navigation: Документы» — подписи взялись именно из aria-label.
  • <address> для контактов. MDN формулирует ограничение жёстко: «The <address> element can only be used to represent the contact information for its nearest <article> or <body> element ancestor». В подвале сайта ближайший предок — <body>, значит это контакты всего сайта, и тег на месте. А вот адрес филиала в карточке товара под <address> уже не подходит.
  • <small> вокруг копирайта. MDN описывает <small> так: «side-comments and small print, like copyright and legal text» — тег означает статус текста, мелким его делает CSS. Копирайт и правовая сноска попадают под это определение точно.
  • <h2> в заголовках колонок. Заголовок даёт скринридеру точку входа в список и одновременно работает визуальным якорем при беглом просмотре. Скрывать его классом visually-hidden стоит только тогда, когда дизайн не предусматривает подписи над колонкой.

Отдельно про <address>: MDN в разделе Permitted content перечисляет, чего внутри быть не должно, — вложенного <address>, заголовков от <h1> до <h6>, секций, <header> и <footer>. Конструкция вида <address><h3>Контакты</h3>…</address> — невалидная разметка, заголовок нужно выносить перед тегом.

Короткий итог: четыре тега — footer, nav, address, small — закрывают семантику подвала целиком, дополнительные ARIA-атрибуты сверх aria-label здесь не нужны.

Когда футер сайта перестаёт быть ориентиром contentinfo

Роль подвала зависит от того, внутри чего стоит тег (замер Chromium 145)
Роль подвала зависит от того, внутри чего стоит тег (замер Chromium 145)

Главная ловушка семантики подвала: тег <footer> сам по себе роль contentinfo не гарантирует. Она зависит от того, внутри чего лежит тег. В справочнике MDN по элементу footer в технической сводке записано: implicit ARIA role — «contentinfo, or generic if a descendant of an article, aside, main, nav or section element».

Мы проверили это на живом браузере. Собрали страницу с четырьмя подвалами и сняли полное дерево доступности через CDP-метод Accessibility.getFullAXTree в Chromium 145.0.7632.6. Результат:

Где стоит тег Роль в дереве доступности Ориентир для скринридера
<footer> прямо в <body> contentinfo да
<footer> внутри <section> sectionfooter нет
<footer> внутри <article> sectionfooter нет
<footer role="contentinfo"> внутри <section> contentinfo да, но это уже второй ориентир на странице

Формулировки MDN и живого Chromium расходятся: справочник обещает роль generic, браузер 145-й версии отдаёт sectionfooter. На практике важно другое — совпадают они в том, что вложенный подвал роль contentinfo теряет и в навигацию по ориентирам не попадает.

Отсюда два правила. Первое: подвал сайта — прямой потомок <body>, обёртка <div class="wrapper"> вокруг него роль не ломает, а вот <section> ломает. Второе: contentinfo на странице должен быть один. MDN в справочнике по роли contentinfo формулирует это прямо: «Each page should only include one contentinfo landmark, created by either using the <footer> element or by declaring role="contentinfo"».

MDN добавляет в разделе Permitted parents ещё одно ограничение вложенности: <footer> не может быть потомком <address>, <header> или другого <footer>.

Короткий итог: проверять роль подвала стоит в браузере — вкладка Accessibility в DevTools показывает её за два клика.

Как прижать футер сайта к низу короткой страницы

Прижатый подвал: три полосы на body высотой 100dvh
Прижатый подвал: три полосы на body высотой 100dvh

Классическая жалоба: на странице «Спасибо за заказ» текста на три строки, и подвал висит посреди белого экрана. Лечится это двумя правилами CSS на <body>.

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

Схема одинакова для обоих вариантов: шапка и подвал занимают ровно свою высоту, а средний блок забирает весь остаток окна. Вариант на гридах делает то же самое и не требует правок в <main>:

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Разницу видно на стенде из трёх блоков. Внутри <body> — шапка, один абзац и подвал из примера выше; из стилей только то, что напечатано в этой статье, — оформление подвала из раздела про адаптив плюс один из двух блоков прижатия; окно 1280×800:

<body>
  <header>Шапка</header>
  <main><p>Контент</p></main>
  <!-- сюда подвал из примера выше, без изменений -->
</body>

Замер в Chromium 145.0.7632.6 на этом стенде: с блоком на флексах и с блоком на гридах нижняя граница подвала встаёт ровно на отметку 800 пикселей — по низу окна. Если оба блока убрать и оставить только оформление подвала, граница окажется на отметке 369,81 пикселя: под подвалом останется пустая полоса почти в половину экрана.

Две строки min-height подряд стоят намеренно. Единица dvh считается от динамического размера окна, а vh, по определению MDN, «is equivalent to lvh», то есть от большого — того, каким окно становится, когда адресная строка мобильного браузера уезжает. На телефоне 100vh поэтому даёт лишнюю полосу прокрутки. Браузеры, которые про dvh не знают, вторую строку просто пропустят и останутся на 100vh.

Чего здесь делать не нужно — position: fixed; bottom: 0 на подвале. Это фиксированная панель поверх контента: она закрывает нижнюю часть текста и остаётся на экране всё время чтения. Такой приём годится для панели с кнопкой заказа, но подвал сайта им не прижимают.

Короткий итог: min-height: 100dvh плюс flex или grid на <body> — весь код, который нужен для прижатого подвала.

Адаптивный футер сайта без медиазапросов

Колонки подвала перестраиваются одной строкой — grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)). Браузер сам считает, сколько колонок шириной от 220 пикселей помещается в контейнер, и складывает лишние.

.site-footer {
  background: #1f2937;
  color: #e5e7eb;
  padding: 40px 20px 24px;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
  color: #e5e7eb;
}

.site-footer address {
  font-style: normal;
  line-height: 1.8;
}

.site-footer__legal {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid #374151;
}

Замер ширины колонок в Chromium 145 при трёх блоках в подвале: 390 пикселей — одна колонка на всю ширину, 600 — две, 768 и выше — три. Горизонтальной прокрутки нет ни на одной из проверенных ширин. Три медиазапроса, которые обычно пишут под эти же три состояния, здесь не нужны вовсе.

Правило min-height: 24px на ссылках закрывает требование WCAG 2.2 к размеру цели нажатия: критерий 2.5.8 Target Size (Minimum) уровня AA требует «at least 24 by 24 CSS pixels» (разбор критерия на сайте W3C). На стенде из предыдущего раздела ссылка подвала получилась высотой 32 пикселя — запас есть. Что именно её держит, показывает вычитание. Убрать из блока .site-footer li a одну строку min-height: 24px — остаётся 26 пикселей, высоту дотягивает padding: 4px 0, порог всё ещё взят. Убрать блок целиком — ссылка становится строчной и падает до 17 пикселей, это ниже минимума. Значит, размер цели держат display: inline-block и вертикальные отступы вместе, а min-height страхует случай, когда в проекте окажется мельче кегль или меньше padding.

Подвал — тот блок, который проще всего собирать сразу от узкого экрана: колонок мало, порядок жёсткий, ничего не ломается при растягивании. Логика такого подхода разобрана отдельно — что такое mobile first. Порядок объявления стилей подвала в общем проекте лучше держать по той же схеме, что и остальные блоки: CSS-архитектура и файловая структура.

Короткий итог: auto-fit с minmax заменяет медиазапросы, min-height: 24px на ссылках — требование доступности уровня AA.

Контраст текста в подвале: цифры вместо «на глаз»

Подвал почти всегда делают тёмным, а текст в нём — приглушённо-серым. Именно здесь чаще всего теряется читаемость: критерий WCAG 1.4.3 Contrast (Minimum) уровня AA требует контраст 4,5:1 для обычного текста и 3:1 для крупного (от 18 пунктов или от 14 пунктов жирного).

Мы посчитали по формуле относительной яркости WCAG типовые пары «текст на фоне подвала»:

Текст Фон Контраст Порог 4,5:1
#777 #333 2,82:1 нет
#999 #333 4,43:1 нет
#aaa #333 5,44:1 да
#9ca3af #1f2937 5,78:1 да
#e5e7eb #1f2937 11,86:1 да

Показательна пара #999 на #333: 4,43:1 против порога 4,5:1. На глаз она выглядит совершенно нормально, а формально не проходит — от порога её отделяет одна ступень светлее. Именно так контраст и проваливают: берут «умеренно серый» из макета и не проверяют числом.

Отдельная проверка нужна ссылкам. Когда ссылка отличается от окружающего текста только оттенком, человек с нарушением цветовосприятия её не находит — критерий WCAG 1.4.1 Use of Color уровня A требует, чтобы цвет не оставался единственным визуальным средством различения. Поэтому в примере выше ссылки и текст одного цвета, а различает их подчёркивание. Снять подчёркивание можно, если развести ссылку и окружающий текст по светлоте: W3C засчитывает контраст 3:1 между ними как самостоятельный признак.

Короткий итог: цвет текста подвала проверяется калькулятором контраста до верстки, минимум — 4,5:1.

Типичные ошибки верстки футера сайта

Восемь дефектов, которые встречаются чаще остальных, и минимальная правка под каждый.

Ошибка Что ломается Правка
<div class="footer"> вместо тега роли contentinfo нет, ориентира нет заменить обёртку на <footer>
подвал сайта внутри <section> роль вырождается, подвал выпадает из навигации по ориентирам поднять тег в корень <body>
два <footer> без подписи два одинаковых ориентира, различить их нечем aria-label каждому
position: fixed; bottom: 0 панель перекрывает низ контента на всех экранах flex или grid на <body>
только min-height: 100vh на мобильном появляется лишняя полоса прокрутки добавить строку с 100dvh
заголовок внутри <address> невалидная разметка вынести <h2> перед тегом
серый текст без проверки контраст ниже 4,5:1 посчитать пару и осветлить
год копирайта вписан руками к январю подвал устаревает на всём сайте подставлять год на бэкенде или скриптом

Отдельно про полное дублирование меню шапки в подвале. Оно раздувает список ссылок и ничего не добавляет: человек, доскроллив до низа, уже видел это меню наверху. Полезнее положить туда то, чего в шапке нет — юридические страницы, реквизиты, разделы второго уровня.

Ещё одна незаметная ошибка — атрибут lang. Страницу на русском языке нередко открывают шаблоном с <html lang="en">, и синтезатор речи читает русский текст английскими правилами. Правка на один символ, а слышно её сразу.

Короткий итог: почти каждый дефект из таблицы правится одной строкой, но виден он только при проверке в браузере — в макете все восемь выглядят одинаково прилично.

Чек-лист приёмки футера сайта

Девять пунктов, по которым подвал проверяется перед выкаткой.

  • тег <footer> — прямой потомок <body>, обёртки-<div> допустимы, <section> вокруг него — нет;
  • во вкладке Accessibility браузерных DevTools у подвала стоит роль contentinfo, и такая роль на странице одна;
  • каждая колонка ссылок обёрнута в <nav> со своим aria-label;
  • контакты лежат в <address>, заголовок колонки вынесен перед тегом;
  • копирайт обёрнут в <small>, год подставляется автоматически;
  • на <body> стоят min-height: 100dvh и flex либо grid, подвал прижат к низу на короткой странице;
  • колонки перестраиваются от 3 к 1 без горизонтальной прокрутки на 390 пикселях;
  • высота ссылок — от 24 пикселей, контраст текста к фону — от 4,5:1;
  • число ссылок в подвале держится в редакторском коридоре 12–25 (замер по топ-10 дал разброс 3–56 при медиане 19,5).

Проверять всё это удобно прямо в DevTools: вкладка Accessibility показывает роли и подписи ориентиров, панель Elements — вычисленный контраст пары «текст — фон» при наведении на цвет, режим адаптива — перестроение колонок.

Частые вопросы про футер сайта

Что такое футер сайта

Футер сайта — нижний блок страницы, который повторяется на всех её экранах и содержит навигацию по разделам, контакты, правовые документы и копирайт. По спецификации HTML элемент footer относится к ближайшей секции-предку, а если такой нет — ко всей странице.

Каким тегом верстают футер сайта

Тегом footer, поставленным прямым потомком body. Внутри колонки ссылок оборачивают в nav с атрибутом aria-label, контакты — в address, копирайт — в small. Обёртка div вокруг footer роль не ломает, а вот section вокруг него ломает.

Почему footer внутри section не считается contentinfo

Потому что роль contentinfo зависит от контекста. MDN описывает её как contentinfo или generic, если элемент лежит внутри article, aside, main, nav или section. Замер дерева доступности в Chromium 145.0.7632.6 показал: footer в корне body получает роль contentinfo, тот же footer внутри section или article — роль sectionfooter, и в списке ориентиров для скринридера его нет.

Как прижать футер к низу страницы, если контента мало

Двумя правилами на body: min-height 100dvh и display flex с направлением column, плюс flex 1 на main. Вариант на гридах — min-height 100dvh и grid-template-rows auto 1fr auto. На стенде из шапки, одного абзаца и подвала при окне 1280 на 800 пикселей оба варианта ставят нижнюю границу подвала ровно на отметку 800 пикселей; если оставить только оформление подвала, она оказывается на отметке 369,81. Свойство position fixed для этого не подходит: оно даёт панель поверх контента.

Сколько ссылок ставить в футер сайта

Замер выдачи Яндекса по запросу «футер сайта» от 17 августа 2026 года: у шести из девяти страниц топ-10 подвал размечен тегом footer, у трёх этого тега в отдаче нет; у тех шести — от 3 до 56 ссылок, медиана 19,5. Рекомендация редакции по этому ряду — держаться ближе к медиане, 12–25 ссылок в 3–4 смысловых группах.

Какой контраст текста нужен в подвале

Не ниже 4,5:1 для обычного текста и 3:1 для крупного — этого требует критерий WCAG 1.4.3 уровня AA. Типичная пара «серый #999 на тёмном #333» даёт 4,43:1 и порог не проходит, а #aaa на том же фоне даёт 5,44:1 и проходит.

Читайте также

3 материала