Тег footer в HTML - полное руководство по применению

Главная

База знаний

html

Семантические элементы

Тег footer в HTML - назначение семантика и практические примеры

26 ноября 2025

Автор

Олег Марков

Введение

Тег footer в HTML отвечает за оформление подвала страницы или отдельного фрагмента интерфейса. Подвал почти всегда есть на сайте, но у начинающих разработчиков часто возникают вопросы, как именно его размечать, что в него класть, сколько раз на странице можно использовать footer и как это влияет на SEO и доступность.

Здесь вы разберете, какую семантическую роль играет footer, чем он отличается от простого блока div, какие типичные элементы в нем размещают и как организовать удобную и адаптивную верстку подвала. Я покажу примеры кода и обращу внимание на мелкие, но важные детали, которые часто упускают в реальных проектах.

Тег footer появился в HTML5, когда в язык добавили семантические элементы, описывающие структуру документа. Его основная идея — дать браузеру, поисковикам и вспомогательным технологиям (например, экранным читателям) очевидный сигнал, что это подвал некоего раздела.

Само слово "подвал" здесь важно. Footer — это не просто нижний блок страницы, а логическое завершение некоторого содержимого.

Семантическое определение

Если говорить ближе к спецификации, footer — это раздел, который обычно содержит:

информацию об авторе или организации;
служебные ссылки;
контакты;
копирайт;
данные об источниках;
навигацию по вспомогательным разделам;
итоговую или повторяющую информацию по текущему разделу.

Ключевая мысль — footer относится к ближайшему "родительскому" разделу. Если он расположен внутри body, но не внутри других семантических контейнеров, он считается подвалом всей страницы. Если footer находится, например, внутри article, то он описывает именно этот article.

В чем отличие от div

Многие верстают подвал через div class="footer", и внешне это никак не отличается. Разница — в семантике и доступности:

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

Поисковые системы и вспомогательные технологии умеют использовать эту информацию. Например, экранный читалка может предложить пользователю "перейти к подвалу страницы" или "перейти к подвалу статьи". Div такую роль не дает.

Смотрите, простой пример сравнения разметки.

Плохо, если вам важна семантика:

<!-- Несемантический вариант -->
<div class="footer">
  <!-- Здесь подвал страницы -->
</div>

Хорошо, если вы хотите сделать структуру более понятной:

<!-- Семантический вариант -->
<footer>
  <!-- Здесь подвал страницы -->
</footer>

Второй вариант проще для машинного анализа и лучше описывает структуру документа.

Частый вопрос — можно ли использовать несколько footer на одной странице. Да, можно.

Вы можете разместить footer:

один раз для всей страницы;
внутри каждого article;
внутри section;
внутри aside;
внутри элемента main (как подвал основного содержимого, но обычно main содержит только контент, а общий footer — отдельно).

Главное правило — footer должен логически завершать тот блок, внутри которого он расположен.

Пример, где footer используется несколько раз:

<body>
  <header>
    <!-- Шапка сайта -->
  </header>

  <main>
    <article>
      <h1>Новость дня</h1>
      <p>Текст новости...</p>

      <footer>
        <!-- Подвал конкретной статьи -->
        <!-- Здесь можно указать автора, дату, теги -->
        <p>Автор статьи - Иван Иванов</p>
        <p>Опубликовано - 24 ноября 2025</p>
      </footer>
    </article>

    <article>
      <h2>Еще одна новость</h2>
      <p>Текст второй новости...</p>

      <footer>
        <!-- Подвал второй статьи -->
        <p>Автор - Петр Петров</p>
        <p>Теги - новости спорт</p>
      </footer>
    </article>
  </main>

  <footer>
    <!-- Глобальный подвал сайта -->
    <p>© 2025 Моя компания</p>
  </footer>
</body>

Как видите, на странице три footer, и это корректно с точки зрения HTML.

