HTML тег <footer>

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

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

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

Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.

Если в нижнем колонтитуле содержится контактная информация, то ее необходимо размещать в теге <address>.

Синтаксис

Элемент <footer> парный, закрывающий тег (</footer>) для него обязателен.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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">Заголовок / Меню</div>
    <div class="main-content">
      <h1>Основной контент</h1>
      <p>Это какой-то параграф. </p>
    </div>
    <footer>
      <p>Компания © W3docs. Все права защищены.</p>
    </footer>
  </body>
</html>

Результат

Атрибуты

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

Поддержка браузера

6+ 9+ 4+ 5+ 11.1+




Похожие статьи