Тег <footer>
Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Подвал сайта
Браузеры
Internet Explorer до версии 8.0 включительно игнорирует тег <footer> , но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER .
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
The markup
As long as you have content and a footer you are good, you can apply the styling to the body if you want. Or the #app div. Where ever you like.
The styling
Do not use absolute. Use flex. Its 2020.
Do not support browsers like IE9. Its bad for developers.
If you want your content to fill the available space, which will have the same effect, you can use flex instead of margin auto
CodeSandbox demo and code available: here
<footer>
<footer> создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.
Пример
Скопировать ссылку «Пример» Скопировано
В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:
Как понять
Скопировать ссылку «Как понять» Скопировано
Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.
В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
<footer> может быть не только у всего сайта целиком, но и у отдельного блока или секции.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег <footer> парный, должен всегда закрываться < / footer> .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� У <footer> блочные стили по умолчанию ��
�� Нельзя вкладывать в <address> , <header> или другой <footer> .
�� Контакты и информацию об авторе стоит поместить в контейнер <address> , а его добавить в <footer> .
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� У <footer> особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer> , чтобы поисковик понял, что находится в этом блоке.
Читайте также
position
Скринридеры
Что такое скринридеры, как они устроены и работают, почему для них важна семантическая вёрстка и как их тестировать.
Как сделать текст внизу страницы html
Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.
В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).
В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.
Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.
Синтаксис
Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.
Простой footer у веб-сайта
На этом уроке сделаем простой футер для веб-сайта. Для красоты верх футера украсим волной.
HTML разметка
Обычно в футере сайта ставятся иконки ведущие на социальные сети и основные пункты меню навигации.
Стилизация меню и социальных иконок
Далее зададим стили для тегов в HTML-разметке.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
body
footer
footer .wave
.social,
.menu
.social li,
.menu li
.social li a
.menu li a
.menu li a:hover
footer p
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
<footer>
<footer> создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.
Пример
Скопировать ссылку «Пример» Скопировано
В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:
Как понять
Скопировать ссылку «Как понять» Скопировано
Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.
В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
<footer> может быть не только у всего сайта целиком, но и у отдельного блока или секции.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег <footer> парный, должен всегда закрываться < / footer> .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Нельзя вкладывать в <address> , <header> или другой <footer> .
�� Контакты и информацию об авторе стоит поместить в контейнер <address> , а его добавить в <footer> .
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� У <footer> особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer> , чтобы поисковик понял, что находится в этом блоке.
Читайте также
position
Скринридеры
Что такое скринридеры, как они устроены и работают, почему для них важна семантическая вёрстка и как их тестировать.
The markup
As long as you have content and a footer you are good, you can apply the styling to the body if you want. Or the #app div. Where ever you like.
The styling
Do not use absolute. Use flex. Its 2020.
Do not support browsers like IE9. Its bad for developers.
If you want your content to fill the available space, which will have the same effect, you can use flex instead of margin auto
CodeSandbox demo and code available: here