Кратко
Секция статьи "Кратко"<footer>
создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.
Пример
Секция статьи "Пример"В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:
<article> <h1>Бигфут</h1> <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p> <footer> <p>Ольга Сасквоч</p> <p>Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.</p> </footer></article>
<article> <h1>Бигфут</h1> <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p> <footer> <p>Ольга Сасквоч</p> <p>Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.</p> </footer> </article>
Как это понять
Секция статьи "Как это понять"Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.
В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
<footer>
может быть не только у всего сайта целиком, но и у отдельного блока или секции.
Как пишется
Секция статьи "Как пишется"Тег <footer>
парный, должен всегда закрываться <
.
Атрибуты
Секция статьи "Атрибуты"Применяются все глобальные атрибуты.
Подсказки
Секция статьи "Подсказки"💡 У <footer>
блочные стили по умолчанию 🤓
💡 Нельзя вкладывать в <address>
, <header>
или другой <footer>
.
💡 Контакты и информацию об авторе стоит поместить в контейнер <address>
, а его добавить в <footer>
.
На практике
Секция статьи "На практике"🛠 У <footer>
особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer>
, чтобы поисковик понял, что находится в этом блоке.