Исполняемые доки HTML: Тег footer

Q: Как прижать подвал к низу страницы?

Сделайте body flex-колонкой высотой не меньше окна (display: flex; flex-direction: column; min-height: 100vh;) и задайте значение flex: 1. Тогда основная область растет, заполняя пустое место, и на коротких страницах отталкивает подвал вниз.

Q: Как написать знак копирайта в HTML?

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

Q: Может ли на странице быть несколько footer?

Да. У каждого или может быть свой подвал со сведениями об авторе или тегами. Ориентиром contentinfo для программ чтения с экрана считается только footer, который не находится внутри article, aside, main, nav или section.

Тег footer в HTML: подвал сайта, примеры и раскладка

Элемент <footer> завершает страницу или раздел: копирайт, контакты, ссылки, сведения об авторе. Разберем, как сделать подвал сайта со столбцами ссылок, как прижать его к низу короткой страницы и как работают подвалы внутри статей.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

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

Поместите завершающее содержимое страницы в элемент <footer>, обычно последним в <body>. Как и у <header>, стилей по умолчанию у него нет; подвалом его делает CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© выводит символ ©. <small> отмечает строку с копирайтом как мелкий шрифт оговорок, и в HTML это именно смысл, а не просто уменьшенный шрифт. Списки ссылок это настоящие списки <ul>, поэтому большинство программ чтения с экрана объявляют, сколько ссылок в каждом столбце.

Подвал внизу страницы

На странице с малым количеством содержимого подвал стоит сразу под ним, а ниже остается пустое место. Решение: flex-колонка, где контейнер не ниже окна, а основная область забирает всю оставшуюся высоту. Серый блок ниже изображает окно браузера:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Уберите flex: 1 у main, и подвал подпрыгнет вверх под абзац. На настоящей странице задайте те же правила <body> с min-height: 100vh (и margin: 0) вместо фиксированной высоты, чтобы на коротких страницах подвал стоял внизу, а на длинных после содержимого.

Подвалы внутри статей

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Ориентиром contentinfo программы чтения с экрана считают только подвал уровня страницы. Подвал внутри статьи это обычная группа, поэтому он не конкурирует с подвалом сайта.

Контакты через address

Для контактной информации о странице или ее владельце используйте <address> внутри подвала. Он предназначен только для контактов (а не для любого почтового адреса в тексте), и браузеры по умолчанию показывают его курсивом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

Перенос строки внутри адреса один из удачных случаев использования <br>. Подробнее о ссылках на почту читайте на странице mailto.

Подвал может содержать ссылки, списки, формы (подписку на рассылку), картинки и <nav>. Он не может содержать <header>, другой <footer> или <main>. Второе меню в подвале может быть <nav> с подписью, которая отличает его от главного:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

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

<footer> вне <body>. Все видимое находится внутри <body>, включая подвал.
position: fixed, чтобы удержать подвал внизу. Фиксированный подвал закрывает содержимое на маленьких экранах и требует отступов повсюду. Используйте прием с flex-колонкой.
<address> для любого адреса. Он нужен для контактов автора страницы или статьи. Адрес магазина в списке точек это обычный <p>.
Столбцы ссылок из тегов <br>. Используйте списки <ul>, чтобы структура объявлялась.
Прошлый год, вписанный вручную. Обновляйте год копирайта в шаблоне или выводите его с сервера или на этапе сборки.

Часто задаваемые вопросы

Что такое тег footer в HTML?

<footer> это семантический элемент для завершающего содержимого страницы или раздела: копирайта, контактов, связанных ссылок или сведений об авторе. Это блок без стилей по умолчанию.

Что должно быть в подвале сайта?

Обычно в подвале есть уведомление об авторских правах, ссылки на юридические страницы вроде политики конфиденциальности и условий, контакты, ссылки на соцсети и короткая карта сайта. Главную навигацию держите также в <nav> вверху, ведь не каждый посетитель прокручивает страницу до конца.

Как прижать подвал к низу страницы?

Сделайте body flex-колонкой высотой не меньше окна (display: flex; flex-direction: column; min-height: 100vh;) и задайте <main> значение flex: 1. Тогда основная область растет, заполняя пустое место, и на коротких страницах отталкивает подвал вниз.

Как написать знак копирайта в HTML?

Используйте сущность ©, она показывает ©. Можно и ввести символ напрямую, если у страницы есть <meta charset="utf-8">. Если обернуть строку в <small>, она будет отмечена как мелкий шрифт юридических оговорок.

Может ли на странице быть несколько footer?

Да. У каждого <article> или <section> может быть свой подвал со сведениями об авторе или тегами. Ориентиром contentinfo для программ чтения с экрана считается только footer, который не находится внутри article, aside, main, nav или section.

Связанные концепции