Aby ustawić stopkę (footer) w HTML, należy skorzystać z semantycznego znacznika <footer>, który jednoznacznie oznacza dolną sekcję strony internetowej. Stopka może służyć prezentacji informacji prawnych, danych kontaktowych, linków czy ikon mediów społecznościowych. Poniżej znajdziesz szczegółowy poradnik, przykłady kodu oraz najlepsze praktyki – idealne dla początkujących i zaawansowanych.
Podstawowy znacznik HTML
Podstawowa struktura stopki HTML prezentuje się następująco:
<footer> <p>Copyright © 2025 Twoja Firma</p> </footer> Znacznik <footer> informuje przeglądarkę oraz roboty Google, że umieszczona w nim treść to stopka strony. To korzystne z punktu widzenia SEO oraz dostępności dla użytkowników.
Rozbudowany układ stopki
Za pomocą dodatkowych znaczników i klas CSS możesz urozmaicić stopkę o linki, dane kontaktowe, ikony social media czy logotyp:
<footer>
<div class="footer-container">
<div class="footer-section contact-info">
<h3>Kontakt</h3>
<p>ul. Przykładowa 10, 00-000 Warszawa</p>
<p>tel.: 111-222-333</p>
<p>e-mail: [email protected]</p>
</div>
<div class="footer-section navigation">
<h3>Nawigacja</h3>
<nav>
<a href="/o-nas">O nas</a>
<a href="/regulamin">Regulamin</a>
<a href="/polityka-prywatnosci">Polityka prywatności</a>
</nav>
</div>
<div class="footer-section social-media">
<h3>Znajdź nas</h3>
<a href="#"><img src="fb-icon.svg" alt="Facebook"></a>
<a href="#"><img src="ig-icon.svg" alt="Instagram"></a>
</div>
</div>
<div class="footer-bottom">
<p>Copyright © 2025 Twoja Firma</p>
</div>
</footer> Stopka może być zorganizowana w sekcje – każda sekcja to odrębny blok tematyczny, np. kontakt, nawigacja, social media.
Stopka z linkiem
Aby dodać linki (np. do regulaminu lub polityki prywatności), umieść je wewnątrz stopki:
<footer>
<p>© 2025 Twoja Firma</p>
<a href="/polityka-prywatnosci">Polityka prywatności</a>
<a href="/regulamin">Regulamin</a>
</footer> To podstawowa metoda, która dobrze sprawdza się na dowolnej stronie.
Użycie CSS – stylizacja stopki
Stopkę należy wyróżnić wizualnie – najprostszy CSS może wyglądać tak:
footer {
background-color: #222;
color: #fff;
text-align: center;
padding: 30px 0;
}
.footer-container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.footer-section {
flex: 1 1 200px;
margin: 0 20px;
}
.footer-bottom {
margin-top: 30px;
font-size: 0.9em;
color: #bbb;
}
a {
color: #ddd;
text-decoration: none;
}
a:hover {
color: #fff;
}
Warto pamiętać o responsywności (dostosowaniu stopki do urządzeń mobilnych).
Przykład – stopka w całym układzie strony
Poniżej przykład pełnej strony z nagłówkiem, menu i stopką:
<body>
<header>
<h1>Nagłówek</h1>
</header>
<nav>
<a href="/">Strona główna</a>
<a href="/kontakt">Kontakt</a>
</nav>
<main>
<section>
<h2>Sekcja 1</h2>
<p>Treść sekcji...</p>
</section>
</main>
<footer>
<p>Stopka strony z informacją o prawach autorskich i linkami.</p>
</footer>
</body> Możliwy jest również podział na kilka stopek – np. w artykułach lub sekcjach, każda może mieć własny <footer>.
Zaawansowany przykład – stopka przyklejona do dołu ekranu
Często stosowanym motywem jest stopka zawsze widoczna na dole strony (tzw. sticky/fixed footer):
.footer-fixed {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #222;
color: #fff;
text-align: center;
padding: 15px 0;
}
<footer class="footer-fixed">
<p>© 2025 Twoja Firma. Wszelkie prawa zastrzeżone.</p>
</footer> To rozwiązanie jest przydatne na stronach z krótką treścią, gdy chcesz, by stopka była zawsze widoczna.
Co powinna zawierać dobra stopka?
W praktyce, profesjonalna stopka powinna zawierać:
- informacje o prawach autorskich (copyright),
- linki do polityki prywatności, regulaminu,
- dane kontaktowe (adres, e-mail, telefon),
- linki do mediów społecznościowych,
- dodatkowe elementy: logo firmy, szybkie linki nawigacyjne, informacje o realizacji strony lub wdrożeniu certyfikatów.
Umieszczenie tych informacji w stopce zwiększa wiarygodność strony i ułatwia kontakt z użytkownikiem.
Podsumowanie – znacznik <footer> pozwala tworzyć nowoczesne, czytelne i dobrze zorganizowane stopki stron internetowych. Poprawnie zaprojektowana stopka to nie tylko estetyka, lecz także profesjonalizm i wygoda użytkowania.
