24 июл 2025
0

Тег <footer> в HTML: как сделать подвал страницы

Рассказываем, зачем нужен тег <footer>, что можно в него добавить и как правильно сверстать подвал сайта — адаптивный, с контактами и ссылками.

Иллюстрация: Оля Ежак для SKillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

В HTML за подвал отвечает тег <footer>. Поговорим о том, как его правильно использовать.

Содержание

Что делает тег <footer>
Когда и зачем использовать <footer>
Чем <footer> отличается от <div>
Как сверстать подвал на HTML
Как оформить <footer> с помощью CSS
Адаптивный подвал
Фиксированный подвал
Частые ошибки
Полезные советы

Что делает тег <footer>

Тег <footer> в HTML — семантический: он сообщает браузерам, поисковым системам и приложениям для людей с ограниченными возможностями здоровья, что внутри размещён дополнительный или справочный контент.

Подвал обычно располагается внизу страницы и содержит:

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

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

Когда и зачем использовать <footer>

На типовом сайте с несколькими разделами <footer> обычно размещают один раз — в самом конце страницы. Он общий для всего сайта и повторяется на всех страницах.

Но можно использовать и несколько подвалов на одной странице. Например:

внутри тега <article> — для вывода информации об авторе статьи, даты публикации или ссылки на источник;
в карточке товара — для блока с кнопкой «Купить» или ссылкой «Добавить в избранное».

<article>
  <h2>Новость</h2>
  <p>Текст статьи...</p>
  <footer>Источник: <a href="#">example.com</a></footer>
</article>

Если вы делаете очень короткий одностраничник (например, промолендинг), отдельный <footer> может не понадобиться — достаточно структурировать контент с помощью общих блоков и не выделять подвал как отдельную часть. Но даже на таких страницах подвал часто добавляют ради знака копирайта или ссылок на оферту.

Чем <footer> отличается от <div>

Технически вы можете создать подвал с помощью любого контейнера, например обычного тега <div> — пустого контейнера:

<div class="footer">
  <p>(c) 2025 Компания</p>
</div>

Но с точки зрения семантики и удобства лучше использовать <footer>. Это помогает:

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

Одним словом, если блок действительно выполняет функцию подвала, используйте <footer>. Это не только правильно с точки зрения HTML5, но и делает вёрстку более понятной и чистой.

Как сверстать подвал на HTML

Тег <footer> — парный, то есть состоит из открывающего и закрывающего тегов:

<footer>
  <!-- Содержимое подвала -->
</footer>

Тег <footer> размещается внутри тега <body>, обычно в самом конце документа — сразу после основного контента. Внутри него можно использовать любые блочные и строчные элементы: заголовки, списки, ссылки, абзацы, изображения и другие теги.

Вот пример простого подвала с текстом:

<footer>
  <p>(c) 2025 Компания «ВЕКТОР». Все права защищены.</p>
</footer>

Как оформить <footer> с помощью CSS

Когда вы пишете HTML-код, все элементы сначала выглядят просто как чёрный текст на белом фоне. Чтобы подвал был заметным и аккуратным, его нужно оформить с помощью CSS — это специальный язык, который управляет внешним видом страницы.

Вот как это сделать шаг за шагом.

Шаг 1. Создайте проект

Создайте на компьютере папку с проектом. Внутри неё создайте два текстовых файла:

index.html — основной файл страницы;
styles.css — файл со стилями.

Откройте файл index.html в любом текстовом редакторе (например, в VS Code или Notepad++) и вставьте базовую структуру HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Мой сайт</title>
</head>
<body>

  <!-- Основное содержимое страницы -->
  <h1>Добро пожаловать на сайт</h1>
  <p>Здесь будет какой-то контент.</p>

  <!-- Подвал страницы -->
  <footer>
    <p>(c) 2025 Компания «Пример». Все права защищены.</p>
  </footer>

</body>
</html>

Шаг 2. Добавьте класс к подвалу

В своём HTML-файле найдите тег <footer> и добавьте ему атрибут class. Это ярлык, по которому мы будем применять стили.

<footer class="site-footer">
  <p>(c) 2025 Компания «Пример». Все права защищены.</p>
</footer>

Здесь .site-footer — это имя класса. Вы можете назвать его как угодно, главное — использовать это же имя в CSS.

Шаг 3. Подключите CSS-файл к HTML

В HTML-документе найдите тег <head> и добавьте туда под тегом <title> вот такую строчку:

<link rel="stylesheet" href="styles.css">

Это нужно, чтобы браузер понял: внешний вид страницы описан в файле style.css.

Шаг 4. Пропишите стили в style.css

Откройте файл styles.css и добавьте в него следующие строки:

.site-footer {
  background-color: #f0f0f0;  /* Светлый фон */
  padding: 20px;              /* Отступы вокруг текста */
  text-align: center;         /* Выравнивание по центру */
  font-size: 14px;            /* Размер шрифта */
  color: #333;                /* Тёмно-серый текст */
}

Шаг 5. Посмотрите результат

Сохраните оба файла. Откройте HTML-файл в браузере. Подвал должен быть светлым, с отступами и аккуратным текстом.

*Скриншот: Google Chrome / Skillbox Media*

Если что-то не сработало, убедитесь:

что имя класса (site-footer) совпадает в HTML и CSS;
файл styles.css лежит в той же папке, что и HTML-файл;
вы сохранили оба файла перед открытием в браузере.

Адаптивный подвал

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

Допустим, в подвале есть два блока:

список ссылок;
контакты (телефон и email).

На широком экране они будут расположены рядом, а на узком — один под другим

HTML-код

