Как добавить подвал сайта. Тег <footer>

25 января 2023

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

Синтаксис тега <footer>

<footer>
  <p>© HTML Academy, 2023. Все права защищены.</p>
</footer>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

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

Подвал с меню и контактной информацией:

<footer>
  <nav>
    <ul>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">Правила</a></li>
    </ul>
  </nav>
  <p>Телефон: +7 (123) 456-78-90</p>
  <p>Email: info@htmlacademy.ru</p>
</footer>

Подвал со ссылками на социальные сети:

<footer>
  <p>Подписывайтесь на нас в социальных сетях:</p>
  <ul>
    <li><a href="#">Вконтакте</a></li>
    <li><a href="#">Телеграм</a></li>
  </ul>
</footer>

Для чего использовать тег <footer>

Разместить копирайт и авторские права.
Отобразить контактную информацию.
Разместить дополнительное меню навигации.
Добавить ссылки на социальные сети.
Показать ссылки на политику конфиденциальности и пользовательское соглашение.
Разместить логотип и ссылку на главную страницу.
Отобразить информацию о партнёрах и спонсорах.

Атрибуты тега <footer>

id — уникальный идентификатор элемента.
class — определяет имя класса, которое позволяет связать тег со стилевым оформлением.

Глобальные атрибуты

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

Ограничения

Тег должен находиться внутри контейнера <body>.
На странице может быть только один тег <footer>.

Нюансы

В теге <footer> допустимо использовать другие элементы, например, <p>, <a> или <span>.
Вместо <footer> рекомендуется использовать тег <address> для указания контактной информации, а также ссылки на связанные документы.

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

Тег <footer> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

<div> — можно использовать для создания контейнера, который содержит информацию, характерную для тега <footer>.
<section> — можно использовать для группировки связанных элементов на странице. Внутри <section> можно использовать тег <header> для заголовка и тег <footer> для нижнего колонтитула.

Чем заменить тег

Если нужно создать колонтитул для элемента, можете использовать тег <div> или <section>.
Если нужно указать контактную информацию автора или ссылки на связанные документы, можете использовать тег <address>.