Иногда разработчики ставят footer на каждый "нижний" блок, даже если тот не является логическим завершением. Например, внутри каждого маленького виджета или карточки товара, где нет явного раздела, который нужно "закрыть" подвалом.

В таких условиях:

если это просто нижняя часть карточки без самостоятельного смысла — подойдет div;
если это действительно завершение отдельного смыслового блока (например, статьи или большого блока с документацией) — footer оправдан.

Важно не перегружать документ лишней семантикой, но и не бояться использовать footer там, где это логично.

Типичные элементы в подвале страницы

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

Обычно там можно увидеть:

логотип компании;
краткое описание или слоган;
меню с дополнительными разделами (о компании, вакансии, помощь, контакты);
блок контактов — адрес, телефон, email;
ссылки на социальные сети;
копирайт;
ссылки на юридическую информацию (политика конфиденциальности, пользовательское соглашение);
форму подписки на рассылку;
переключатели языка или региона.

Пример, как это может выглядеть:

<footer>
  <!-- Логотип и краткая информация о компании -->
  <div>
    <img src="logo.svg" alt="Логотип компании">
    <p>Мы разрабатываем веб-приложения с упором на удобство и надежность.</p>
  </div>

  <!-- Навигационные ссылки -->
  <nav aria-label="Дополнительная навигация в подвале">
    <ul>
      <li><a href="/about">О компании</a></li>
      <li><a href="/careers">Вакансии</a></li>
      <li><a href="/support">Поддержка</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>

  <!-- Контакты и социальные сети -->
  <div>
    <p>Телефон - +7 999 123-45-67</p>
    <p>Email - info@example.com</p>

    <ul>
      <li><a href="https://t.me/example">Telegram</a></li>
      <li><a href="https://vk.com/example">VK</a></li>
      <li><a href="https://github.com/example">GitHub</a></li>
    </ul>
  </div>

  <!-- Копирайт и юридическая информация -->
  <div>
    <p>© 2025 ООО Пример</p>
    <a href="/privacy">Политика конфиденциальности</a>
  </div>
</footer>

Комментарии в примере подсвечивают смысловые блоки, чтобы вы видели структуру.

Спецификация не накладывает жестких ограничений на содержимое footer. Там можно использовать почти любые элементы HTML, кроме некоторых особых случаев (например, внутрь footer нельзя вкладывать другой footer, если это создает нелогичную структуру; но технически браузер это "переварит").

Однако есть хорошие практики:

не размещать в footer основной контент страницы;
не перегружать подвал слишком длинными текстами;
разделять содержимое на логические блоки, чтобы не получить "сплошной текст без структуры".

Если у вас внизу страницы большой раздел с документацией или текстом условий, его можно оформить как отдельный section или article, а уже под ним — footer для этой части или для всей страницы.

Разметка базового подвала сайта

Начнем с минимального рабочего варианта. Давайте разберемся на самом простом примере:

<footer>
  <!-- Краткий текст копирайта -->
  <p>© 2025 Мой сайт</p>
</footer>

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

Чаще всего подвал разбивают на несколько колонок для удобства навигации. Сначала можно сделать простую сетку без CSS-фреймворков.

<footer>
  <!-- Блок с логотипом и описанием -->
  <div class="footer-column">
    <!-- Логотип компании -->
    <img src="logo.svg" alt="Логотип компании">
    <!-- Краткое описание -->
    <p>Мы создаем решения для малого и среднего бизнеса.</p>
  </div>

  <!-- Блок навигации -->
  <div class="footer-column">
    <h2>Разделы сайта</h2>
    <ul>
      <!-- Ссылки на ключевые страницы -->
      <li><a href="/services">Услуги</a></li>
      <li><a href="/pricing">Цены</a></li>
      <li><a href="/blog">Блог</a></li>
    </ul>
  </div>

  <!-- Блок контактов -->
  <div class="footer-column">
    <h2>Контакты</h2>
    <p>Телефон - +7 999 123-45-67</p>
    <p>Email - support@example.com</p>
  </div>
