skip to main content

<footer>

html

Кратко 🔗

<footer> создаёт нижнюю часть страницы — «подвал». Обычно здесь находятся выходные данные, контакты и ссылки на разделы сайта.

Пример 🔗

Добавим простой футер с копирайтом и контактами:

<footer>
<p>Copyright Ольга Данилюк</p>
<p>Почта: <a href="mailto:someone@yandex.ru"> someone@yandex.ru</a>.</p>
</footer>

Как это понять 🔗

У каждого сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы, которые обычно выглядят одинаково на всём сайте. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.

В «подвале» мы чаще всего видим название компании, много ссылок на основные разделы, правовую информацию, ссылки на соцсети и другие контакты.

Как пишется 🔗

Тег <footer>...</footer> всегда закрывается.

Атрибуты 🔗

Здесь применяются универсальные атрибуты.

Подсказки 🔗

💡 Программа чтения с экрана на маках может не читать то, что написано в <footer>. Чтобы исправить это, добавь атрибут role="contentinfo" в <footer>.

💡 Контакты и информацию об авторе стоит поместить в контейнер <address>, а его добавить в <footer>.

В работе 🔗

Владимир 👨‍🔧

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


Автор: Владимир 👨‍🔧