Как добавить подвал сайта. Тег <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>
.
Актуальность
Тег <footer>
является актуальным, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023