</footer>

Чтобы эта разметка выглядела как колонки, вам понадобится CSS. Сейчас нас интересует именно структура и семантика, к стилям мы еще вернемся.

Иногда разработчики вообще не ставят заголовки в подвал, и он превращается в сплошной список ссылок. Лучше добавить хотя бы короткие заголовки второго или третьего уровня:

так удобнее экранным читателям;
так проще визуально разделить блоки.

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

Связь с header, main, article и section

Часто задают вопрос, как footer сочетается с другими семантическими блоками. Давайте посмотрим на типичную структуру страницы:

<body>
  <header>
    <!-- Основная шапка сайта - логотип и главное меню -->
  </header>

  <main>
    <!-- Основной контент страницы -->
  </main>

  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>

Здесь все просто — footer относится ко всему документу.

Теперь возьмем пример со статьей внутри main:

<main>
  <article>
    <header>
      <!-- Заголовок статьи и информация об авторе -->
    </header>

    <p>Текст статьи...</p>
    <p>Еще немного текста...</p>

    <footer>
      <!-- Информация о статье -->
      <!-- Здесь мы даем дополнительные сведения по материалу -->
      <p>Автор - Иван Иванов</p>
      <p>Опубликовано - 10 ноября 2025</p>
      <p>Теги - html css семантика</p>
    </footer>
  </article>
</main>

Здесь:

header внутри article — "шапка" конкретной статьи;
footer внутри article — подвал конкретной статьи;
общий footer документа может находиться ниже main.

Важный момент — footer внутри article не заменяет footer всего документа. У них разные уровни и разные задачи.

Можно ли помещать footer внутрь main

Технически можно, спецификация не запрещает. Иногда дизайнеры делают так, что визуально подвал является частью основного контента страницы. Но в большинстве макетов подвал логически относится ко всему сайту, а не только к содержимому main.

Частый и более понятный вариант — размещать footer как соседний элемент main, а не как вложенный:

<body>
  <header>...</header>

  <main>
    <!-- основной контент -->
  </main>

  <footer>
    <!-- общий подвал -->
  </footer>
</body>

Так структура для большинства инструментов понятнее.

Современные экранные читатели умеют ориентироваться по семантической структуре:

пользователь может открыть список "регионов" страницы (main, header, navigation, footer);
быстро перейти в подвал, чтобы найти контакты или юридическую информацию.

Если вы используете footer, то помогаете таким пользователям. Если подвал размечен как div, им придется "пролистывать" туда весь контент.

Когда нужно и когда не нужно использовать role

Иногда можно встретить такую запись:

<footer role="contentinfo">
  <!-- Подвал сайта -->
</footer>

Role contentinfo говорит технологиям доступности, что это блок с информацией о сайте или документе. В случае тега footer такое указание чаще всего избыточно — браузеры уже знают, что footer играет такую роль.

Но бывают случаи, когда вы по какой-то причине не можете использовать footer (например, в очень старом легаси-коде, который рендерится старыми шаблонами):

<div role="contentinfo">
  <!-- Подвал сайта в несемантической разметке -->
</div>

Здесь атрибут role минимально компенсирует отсутствие семантического тега.

Рекомендация простая:

если у вас есть возможность использовать footer — используйте его;
атрибут role добавлять к footer обычно не нужно, он не дает больших преимуществ поверх самого тега.

Лейблы для навигации в подвале

Если в подвале есть навигационное меню, можно дополнительно пометить его для улучшения доступности:

<footer>
  <!-- Дополнительная навигация сайта в подвале -->
  <nav aria-label="Навигация в подвале">
    <ul>
      <li><a href="/about">О компании</a></li>
      <li><a href="/faq">Вопросы и ответы</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>

  <p>© 2025 Моя компания</p>
