Footer

Element <footer> w HTML5 jest używany do definiowania stopki na stronie internetowej lub na końcu sekcji. Wprowadzony jako część HTML5, <footer> pomaga twórcom stron w semantycznym rozgraniczaniu treści, zwiększając tym samym czytelność i dostępność strony. Może zawierać informacje o autorze, prawa autorskie, linki do polityki prywatności, dane kontaktowe, sekcje z linkami i wiele innych elementów, które są typowo umieszczane na końcu strony. Użycie <footer> nie tylko ułatwia organizację treści, ale również wspiera praktyki SEO poprzez semantyczne znaczniki, które pomagają robotom wyszukiwarek lepiej zrozumieć strukturę strony.

Przykład kodu

Poniższy przykład demonstruje prostą strukturę HTML z wykorzystaniem elementu <footer>, który zawiera podstawowe informacje takie jak prawa autorskie, linki do mediów społecznościowych oraz formularz kontaktowy. Użyjemy również CSS do prostego formatowania i JavaScript do dodania interaktywnej funkcji, np. wyświetlenia bieżącego roku w sekcji praw autorskich.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania elementu footer w HTML5</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1;
            padding: 20px;
        }
        footer {
            background-color: #f2f2f2;
            padding: 20px;
            text-align: center;
        }
        .social-links a {
            margin: 0 10px;
        }
    </style>
</head>
<body>

<div class="content">
    <!-- Treść strony -->
    <h2>Witaj na naszej stronie!</h2>
    <p>Tutaj znajdziesz wiele interesujących informacji.</p>
</div>

<footer>
    <!-- Stopka z informacjami o prawach autorskich, linkami do mediów
         społecznościowych i formularzem kontaktowym -->
    <p>© <span id="year"></span> Twoja Strona. Wszelkie prawa zastrzeżone.</p>
    <div class="social-links">
        <!-- Linki do mediów społecznościowych -->
        <a href="#">Facebook</a> | <a href="#">Twitter</a> | <a href="#">Instagram</a>
    </div>
    <p>Email: <a href="mailto:kontakt@twojastrona.pl">kontakt@twojastrona.pl</a></p>
</footer>

<script>
    // Skrypt JavaScript ustawiający bieżący rok
    const currentYear = new Date().getFullYear();
    document.getElementById('year').textContent = currentYear;
</script>

</body>
</html>

W tym przykładzie:

  • Użyliśmy <footer> do semantycznego oznaczenia stopki strony, co ułatwia rozumienie struktury strony przez przeglądarki i roboty indeksujące.
  • CSS służy do prostej stylizacji stopki, w tym ustawienia koloru tła, paddingu oraz wyśrodkowania tekstu.
  • JavaScript dodaje dynamiczny element do strony, automatycznie aktualizując rok w prawach autorskich.

Podsumowanie

Element <footer> w HTML5 jest potężnym narzędziem do organizacji i semantycznego oznaczania informacji na końcu stron lub sekcji. Pozwala na lepszą strukturyzację dokumentów HTML, co przekłada się na lepszą dostępność, czytelność oraz optymalizację pod kątem wyszukiwarek.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top