W3docs
ru
Войти

HTML тег <footer>

Тег <footer> определяет подвал страницы или секции. Описание тега, атрибуты и примеры.

Тег <footer> определяет подвал веб-страницы или элементов <section>, <article> и других секционных элементов. Подвал обычно содержит информацию об авторских правах и авторстве, контактные данные, навигационные ссылки, связанные документы или ссылку «наверх».

На этой странице рассматривается назначение <footer>, его связь с ориентирами доступности, причины использования вместо обычного <div>, а также размещение подвалов на уровне страницы и статьи на одной странице.

<footer> — один из семантических элементов HTML5.

Типичный <footer> может содержать:

  • информацию об авторских правах, авторстве и контактные данные
  • связанные документы
  • карту сайта
  • ссылки «наверх»
Совет

Если подвал содержит контактные данные, оберните их в тег <address>.

Визуально <footer> и <div class="footer"> отображаются одинаково — оба являются блочными элементами без особых стилей по умолчанию. Разница заключается в смысле, и этот смысл даёт реальные преимущества:

  • Доступность. Когда <footer> является прямым дочерним элементом <body>, браузеры предоставляют его как ориентир contentinfo ARIA. Пользователи программ экранного чтения могут перейти к нему с помощью ярлыка ориентира, а вспомогательные технологии объявляют «информация о контенте», сообщая о переходе в новую область. <div> не даёт ничего подобного.
  • SEO и машиночитаемость. Поисковые системы и инструменты режима чтения используют семантические области для понимания структуры страницы. <footer> чётко обозначает дополнительные метаданные на уровне страницы или секции.
  • Структура документа и удобство сопровождения. Семантические теги делают разметку самодокументируемой, что позволяет следующему разработчику (или вам самим спустя несколько месяцев) понять структуру с первого взгляда.

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

Ориентир contentinfo

Роль ARIA, которую получает <footer>, зависит от места его расположения:

  • <footer>, являющийся прямым дочерним элементом <body>, становится ориентиром contentinfo — подвалом всей страницы. Такой подвал на уровне страницы должен быть только один.
  • <footer>, вложенный внутрь <article>, <section>, <aside>, <nav> или <main>, не является ориентиром — он не имеет роли contentinfo. Он просто обозначает подвал данного фрагмента контента, и таких подвалов может быть столько, сколько секций.

Именно поэтому можно безопасно добавить подвал к каждой статье на странице, не запутав вспомогательные технологии: только верхнеуровневый подвал является contentinfo страницы.

Синтаксис

Тег <footer> используется парами. Содержимое записывается между открывающим (<footer>) и закрывающим (</footer>) тегами.

Приведённый ниже подвал является прямым дочерним элементом <body>, поэтому он выступает ориентиром contentinfo страницы.

HTML тег <footer>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>
Попробуйте сами »

Подвалы внутри <article> и подвал страницы вместе

На одной странице можно разместить несколько элементов <footer>. Распространённый паттерн — один подвал для каждого <article> (с указанием автора, даты или тегов статьи) плюс единый подвал страницы в нижней части. Подвалы статей не являются ориентирами; только подвал на уровне <body> является contentinfo.

<!DOCTYPE html>
<html>
  <body>
    <main>
      <article>
        <h2>First post</h2>
        <p>Some article content...</p>
        <footer>
          <p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
        </footer>
      </article>

      <article>
        <h2>Second post</h2>
        <p>More article content...</p>
        <footer>
          <p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
        </footer>
      </article>
    </main>

    <!-- Page-level footer: this one is the contentinfo landmark -->
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

См. также связанные секционные элементы: <header>, <main>, <section> и <article>.

Ограничения вложенности

<footer> не может содержать другой <footer> или <header> в качестве потомка. Следующая разметка недопустима:

<!-- Invalid: a footer nested inside a footer -->
<footer>
  <p>Site footer</p>
  <footer>
    <p>This nested footer is not allowed.</p>
  </footer>
</footer>

Если вам нужен подвал для подсекции, выделите её в отдельный секционный элемент (например, <article> или <section>) и поместите подвал внутрь него.

Атрибуты

Тег <footer> поддерживает глобальные атрибуты и атрибуты событий.

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

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Практика

Практика
Когда HTML-элемент footer становится ориентиром ARIA contentinfo?
Когда HTML-элемент footer становится ориентиром ARIA contentinfo?
Was this page helpful?