</footer>

Атрибут aria-label помогает владельцам экранных читалок понять, что это не основное меню сайта, а именно навигация в подвале.

Адаптивная верстка подвала

Простейший адаптивный макет с flexbox

Давайте посмотрим, как сделать подвал с тремя колонками, которые на широких экранах идут в ряд, а на мобильных — становятся вертикальными. Я покажу вам, как это работает на практике.

HTML:

<footer class="site-footer">
  <div class="footer-column">
    <h2>О компании</h2>
    <p>Мы разрабатываем веб-приложения и сервисы для бизнеса.</p>
  </div>

  <div class="footer-column">
    <h2>Навигация</h2>
    <ul>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/pricing">Тарифы</a></li>
      <li><a href="/blog">Блог</a></li>
    </ul>
  </div>

  <div class="footer-column">
    <h2>Контакты</h2>
    <p>Телефон - +7 999 123-45-67</p>
    <p>Email - hello@example.com</p>
  </div>
</footer>

CSS-комментарии помогут лучше понять идею:

.site-footer {
  /* Делаем подвал флекс-контейнером */
  display: flex;
  /* Располагаем колонки горизонтально */
  flex-direction: row;
  /* Равномерно распределяем свободное пространство */
  justify-content: space-between;
  /* Разрешаем колонкам переноситься на следующую строку при нехватке места */
  flex-wrap: wrap;
  /* Добавляем отступы внутри подвала */
  padding: 20px;
  /* Задаем фоновый цвет подвала */
  background-color: #222;
  /* Цвет текста в подвале */
  color: #fff;
}

.footer-column {
  /* Базовая ширина одной колонки */
  flex: 1 1 200px;
  /* Отступы между колонками */
  margin: 10px;
}

/* Адаптивное поведение для маленьких экранов */
@media (max-width: 600px) {
  .site-footer {
    /* Меняем направление флексов на вертикальное */
    flex-direction: column;
  }

  .footer-column {
    /* Каждая колонка занимает всю ширину */
    flex: 1 1 100%;
  }
}

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

Расположение копирайта и нижней строки

В подвале часто есть отдельная "нижняя полоска" с копирайтом и дополнительными мелкими ссылками. Ее можно сделать отдельным блоком внутри footer.

<footer class="site-footer">
  <div class="footer-main">
    <!-- Основные колонки подвала -->
  </div>

  <div class="footer-bottom">
    <p>© 2025 Моя компания</p>
    <a href="/terms">Пользовательское соглашение</a>
  </div>
</footer>

CSS для нижней полоски:

.footer-bottom {
  /* Разделяем нижнюю часть визуально сверху */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  /* Добавляем отступ сверху */
  margin-top: 20px;
  /* Отступы вокруг содержимого */
  padding-top: 10px;
  /* Располагаем элементы в строку и разводим по краям */
  display: flex;
  justify-content: space-between;
  /* Выравниваем элементы по вертикали */
  align-items: center;
  /* Уменьшаем размер шрифта */
  font-size: 0.9rem;
}

Такой подход помогает четко разделить основной функциональный подвал и чисто юридический/информационный хвост.

Фон и контрастность

Подвал часто делают темным с белым текстом. Здесь важно следить за контрастом, чтобы текст был читаемым.

Рекомендации:

проверяйте контраст по шкале WCAG (минимум 4.5 к 1 для обычного текста);
не используйте слишком светло-серый на белом или почти черном фоне — это утомляет глаза;
убедитесь, что ссылки в подвале визуально отличаются от обычного текста (цветом или подчеркиванием).

Пример:

.site-footer {
  /* Темный фон */
  background-color: #1c1c1c;
  /* Светлый текст для контраста */
  color: #f0f0f0;
}

.site-footer a {
  /* Цвет ссылок в подвале */
  color: #9ddcff;
  /* Убираем подчеркивание по умолчанию */
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  /* Подчеркиваем ссылки при наведении и фокусе */
  text-decoration: underline;
}

