`<footer>` Элемент footer в HTML

Базовая поддержка Широко доступно

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

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

Попробуйте

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #45a1ff;
  color: white;
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

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

Доступность

До выпуска Safari 13 роль contentinfo ориентира некорректно предоставлялась программой VoiceOver. Если необходимо поддерживать устаревшие браузеры Safari, добавьте role="contentinfo" к элементу footer, чтобы роль ориентира предоставлялась корректно.

Связанный материал: WebKit Bugzilla: 146930 — AX: встроенные элементы HTML (header, footer, main, aside, nav) должны работать так же, как ориентиры ARIA, но иногда это не так

Примеры

<body>
  <h3>FIFA World Cup top goalscorers</h3>
  <ol>
    <li>Miroslav Klose, 16</li>
    <li>Ronaldo Nazário, 15</li>
    <li>Gerd Müller, 14</li>
  </ol>

  <footer>
    <small>
      Copyright © 2023 Football History Archives. All Rights Reserved.
    </small>
  </footer>
</body>

footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: black;
}

Техническая сводка

Категории содержимого	Потоковое содержимое, ощутимое содержимое.
Допустимое содержимое	Потоковое содержимое, но без потомков `<footer>` или `<header>`.
Опускание тегов	Не допускается: обязательны и открывающий, и закрывающий теги.
Допустимые родители	Любой элемент, допускающий потоковое содержимое. Обратите внимание, что элемент `<footer>` не должен быть потомком элемента `<address>`, `<header>` или другого элемента `<footer>`.
Неявная роль ARIA	contentinfo или generic, если элемент является потомком элемента article, aside, main, nav или section либо элемента с ролью `article`, `complementary`, `main`, `navigation` или `region`
Допустимые роли ARIA	`group`, `presentation` или `none`
Интерфейс DOM	`HTMLElement`

Спецификации

Спецификация
HTML> # the-footer-element>

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari для iOS	Samsung Internet	WebView Android	WebView для iOS
`footer`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4	4.2

См. также

Другие элементы, связанные с разделами: <body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <section>, <address>;
Использование разделов и структуры HTML-документа
ARIA: роль contentinfo

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer

<footer> Элемент footer в HTML