Пошук уроків, статей та іншого контенту
Показує, як оформити завершальну частину сторінки або розділу за допомогою footer.
footer<footer> — семантичний HTML-елемент для завершальної інформації про сторінку або окремий розділ.
У footer часто розміщують:
інформацію про авторські права;
ім’я автора;
контактні дані;
посилання на політику конфіденційності;
додаткову навігацію;
дату публікації або оновлення матеріалу.
Елемент footer може бути:
завершенням усієї вебсторінки;
завершенням окремої статті;
завершенням іншого змістовного розділу.
Найчастіше footer розташовують наприкінці body після основного вмісту сторінки.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Навчальна сторінка</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
color: #222;
}
main {
min-height: 300px;
padding: 32px;
}
footer {
padding: 24px 32px;
background-color: #1f2937;
color: white;
text-align: center;
}
footer a {
color: #93c5fd;
}
</style>
</head>
<body>
<main>
<h1>Моя навчальна сторінка</h1>
<p>Тут розміщено основний вміст сторінки.</p>
</main>
<footer>
<p>© 2026 Навчальна сторінка</p>
<p>
<a href="mailto:hello@example.com">Написати нам</a>
</p>
</footer>
</body>
</html>У цьому прикладі:
main містить основний вміст;
footer містить завершальну інформацію;
CSS додає відступи, колір фону та колір тексту;
mailto: створює посилання для надсилання електронного листа.
footer можна використовувати не лише для всієї сторінки. Наприклад, стаття може мати власний завершальний блок із даними про автора та датою публікації.
<article>
<h1>Що таке HTML</h1>
<p>
HTML описує структуру вебсторінки за допомогою елементів.
</p>
<footer>
<p>Автор: Олена Коваль</p>
<p>Опубліковано: 29 липня 2026 року</p>
</footer>
</article>Такий footer належить саме до цієї статті, а не до всієї сторінки.
Важливо, що в одному документі може бути кілька елементів footer, якщо кожен із них завершує окремий змістовний блок.
footer за допомогою CSSЗовнішній вигляд footer змінюють так само, як і вигляд інших HTML-елементів.
<footer class="site-footer">
<p class="site-footer__copyright">© 2026 Мій сайт</p>
<nav aria-label="Додаткова навігація">
<a href="/about">Про сайт</a>
<a href="/contacts">Контакти</a>
<a href="/privacy">Конфіденційність</a>
</nav>
</footer>
<style>
.site-footer {
padding: 24px;
background-color: #111827;
color: #f9fafb;
}
.site-footer__copyright {
margin: 0 0 12px;
}
.site-footer nav {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.site-footer a {
color: #bfdbfe;
}
.site-footer a:hover {
color: white;
}
</style>Для посилань у footer часто використовують:
display: flex для розташування в ряд;
gap для відстані між посиланнями;
flex-wrap: wrap, щоб посилання переносилися на вузькому екрані;
контрастні кольори для зручного читання.
footer є семантичним елементом, а не спеціальним способом прикріпити блок до нижньої частини вікна браузера.
Його місце визначається HTML-структурою та CSS. Якщо сторінка має мало вмісту, footer може не опинитися внизу екрана без додаткового оформлення макета.
Головне призначення footer — позначити завершальну інформацію, а не просто створити блок унизу сторінки.
Для додаткової навігації всередині footer можна використовувати nav з атрибутом aria-label. Це допомагає користувачам програм екранного доступу зрозуміти призначення навігації.
<footer>
<nav aria-label="Навігація в підвалі сайту">
<a href="/about">Про нас</a>
<a href="/help">Допомога</a>
<a href="/contacts">Контакти</a>
</nav>
</footer>Якщо в footer є лише звичайний текст про авторські права, додаткові ARIA-атрибути не потрібні.
Завершальна частина сторінки може мати такий вигляд:
<body>
<header>
<h1>Назва сайту</h1>
</header>
<main>
<h2>Основний заголовок</h2>
<p>Основний вміст сторінки.</p>
</main>
<footer>
<p>© 2026 Назва сайту</p>
<nav aria-label="Навігація в підвалі сайту">
<a href="/about">Про сайт</a>
<a href="/contacts">Контакти</a>
</nav>
</footer>
</body>Така структура зрозуміло розділяє:
header — вступну частину;
main — основний вміст;
footer — завершальну інформацію.
div замість footerДля завершальної частини сторінки краще використовувати семантичний елемент:
<footer>
<p>© 2026 Мій сайт</p>
</footer>Замість:
<div class="footer">
<p>© 2026 Мій сайт</p>
</div>div не описує призначення вмісту, а footer робить структуру зрозумілішою для браузерів, пошукових систем і допоміжних технологій.
footerfooter призначений для завершальної інформації. Основний текст, заголовки та великі розділи сторінки потрібно розміщувати в main, article або section.
footer без потребиКілька footer допустимі, коли вони завершують різні розділи або статті. Якщо завершальна інформація стосується всієї сторінки, зазвичай достатньо одного footer.
Світло-сірий текст на білому фоні або темно-сірий текст на чорному фоні важко читати. Обирайте кольори з достатнім контрастом.
Створіть сторінку профілю автора:
Додайте header з назвою сторінки.
Додайте main з ім’ям автора та коротким описом.
Додайте footer з роком, ім’ям автора та посиланням на контакти.
Оформіть footer за допомогою CSS.
Переконайтеся, що посилання добре видно на фоні.
<footer> містить завершальну інформацію про сторінку або розділ.
У footer можна розміщувати авторські права, контакти, дату публікації та додаткову навігацію.
Один документ може містити кілька footer, якщо вони належать різним змістовним блокам.
footer є семантичним елементом і не прикріплює блок до нижньої частини екрана автоматично.
Для стилізації footer використовують звичайні CSS-властивості.
Для навігації всередині footer доречно використовувати nav з описовим aria-label.