Комментарии подсказывают, за что отвечает каждый кусок.

Границы и разделители

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

Несколько простых методов:

тонкая граница сверху;
увеличение отступов;
изменение фона.

.site-footer {
  /* Верхняя граница для отделения от контента */
  border-top: 1px solid #ddd;
  /* Верхний отступ от содержимого страницы */
  margin-top: 40px;
  /* Внутренние отступы подвала */
  padding: 20px 15px;
}

Такой вариант не перегружает дизайн, но визуально показывает, где основное содержимое заканчивается.

Иногда в подвале пытаются разместить вообще все, что не поместилось выше. В итоге:

слишком много ссылок;
несколько разных меню;
форма подписки, баннеры, виджеты соцсетей, огромный текст.

Это делает подвал неудобным:

пользователи просто перестают его воспринимать;
возрастает "шум" для поисковых систем и вспомогательных технологий.

Совет — делите информацию на блоки и задавайте приоритет. Подвал — не мусорная корзина, а логическое завершение.

Бывает и обратная ситуация — footer используют просто как удобный селектор для CSS: "это нижний блок — заворачиваем его в footer, чтобы было проще стилизовать". Формально это не ошибка, но лучше, когда семантика и внешний вид совпадают.

Смотрите, если у вас есть просто нижний рекламный баннер, который не является логическим завершением страницы, его можно оформить как отдельный section или div, а уже потом ниже разместить настоящий footer.

Отсутствие связанной семантики вокруг

Иногда внутри article размещают footer, но при этом вообще не используют заголовки или header. Структура получается неполной и плохо читаемой.

Лучше комбинировать элементы так:

<article>
  <header>
    <!-- Заголовок и метаданные статьи -->
    <h1>Заголовок статьи</h1>
    <p>Автор - Иван Иванов</p>
  </header>

  <p>Основной текст статьи...</p>

  <footer>
    <!-- Информация внизу статьи -->
    <p>Опубликовано - 10 ноября 2025</p>
    <p>Теги - html семантика</p>
  </footer>
</article>

Так структура логична: есть "шапка", "тело" и "подвал" конкретного блока.

Поисковики понимают, что содержимое footer — это, как правило, повторяющиеся служебные данные:

навигация по вспомогательным страницам;
контакты;
юридическая информация.

Их вклад в основной вес страницы меньше, чем вклад текста внутри main или article. Но это не значит, что footer не важен:

там чаще всего находятся ссылки на ключевые разделы сайта;
он помогает алгоритмам понять структуру сайта;
он влияет на удобство пользователей, а значит — косвенно и на поведенческие факторы.

Что не стоит делать с точки зрения SEO

Несколько распространенных практик, от которых лучше отказаться:

размещать огромные списки "SEO-ссылок" в подвале (полотно из десятков городов и услуг);
дублировать в footer все пункты главного меню без явной необходимости;
использовать крошечный шрифт для "скрытия" текста от пользователей.

Поисковые системы давно научились определять подобные приемы. Лучше использовать подвал аккуратно, оставляя там только действительно полезные ссылки.

Подвал лендинга с блоком подписки

На лендингах в подвал иногда выносят форму подписки или небольшой call-to-action. Покажу вам пример, как это реализовано на практике.

<footer class="landing-footer">
  <div class="footer-content">
    <div class="footer-about">
      <h2>О проекте</h2>
      <p>Наш сервис помогает автоматизировать работу с заявками клиентов.</p>
    </div>

    <form class="footer-subscribe" action="/subscribe" method="post">
      <h2>Подпишитесь на обновления</h2>
      <p>Раз в месяц отправляем подборку лучших материалов по автоматизации.</p>

      <!-- Поле для ввода email -->
      <label>
        Email
        <input type="email" name="email" required>
      </label>

      <!-- Кнопка отправки формы -->
      <button type="submit">Подписаться</button>
    </form>
  </div>

  <div class="footer-bottom">
    <p>© 2025 Сервис для заявок</p>
    <a href="/privacy">Политика конфиденциальности</a>
  </div>
