Aby ustawić stopkę (footer) w HTML, należy wykorzystać semantyczny znacznik <footer>, a następnie zbudować jej zawartość zgodnie z potrzebami serwisu – mogą się w niej znaleźć m.in. dane kontaktowe, odnośniki, logo, ikony mediów społecznościowych czy dodatkowe informacje prawne.
Czym jest footer i dlaczego warto go używać?
Footer to dolna część strony internetowej, powtarzająca się zazwyczaj na każdej podstronie. Pełni rolę informacyjną i nawigacyjną – umieszczamy w niej najważniejsze, stałe informacje oraz linki pomocnicze ułatwiające korzystanie z serwisu.
Zalety stosowania stopki:
- Porządkuje układ strony i zapewnia użytkownikowi szybki dostęp do kluczowych informacji,
- ułatwia utrzymanie spójnego projektu na wielu podstronach,
- poprawia dostępność i użyteczność witryny.
Jak stworzyć podstawową stopkę w HTML?
Minimalna, funkcjonalna stopka wygląda następująco:
<footer> <p>© 2025 Twoja Nazwa Firmy</p> </footer> Wzbogacanie stopki o dodatkowe elementy
Wewnątrz <footer> możesz umieścić dowolne elementy HTML, na przykład:
- Dodatkowy tekst – można dodać np. informacje o twórcy lub zespole;
<footer> <p>Strona stworzona przez Zespół WebDev</p> <p>© 2025 Twoja Nazwa Firmy. Wszelkie prawa zastrzeżone.</p> </footer> - Nawigacja (linki) – ułatwiają szybki dostęp do najważniejszych sekcji serwisu;
<footer> <nav> <ul> <li><a href="/">Strona główna</a></li> <li><a href="/o-nas">O nas</a></li> <li><a href="/kontakt">Kontakt</a></li> <li><a href="/regulamin">Regulamin</a></li> <li><a href="/polityka-prywatnosci">Polityka prywatności</a></li> </ul> </nav> </footer> - Dane kontaktowe i ikony społecznościowe (najczęściej z podziałem na kolumny): pozwalają użytkownikom łatwo znaleźć informacje do kontaktu i śledzić profile społecznościowe;
<footer> <div class="footer-container"> <div class="contact-info"> <h4>Kontakt:</h4> <p>ul. Przykładowa 123<br>00-000 Warszawa<br>tel. 123 456 789<br>e-mail: [email protected]</p> </div> <div class="social-media"> <h4>Znajdź nas:</h4> <a href="#"><img src="facebook.png" alt="Facebook" /></a> <a href="#"><img src="twitter.png" alt="Twitter" /></a> <a href="#"><img src="instagram.png" alt="Instagram" /></a> </div> </div> </footer> - Logo firmy – umieść znak firmowy w stopce, aby wzmocnić rozpoznawalność marki.
<footer> <img src="logo.svg" alt="Logo firmy" style="height:40px;"> <p>© 2025 Twoja Nazwa Firmy</p> </footer> Rozbudowany, wielokolumnowy footer z nawigacją i formularzem
Poniżej kompletny przykład z zastosowaniem struktury <div> do organizacji treści:
<footer> <div class="footer-row"> <div class="footer-col"> <h4>O nas</h4> <p>Jesteśmy firmą z wieloletnim doświadczeniem. Zapraszamy do kontaktu!</p> </div> <div class="footer-col"> <h4>Menu</h4> <ul> <li><a href="/">Start</a></li> <li><a href="/uslugi">Usługi</a></li> <li><a href="/blog">Blog</a></li> </ul> </div> <div class="footer-col"> <h4>Newsletter</h4> <form> <input type="email" placeholder="Twój e-mail"> <button type="submit">Zapisz się</button> </form> </div> </div> <div class="footer-bottom"> <p>© 2025 Twoja Firma. Wszelkie prawa zastrzeżone.</p> </div> </footer> Podstawowe style CSS dla harmonijnego wyglądu
Stosując CSS możesz zadbać o czytelność oraz responsywność stopki (dostosowanie do urządzeń mobilnych):
footer { background: #10182F; color: #fff; padding: 2em 0; font-size: 1rem; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-col { flex: 1 1 200px; margin: 0 1em; } .footer-col h4 { font-size: 1.2em; margin-bottom: 1em; } .footer-bottom { text-align: center; padding: 1em 0 0 0; border-top: 1px solid #333; margin-top: 1em; font-size: 0.9em; } @media (max-width: 700px) { .footer-row { flex-direction: column; gap: 2em; } } Dobre praktyki i wskazówki
- Używaj semantycznego znacznika
<footer>– pomagają one zarówno wyszukiwarkom, jak i technologiom wspomagającym rozpoznawać układ strony; - Stopka może pojawiać się na każdej podstronie – jej kod najczęściej umieszcza się w osobnym pliku i dołącza do szablonu serwisu;
- Elementy obowiązkowe – dane kontaktowe, prawa autorskie, linki do polityki prywatności, odnośniki pomocy, social media;
- Zadbaj o estetykę i przejrzystość – unikaj nadmiaru informacji i dbaj o odpowiednie odstępy między elementami.
Przykładowe zastosowania
- Firmowa strona www – zawiera dane rejestracyjne firmy, szybkie linki do podstron i polityki prywatności;
- Sklep internetowy – zwraca uwagę na bezpieczeństwo zakupów i zawiera skróty do najważniejszych informacji dla klienta;
- Blog – obejmuje sekcję „O autorze”, archiwum i newsletter.
Dobrze zaprojektowana stopka jest nie tylko funkcjonalna, ale także atrakcyjna wizualnie i wspiera wiarygodność twojej witryny. Po wdrożeniu powyższych wskazówek, każda stopka w HTML będzie czytelna i przyjazna dla użytkowników.
