Poznaj Programowanie

Tagi HTML: footer

Piotr Grochal 7 min. czytania

Element <footer> w HTML5 to kluczowy tag semantyczny, który definiuje stopkę dla dokumentu lub konkretnej sekcji strony. Służy głównie do umieszczania informacji takich jak prawa autorskie, dane kontaktowe, linki do powiązanych treści czy dodatkowe nawigacje. Dzięki niemu struktura strony staje się czytelniejsza dla przeglądarek, wyszukiwarek i czytników ekranu, co poprawia SEO i dostępność.

Tag <footer> wprowadzono w HTML5 jako element semantyczny, zastępując nieprecyzyjne <div> z klasą „footer”. Reprezentuje stopkę sekcji lub całej strony, gdzie przechowuje się metadane powiązane z treścią nadrzędną. Może zawierać:

  • informacje o autorze (np. z użyciem <address>),
  • prawa autorskie (copyright),
  • dane kontaktowe,
  • linki do regulaminu, polityki prywatności czy mapy strony,
  • nawigację drugorzędną,
  • ikony mediów społecznościowych lub załączniki.

Według specyfikacji HTML5, <footer> akceptuje treść ogólną i wyczuwalną, ale nie może zawierać elementów <header> ani innego <footer> jako potomnych. Znaczniki otwierający i zamykający są obowiązkowe. Element nadrzędny to zazwyczaj <body>, <section>, <article>, <aside> lub <nav>. Interfejs DOM to HTMLElement.

Ważne: <footer> nie tworzy nowej sekcji sam w sobie — jest częścią istniejącej sekcji i skupia się na informacjach końcowych.

Stopka zazwyczaj ląduje na końcu <body>, po <main>. Oto prosty przykład pełnej struktury HTML z <footer>:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mój przykładowy serwis</title>
</head>
<body>
<header>
<!-- Nagłówek strony -->
</header>
<main>
<!-- Główna treść strony -->
</main>
<footer>
<p>© 2023 Mój przykładowy serwis. Wszelkie prawa zastrzeżone.</p>
<p>Kontakt: [email protected]</p>
</footer>
</body>
</html>

W tym kodzie <footer> zawiera podstawowe informacje prawne i kontaktowe.

Tag <footer> jest elastyczny — pomieści tekst, linki, listy, obrazy czy ikony. Oto praktyczne przykłady:

Podstawowa wersja z akapitem <p>:

<footer>
<p>Stopka strony internetowej</p>
</footer>

2. Nawigacja w stopce (z <nav>, <ul>, <li>)

Wariant idealny do szybkich linków, np. regulaminu czy polityki prywatności:

<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>
</ul>
</nav>
</footer>

3. Media społecznościowe z ikonami (np. z Font Awesome)

Lista pozioma z linkami do mediów społecznościowych:

<footer>
<ul class="social-media">
<li><a href="https://www.facebook.com/example"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.twitter.com/example"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/example"><i class="fab fa-instagram"></i></a></li>
</ul>
</footer>

4. Stopka sekcji (np. w artykule <article>)

Tutaj <footer> odnosi się do konkretnej sekcji, np. artykułu:

<article>
<h2>Tytuł artykułu</h2>
<p>Treść artykułu...</p>
<footer>
<p>Autor: Jan Kowalski</p>
<p>Kategoria: <a href="/webdev">Web Development</a></p>
<p><a href="#comments">Przejdź do komentarzy</a></p>
</footer>
</article>

5. Zaawansowana stopka z kolumnami (multi-sekcyjna)

Struktura z wieloma sekcjami dla dużych serwisów:

<footer>
<div class="footer-columns">
<section>
<h4>O nas</h4>
<p>Krótki opis firmy...</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>
</ul>
</section>
</div>
</footer>

Aby stopka wyglądała profesjonalnie, dodaj klasy i przemyślane style CSS. Oto kompletny przykład z responsywnym designem:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Strona ze stopką</title>
<style>
body { font-family: sans-serif; margin: 0; }
footer { background-color: #333; color: white; padding: 20px; text-align: center; }
.mojaStopka { background-color: #f8f9fa; padding: 20px; text-align: center; }
footer p { color: #888; margin: 0 0 10px; }
footer a { color: #333; text-decoration: none; }
.social-media li { display: inline-block; margin: 0 10px; }
@media (max-width: 600px) {
footer { padding: 10px; font-size: 14px; }
}
</style>
</head>
<body>
<!-- Treść strony -->
<footer class="mojaStopka">
<p>Copyright © 2023 Twoja Firma. Wszelkie prawa zastrzeżone.</p>
<a href="polityka-prywatnosci.html">Polityka prywatności</a> | <a href="kontakt.html">Kontakt</a>
</footer>
</body>
</html>

Najważniejsze wskazówki stylizacyjne:

  • kolor tła (background-color) i padding dla wyraźnego wyróżnienia sekcji,
  • wyśrodkowanie zawartości za pomocą text-align: center,
  • media queries dla responsywności na urządzeniach mobilnych.

Najlepsze praktyki i częste błędy

Stosuj poniższe zasady, aby zachować wysoką jakość semantyki i dostępności:

  • Umieszczaj na końcu <body> – dla głównej stopki strony, a w razie potrzeby używaj osobnych stopek wewnątrz sekcji, np. w <article>;
  • Unikaj nadużywania – jedna globalna stopka w dokumencie w zupełności wystarczy; dodatkowe stosuj tylko, gdy opisują konkretną sekcję;
  • Stawiaj na semantykę – używaj <footer> zamiast <div class="footer"> dla lepszego SEO i czytelności kodu;
  • Dbaj o dostępność – utrzymuj poprawny atrybut lang="pl", stosuj czytelny kontrast i alternatywne opisy obrazów (alt);
  • Unikaj typowych błędów – nie umieszczaj głównej treści w stopce i nie zapominaj o mobilnej responsywności.

Przykład pełnej strony z semantyczną strukturą (header, nav, main, footer):

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pełna struktura</title>
<style>
/* Style jak wyżej */
</style>
</head>
<body>
<header><h1>Nazwa strony</h1></header>
<nav><ul><li><a href="/">Start</a></li></ul></nav>
<main>
<article><h2>Artykuł</h2><p>Treść...</p></article>
</main>
<footer><!-- Stopka jak wyżej --></footer>
</body>
</html>