</footer>

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

В SPA (React, Vue, Angular и другие фреймворки) footer обычно делают частью общего layout. С точки зрения HTML он все равно остается обычным тегом.

Идея простая:

layout содержит header, основную область и footer;
роутер заменяет содержимое основной области, но header и footer остаются.

Разметка на уровне шаблона может выглядеть так (на псевдо-JSX без привязки к конкретному фреймворку):

<body>
  <header>
    <!-- Шапка SPA-приложения -->
  </header>

  <main>
    <!-- Здесь фреймворк отрисовывает текущую страницу -->
  </main>

  <footer>
    <!-- Общий подвал для всех страниц SPA -->
    <p>© 2025 Моё SPA-приложение</p>
  </footer>
</body>

Семантика та же, что и у обычного сайта. Важно, чтобы SPA не ломало структуру и не помещало footer внутрь main только ради удобства рендеринга.

Краткое резюме

Footer в HTML — это семантический элемент, который обозначает подвал документа или отдельного смыслового блока. Он помогает:

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

Вы можете использовать несколько footer на одной странице — для всей страницы и для отдельных статей или секций. Главное — чтобы каждый footer логически завершал именно тот раздел, внутри которого расположен.

С точки зрения верстки footer — обычный блочный элемент. Его можно свободно стилизовать с помощью flexbox или grid, разбивать на колонки, добавлять формы и навигацию. Важно не перегружать подвал лишней информацией и сохранять хорошую читаемость и контраст.

Если вы будете помнить о семантике и доступности при использовании footer, подвал станет не просто декоративным блоком внизу экрана, а действительно полезной частью интерфейса.

Частозадаваемые технические вопросы

Технически браузер это отрисует, но с точки зрения семантики это лишено смысла. Footer должен завершать раздел, а не быть вложенным "подвалом подвала". Лучше разделить контент на логические блоки и использовать один footer для каждого из них.

Используйте макет на flexbox для всего тела документа.

html, body {
  /* Растягиваем высоту на весь экран */
  height: 100%;
}

body {
  /* Делаем тело флекс-контейнером по колонке */
  display: flex;
  flex-direction: column;
}

main {
  /* Заставляем main занимать все доступное пространство */
  flex: 1 0 auto;
}

footer {
  /* Футер останется внизу */
  flex-shrink: 0;
}

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Здесь main занимает всю доступную высоту, а footer прижимается к низу окна браузера, если контента мало.

Можно ли делать несколько разных подвалов на разных страницах

Да. Семантика не требует, чтобы на всем сайте был один и тот же footer. Вы можете:

использовать общий компонент подвала для большинства страниц;
подключать альтернативный вариант footer там, где этого требует дизайн или логика.

Важно лишь, чтобы в конкретном документе footer был один для всей страницы, если только вы не размечаете отдельные article или section со своими локальными подвалами.

Лучше не скрывать важные ссылки и контакты полностью. Но если часть блока второстепенная, можно использовать CSS:

/* Скрываем второстепенную колонку на маленьких экранах */
@media (max-width: 480px) {
  .footer-secondary {
    display: none;
  }
}

Разметка:

<footer>
  <div class="footer-main">...</div>
  <div class="footer-secondary">...</div>
</footer>

Поисковые системы и экранные читалки обычно все равно видят содержимое, даже если оно скрыто через display none, но не стоит убирать таким образом критически важную информацию.

Технически да, но это ухудшит опыт пользователей. Основная навигация должна быть доступна в верхней части страницы (обычно в header). Footer подходит для дублей важных ссылок и вспомогательных разделов, но не должен быть единственным местом навигации по сайту.