Тег HTML `<footer>`

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

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

Тег может содержать другие элементы HTML, но не может содержать другой тег <footer> или <header>, если они являются потомками одного и того же секционного контента.

<footer> является одним из элементов HTML5.

TIP

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

Элемент <footer> может содержать следующее:

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

Синтаксис

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

Пример использования тега HTML `<footer>`:

Тег HTML <footer>

html

<!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>

Try it Yourself »

Результат

пример тега footer

Атрибуты

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

Как стилизовать тег HTML <footer>

css

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

Практика

В чем функция тега HTML <footer> и где он размещается на веб-странице?

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

Тег HTML <footer> ​

Синтаксис ​

Пример использования тега HTML <footer>: ​

Результат ​