Элемент <footer>
Элемент <footer>
(от англ. footer — нижний колонтитул) представляет собой нижний колонтитул сайта или раздела веб-страницы. Он относится к своему ближайшему элементу предку секционного содержимого или к элементу <body>
, если такого предка нет.
Вебмастера часто называют нижний колонтитул просто футером или подвалом сайта.
В футере часто размещают:
- информацию об авторских правах;
- контактные данные: адреса электронной почты, номера телефонов, ссылка на контактную форму;
- дополнительную навигацию: ссылки на другие разделы сайта, такие как «О нас», «Политика конфиденциальности», «Условия использования», «часто задаваемые вопросы»и т. д.;
- социальные сети: иконки и ссылки на контакты в социальных сетях;
- любую другую общую для сайта информацию, которая может быть полезна пользователям.
Элемент <footer>
обычно располагают на всех страницах сайта.
Категории | Потоковое содержимое, явное содержимое. |
---|---|
Синтаксис | <footer>...</footer> |
Опускание тегов | Начальный и конечный теги обязательны. |
Модель содержимого | Потоковое содержимое, но не допускаются в качестве потомков элементы <header> , <footer> и <main> . |
Атрибуты
Для элемента <footer>
доступны глобальные атрибуты и события.
Стиль по умолчанию
Стиль по умолчанию для элемента <footer>
, определённый в спецификации HTML:
footer { display: block; }
Пример
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px 0;
}
<body>
<header>
<h1>Добро пожаловать в мой блог!</h1>
</header>
<article>
<h2>Моя первая запись</h2>
<p>Это мой первый пост в блоге. Я рад поделиться
своими мыслями и идеями с вами. Надеюсь,
вам понравится!</p>
<p>Следите за обновлениями, я буду писать
о различных темах, которые меня интересуют.</p>
</article>
<footer>
<p>© 1991 Мой личный блог. Все права защищены.</p>
<p>Контактная информация: example@example.com</p>
<p><a href="#privacy-policy">Политика
конфиденциальности</a> | <a href="#terms-of-service">
Условия использования</a></p>
</footer>
</body>
Результат
Добро пожаловать в мой блог!
Моя первая запись
Это мой первый пост в блоге. Я рад поделиться своими мыслями и идеями с вами. Надеюсь, вам понравится!
Следите за обновлениями, я буду писать о различных темах, которые меня интересуют.