Тег <footer> размечает завершающую часть - подвал сайта внизу страницы или подвал отдельной статьи с автором и датой. Тег парный, собственных атрибутов у него нет, только глобальные.
В этой статье
Для чего нужен тег footer в HTML
Подвал есть почти у каждого сайта: там копирайт, контакты, ссылки на политику конфиденциальности и разделы, которым не нашлось места в основном меню. Тег <footer> и обозначает эту часть.
Оформления он не добавляет - тёмная полоса, колонки и отступы делаются в CSS. Сообщает он другое: содержимое внутри служебное. Поисковый робот учитывает такие блоки с меньшим весом, чем основной текст, а скринридер предлагает подвал как отдельный ориентир, к которому можно перейти напрямую.
<body>
<header>...</header>
<main>...</main>
<footer>
<p>© 2026 Мой сайт</p>
</footer>
</body>Пример: как выглядит подвал сайта
Что размещают в подвале
Строгого списка спецификация не задаёт, но набор сложился одинаковый почти у всех сайтов: копирайт, контакты, ссылки на юридические документы, иногда дублирующее меню разделов и кнопки соцсетей.
Одна деталь стоит отдельного внимания. Контакты внутри подвала принято оборачивать тегом <address> - он обозначает именно контактные данные того, кто отвечает за страницу или раздел.
<footer>
<nav aria-label="Разделы в подвале">
<ul>...</ul>
</nav>
<address>
<a href="mailto:info@example.com">info@example.com</a>
</address>
<p>© 2026 Мой сайт</p>
</footer>Меню в подвале, если оно там действительно есть, размечается тегом nav с собственным названием через aria-label - иначе скринридер не отличит его от меню в шапке. Но оборачивать в <nav> вообще все ссылки подвала не нужно: сборная солянка из политики, оферты и соцсетей навигацией по сайту не является.
Чего в подвале быть не должно, тоже стоит назвать. Во-первых, основного содержимого: всё, ради чего открыли страницу, находится в main. Во-вторых, внутрь <footer> нельзя прописывать ни другой <footer>, ни header. И в-третьих, подвал легко превращается в свалку ссылок - это не ошибка разметки, но пользы посетителю от сотни ссылок мелким шрифтом никакой.
header и footer: что симметрично, а что нет
Эти два тега почти всегда упоминают парой, и не зря: устроены они зеркально. Но зеркальность не полная, и различия чаще всего и путают.
| Признак | <header> |
<footer> |
|---|---|---|
| Что обозначает | Вводную часть страницы или раздела | Завершающую часть страницы или раздела |
| Типичное содержимое | Логотип, название сайта, меню, поиск | Копирайт, контакты, ссылки на документы |
| Заголовок внутри | Обычный случай, часто именно там находится <h1> |
Как правило не нужен |
| Роль ориентира | banner | contentinfo |
| Вложенность друг в друга | Запрещена в обе стороны: ни <header> внутри <footer>, ни <footer> внутри <header> |
|
Симметрично у них и то, что в таблицу не поместилось: оба парные, у обоих нет собственных атрибутов, оба могут быть и у страницы целиком, и у отдельной статьи, и оба теряют роль ориентира при вложенности. Последнее - тема следующего раздела.
Подвал статьи и роль contentinfo
Второе применение тега - подвал отдельной статьи или карточки: автор, дата, теги, кнопка "Купить" в товаре. Такой <footer> прописывается прямо внутри article, и на одной странице их может быть сколько угодно.
<article>
<h2>Как выбрать первый ноутбук</h2>
<p>Текст статьи...</p>
<footer>
<address>Автор: Анна Петрова</address>
<p><time datetime="2026-03-14">14 марта 2026</time></p>
</footer>
</article>А вот тут кроется различие, о котором почти не пишут. Роль ориентира contentinfo получает только тот <footer>, который является прямым потомком <body>. Стоит прописать его внутри <article>, <aside>, <main>, <nav> или <section> - и роль становится generic, то есть подвал статьи для скринридера ничем не отличается от обычной обёртки.
Любопытно, что соседний тег aside ведёт себя иначе: внутри <main> он свою роль сохраняет, а <footer> теряет. Общее правило всей группы сведено в таблицу на его странице.
Отсюда же и устаревший совет, который до сих пор встречается в русских справочниках: дописывать role="contentinfo" вручную, потому что VoiceOver не объявляет подвал. Ошибка действительно была, но исправлена ещё в Safari 13 - сегодня дописывать роль не нужно. Для вложенного подвала она всё равно не появится, а у подвала страницы она и так есть.
Частые ошибки
Ошибки с подвалом редко ломают страницу визуально - чаще они просто обесценивают разметку, и заметить это можно только валидатором или скринридером.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Внутри <footer> прописан <header> или другой <footer> |
Валидатор W3C выдаёт ошибку, структура документа перестаёт быть корректной | Заменить внутренний тег на <div> или на заголовок нужного уровня |
| В подвал вынесена часть основного текста | Поисковый робот считает этот кусок служебным и учитывает с меньшим весом | Вернуть содержимое в <main>, в подвале оставить служебное |
Все ссылки подвала обёрнуты в один <nav> |
Политика, оферта и соцсети попадают в навигационный ориентир, хотя навигацией не являются | Оставить в <nav> только дублирующее меню разделов |
| Контакты набраны обычным текстом | Теряется смысл: программа не понимает, что это контактные данные | Обернуть их тегом <address> |
