W3docs
ru
Войти

Тег HTML <footer>

The <footer> tag defines the footer of a website or a section. Tag description, attributes and examples.

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

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

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

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

success

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

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

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

Синтаксис

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

Тег 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>
Попробуйте сами »

Результат

пример тега footer

Атрибуты

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

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

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

Практика

Практика

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