Co to jest `footer` w HTML?

Footer (czyli stopka) w HTML to semantyczny element służący do oznaczania sekcji znajdującej się na samym dole strony internetowej. Element <footer> zamyka główną treść strony lub sekcji i przechowuje najważniejsze informacje uzupełniające, orientacyjne oraz nawigacyjne, np. dane kontaktowe, linki do dokumentów czy informacje prawne.

Czym jest <footer> w HTML?

Element <footer> jest jednym z kluczowych znaczników HTML5 odpowiadających za strukturalne i semantyczne uporządkowanie kodu strony. Oznacza stopkę zarówno całej strony, jak i poszczególnych sekcji (np. artykułu czy rozdziału).

Można umieścić kilka <footer> na jednej stronie – każdy z nich odpowiada wtedy za inną sekcję (na przykład cały dokument i pojedynczy artykuł).

Najważniejsze zastosowania footera

W stopce umieszcza się najczęściej:

• Dane kontaktowe (np. adres firmy, e-mail, numer telefonu);
• Informacje o autorach lub właścicielu witryny;
• Linki nawigacyjne do ważnych stron: polityka prywatności, regulamin, o nas, kontakt;
• Ikony mediów społecznościowych;
• Zastrzeżenia prawne (np. prawa autorskie, numer identyfikacji podatkowej);
• Oznaczenia partnerów, sponsorów czy certyfikatów;
• Dodatkowe menu nawigacyjne (tzw. sitemap).

Odpowiednio zaprojektowany footer zwiększa funkcjonalność serwisu, ułatwia użytkownikowi znalezienie kluczowych informacji i poruszanie się po witrynie.

Przykład podstawowego kodu footera w HTML

<footer> 
  <div class="footer-container"> 
    <div class="footer-info"> 
      <p>&copy; 2025 Firma XYZ. Wszelkie prawa zastrzeżone.</p> 
      <p>Adres: ul. Przykładowa 12, 00-000 Miasto</p> 
      <p>Kontakt: [email protected]</p> 
    </div> 
    <nav class="footer-nav"> 
      <a href="/o-nas">O nas</a> 
      <a href="/regulamin">Regulamin</a> 
      <a href="/polityka-prywatnosci">Polityka prywatności</a> 
    </nav> 
    <div class="footer-social"> 
      <a href="#"><img src="fb-icon.svg" alt="Facebook"></a> 
      <a href="#"><img src="ig-icon.svg" alt="Instagram"></a> 
    </div> 
  </div> 
</footer>

Powyższy kod dzieli stopkę na sekcje: informacje o firmie, menu nawigacyjne oraz media społecznościowe.

Footer a SEO i UX

Footer odgrywa istotną rolę w optymalizacji SEO – zawarte w nim linki wewnętrzne wspierają indeksowanie podstron przez wyszukiwarki oraz ułatwiają użytkownikowi znalezienie ważnych treści. Warto jednak zachować umiar – zbyt rozbudowana i przeładowana informacjami stopka może obniżyć użyteczność i czytelność strony.

Zaawansowane przykłady zastosowania footera

Footer wykorzystany w artykule

<article> 
  <h2>Newsy branżowe</h2> 
  <p>...</p> 
  <footer> Źródło: Magazyn Branżowy, 2025 </footer> 
</article>

Footer z dynamiczną datą

<footer> 
  <p>&copy; <span id="current-year"></span> Twoja Firma. Wszelkie prawa zastrzeżone.</p> 
</footer> 
<script> document.getElementById('current-year').textContent = new Date().getFullYear(); </script>

Footer dzielony na kilka sekcji

<footer> 
  <section> 
    <h3>Dla klientów</h3> 
    <ul> 
      <li><a href="/faq">FAQ</a></li> 
      <li><a href="/zwroty">Zwroty</a></li> 
    </ul> 
  </section> 
  <section> 
    <h3>Serwis</h3> 
    <ul> 
      <li><a href="/kariera">Kariera</a></li> 
      <li><a href="/kontakt">Kontakt</a></li> 
    </ul> 
  </section> 
</footer>

Dobre praktyki przy tworzeniu HTML footera

• Stosuj znaczniki semantyczne – użycie <footer>, <nav>, <section>, <address> poprawia strukturę dokumentu i utrzymuje zgodność z dobrymi standardami;
• Zadbaj o czytelność – unikaj przeładowania stopki zbyt wieloma linkami i informacjami;
• Responsywność – zadbaj o to, aby footer był czytelny na urządzeniach mobilnych;
• Integracja z identyfikacją wizualną – dopasuj styl stopki do ogólnej estetyki strony.

Footer to nie tylko miejsce na formalności – to ważny element strony, który wspiera zarówno użytkownika, jak i działania marketingowe oraz SEO. Przemyślana stopka podnosi profesjonalizm serwisu, buduje wiarygodność i realnie zwiększa komfort korzystania z witryny.