Stopka strony internetowej – co to jest footer w HTML?

Element <footer> w HTML to semantyczny znacznik HTML5 definiujący stopkę strony lub konkretnej sekcji. Footer zamyka dokument albo jego fragment i gromadzi informacje uzupełniające oraz orientacyjne.

Element <footer> reprezentuje stopkę najbliższego elementu sekcyjnego – takiego jak <article>, <section>, <nav> czy <aside> – lub elementu <body>, gdy brak sekcji nadrzędnej; wtedy dotyczy całego dokumentu. Na jednej stronie może występować wiele elementów <footer>, ponieważ każda sekcja może mieć własną stopkę.

Informacje zawarte w footerze

W stopce warto umieścić następujące informacje uzupełniające i orientacyjne:

dane autora lub autorów treści,
informacje o prawach autorskich (copyright),
dane kontaktowe – adres, numer telefonu, email,
linki do powiązanych dokumentów i artykułów,
politykę prywatności i regulamin serwisu,
mapę strony (sitemap),
dodatkową nawigację o mniejszym znaczeniu,
nazwę i adres firmy,
wskazówki dojazdu.

Sekcja <footer> może także zawierać całe sekcje z załącznikami, indeksami, umowami licencyjnymi czy kolofonami (opisy na zakończenie publikacji).

Element <footer> należy do semantycznych elementów HTML5, które nadają treściom wyraźne znaczenie strukturalne. To oznacza, że kod informuje nie tylko o wyglądzie, ale także o znaczeniu zawartości dla przeglądarek, narzędzi SEO i czytników ekranu.

Użycie <footer> porządkuje strukturę dokumentu, ułatwia zarządzanie informacjami końcowymi i nawigacją oraz poprawia dostępność. Znacznik pełni rolę wskaźnika zakończenia treści – wyznacza koniec artykułu, sekcji lub całej strony, co wspiera semantyczne rozumienie dokumentu.

Warto odróżniać <footer> od <header>: element <footer> jest stopką sekcji lub całej strony (gdy jest w <body>) i sam nie tworzy nowej sekcji, podczas gdy <header> nie jest nagłówkiem sekcji w sensie semantycznym.

Podstawowa struktura

Aby zdefiniować stopkę, użyj elementu <footer> jako kontenera na treści stopki:

<footer>  </footer>

Element <footer> można umieścić bezpośrednio w <body> lub wewnątrz sekcji takich jak <article>, <section> czy <main>.

Przykład – prosta stopka z informacją o prawach autorskich

Poniższy kod przedstawia minimalną, czytelną stopkę z kontaktami i informacją o prawach:

Przykład – stopka z nawigacją

Tak możesz dodać nawigację o niższym priorytecie do stopki:

<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="/polityka-prywatnosci">Polityka prywatności</a></li> </ul> </nav> </footer>

Przykład – rozbudowana stopka strony z wieloma sekcjami

W rozbudowanych stopkach zastosuj logiczny podział na kolumny i sekcje:

<footer> <div class="footer-columns"> <section> <h4>O nas</h4> <p>Krótki opis firmy i jej działalności...</p> </section>


    <section>

      <h4>Szybkie linki</h4>

      <ul>

        <li><a href="/regulamin">Regulamin</a></li>

        <li><a href="/polityka-prywatnosci">Polityka prywatności</a></li>

        <li><a href="/mapa-strony">Mapa strony</a></li>

      </ul>

    </section>
    <section>

      <h4>Dane kontaktowe</h4>

      <address>

        Adres: ul. Przykładowa 123, 00-000 Warszawa<br>

        Email: [email protected]<br>

        Telefon: +48 12 345 67 89

      </address>

    </section>

  </div>

Zawartość footera – zalecenia dla projektantów

Wewnątrz <footer> można umieścić różne elementy, pamiętając o spójności i dostępności:

tekst (<p>),
linki (<a>),
obrazy (<img>),
listy (<ul>, <ol>),
nagłówki (<h1> – <h6>),
sekcje (<section>, <article>),
elementy adresu (<address>).

Wewnątrz <footer> nie wolno zagnieżdżać kolejnych elementów <header> ani <footer>, aby nie zaburzać semantyki dokumentu HTML5.

Praktyczne zastosowania footera na stronach internetowych

Footer to kluczowy element profesjonalnej witryny; w praktyce warto wykorzystać go do:

potwierdzenia wiarygodności – dane kontaktowe i informacje o firmie budują zaufanie użytkownika;
poprawy nawigacji – linki w stopce zapewniają szybki dostęp do ważnych podstron;
zgodności prawnej – eksponowanie praw autorskich, polityki prywatności i regulaminu serwisu;
SEO – dodatkowe linki wewnętrzne porządkują strukturę witryny i wzmacniają semantykę;
dostępności – semantyczny kod ułatwia korzystanie z treści na czytnikach ekranu.