<footer class="site-footer">
    <div class="footer-container">
      <!-- Меню со ссылками -->
      <nav>
        <ul class="footer-nav">
          <li><a href="#">О нас</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>

      <!-- Блок с контактами -->
      <ul class="footer-contacts">
        <li><a href="tel:+71234567890">Телефон: +7 (123) 456-78-90</a></li>
        <li><a href="mailto:info@company.ru">Email: info@company.ru</a></li>
      </ul>
    </div>
  </footer>

Что здесь важно:

<nav> — тег, который обозначает меню со ссылками, чтобы браузер понимал, что это навигация.
Класс site-footer нужен для стилизации всего подвала.
Контактные данные — элементы списка <li>.
Телефон оформлен через tel:, чтобы можно было звонить с мобильных.
Email оформлен через mailto:, чтобы по клику открывалось почтовое приложение.

Теперь напишем стили с поддержкой адаптивности:

.site-footer {
  background-color: #f0f0f0; /* Светло-серый фон подвала */
  padding: 20px 0;          /* Отступ сверху и снизу */
}

.footer-container {
  display: flex;                  /* Flex-контейнер для горизонтального расположения */

  align-items: center;            /* Выравниваем блоки по вертикали */
  flex-wrap: wrap;                /* Позволяем блокам переноситься при нехватке места */
  gap: 20px;                      /* Промежуток между блоками */
  max-width: 1200px;              /* Ограничиваем максимальную ширину контейнера */
  margin: 0 auto;                 /* Центрируем контейнер в пределах подвала */
  padding: 0 20px;                /* Горизонтальные отступы на десктопе */
}

.footer-nav,
.footer-contacts {
  margin: 0; /* Убираем лишние вертикальные отступы */
}

.footer-nav li,
.footer-contacts li {
  list-style: none;    /* Убираем маркеры списка */
  margin-bottom: 5px;  /* Отступ между пунктами списка */
}

.footer-nav a,
.footer-contacts a {
  text-decoration: none; /* Убираем подчёркивание у ссылок */
  color: #333;           /* Цвет текста ссылок */
}

Добавим медиазапрос — специальное CSS-правило, которое применяется только при определённой ширине экрана. Для этого в конец файла style.css добавим вот этот текст:

@media (max-width: 600px) {
  .footer-container {
    flex-direction: column; /* На мобильных блоки идут вертикально */
    align-items: flex-start;/* Выравниваем по левому краю */
    text-align: left;       /* Выравниваем текст по левому краю */
    gap: 10px;              /* Меньший промежуток между блоками */
    padding: 0 0px;        /* Меньше горизонтальные отступы слева и справа */
  }

  .footer-nav,
  .footer-contacts {
    margin: 10px 0; /* Вертикальные отступы между блоками на мобильных */
  }
}

Теперь, если ширина окна браузера 600 пикселей или меньше, подвал перестраивается. Вместо горизонтальной вёрстки (row) включается вертикальная (column).

Версия для больших экранов:

Версия для мобильных:

Фиксированный подвал

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

Это полезно, например, если вы хотите, чтобы контактная информация или кнопка были всегда на виду.

Как сделать фиксированный подвал

Для этого используют CSS-свойства position: fixed и bottom: 0.

Возьмём наш подвал из предыдущих разделов и пропишем ему класс fixed-footer:

<footer class="fixed-footer">
  <p>(c) 2025 Компания «Пример»</p>
</footer>

Теперь добавим вот этот код в файл style.css:

.fixed-footer {
  position: fixed;           /* Фиксируем подвал */
  bottom: 0;                 /* Прижимаем к нижнему краю */
  left: 0;
  width: 100%;               /* На всю ширину экрана */
  background-color: #f0f0f0;
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
}

Если подвал фиксированный, остальной контент может оказаться под ним. Чтобы избежать этого, добавьте отступ снизу у <body> или у основного контейнера:

body {
  padding-bottom: 60px;  /* Высота подвала + запас */
}

Частые ошибки

При работе с тегом <footer> сложно ошибиться, он очень прост. Но можно допустить ошибки, которые встречаются при работе со всеми HTML-тегами вообще. Вот самые распространённые:

1. Подвал вне <body>

Некоторые новички по ошибке вставляют <footer> вне тега <body>. Это нарушает структуру документа и может привести к ошибкам в отображении.

Ошибка:

</body>
<footer>...</footer>
</html>

Правильно:

<footer>...</footer>
</body>
</html>

Всё содержимое страницы должно быть внутри <body> — и подвал тоже.

2. Слишком много подвалов на странице

В HTML5 можно использовать несколько <footer>, но не нужно вставлять его в каждый блок без причины. Тег <footer> должен завершать смысловой раздел, а не просто быть «нижним прямоугольником».

Вместо лишнего <footer> можно использовать <div> с нужным классом для оформления.

3. Незакрытые теги

Не забывайте о том, что <footer> — парный тег и ему нужна закрывающая часть </footer>.

<footer>
  <ul>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
<footer> <!-- Забыли слэш в </footer> -->

4. Неправильная вложенность

Нельзя закрывать теги не в том порядке, в котором они были открыты:

<footer>
  <p>Email: info@company.ru</footer>
</p>

Правильно:

<footer>
<p>Email: info@company.ru</p>
</footer>

Полезные советы

Проверяйте свой код в валидаторе

Например, есть сайт validator.w3.org. Он подскажет, если вы забыли закрыть тег или допустили другую ошибку.

Не перегружайте подвал

Размещайте только действительно важную информацию. Лучше оставить 3–4 ключевых блока (контакты, меню, соцсети, копирайт), чем превращать подвал в свалку ссылок и логотипов.