Nagłówek i stopka (<header>, <footer>)

Lekcja 9.2: Nagłówek i stopka (<header>, <footer>)

Strona główna > Rozdział 9: Elementy semantyczne > Nagłówek i stopka (<header>, <footer>)

Definiowanie nagłówków: element <header>

Element <header> służy do definiowania nagłówka dla dokumentu lub sekcji. Nie jest to to samo co element <head>, który zawiera metadane strony.

<header> zazwyczaj zawiera:

Elementy wprowadzające lub nawigacyjne.
Logo lub ikonę strony.
Tytuł strony lub sekcji (znaczniki <h1> - <h6>).
Informacje o autorze (jeśli to nagłówek artykułu).
Główną nawigację strony (często wewnątrz znacznika <nav> umieszczonego w <header>).
Pole wyszukiwania.

Ważne jest, że element <header> może występować wielokrotnie na jednej stronie. Możemy mieć główny nagłówek dla całej strony (zazwyczaj na górze, bezpośrednio w <body>) oraz oddzielne nagłówki dla poszczególnych elementów <article> lub <section>.

Przykład głównego nagłówka strony:

<body>
  <header>
    <img src="logo.png" alt="Logo Firmy">
    <h1>Nazwa Strony</h1>
    <nav>
      <ul>
        <li><a href="/">Start</a></li>
        <li><a href="/produkty">Produkty</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
      </ul>
    </nav>
    <form action="/search">
      <input type="search" name="q" placeholder="Szukaj...">
      <button type="submit">Szukaj</button>
    </form>
  </header>
  
  <main>
    <!-- Główna treść strony -->
  </main>
  
  <!-- ... -->
</body>

Przykład nagłówka artykułu:

<article>
  <header>
    <h2>Niesamowity Tytuł Artykułu</h2>
    <p>Autor: Jan Kowalski</p>
    <p>Opublikowano: <time datetime="2025-04-29">29 kwietnia 2025</time></p>
  </header>
  
  <p>Treść artykułu zaczyna się tutaj...</p>
  
  <!-- ... reszta artykułu ... -->
</article>

Użycie <header> wewnątrz <article> jasno wskazuje, że te elementy stanowią wprowadzenie lub metadane dla tego konkretnego artykułu.

Definiowanie stopek: element <footer>

Element <footer> definiuje stopkę dla dokumentu lub sekcji. Podobnie jak <header>, może występować wielokrotnie na stronie.

<footer> zazwyczaj zawiera:

Informacje o autorstwie.
Dane kontaktowe.
Informacje o prawach autorskich (copyright).
Linki do powiązanych dokumentów (np. polityka prywatności, regulamin).
Mapę strony.
Czasem dodatkową, mniej ważną nawigację.

Przykład głównej stopki strony:

<body>
  <!-- ... header i main ... -->
  
  <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">Polityka prywatności</a></li>
          <li><a href="/mapa-strony">Mapa strony</a></li>
        </ul>
      </section>
      <section>
        <h4>Kontakt</h4>
        <address>
          Nazwa Firmy<br>
          ul. Przykładowa 1, 00-001 Warszawa<br>
          Email: <a href="mailto:info@example.com">info@example.com</a>
        </address>
      </section>
    </div>
    <p class="copyright">© 2025 Nazwa Firmy. Wszelkie prawa zastrzeżone.</p>
  </footer>
</body>

Uwaga: W powyższym przykładzie użyto również znacznika <address>, który semantycznie służy do oznaczania informacji kontaktowych.

Przykład stopki artykułu:

<article>
  <!-- ... header i treść artykułu ... -->
  
  <footer>
    <p>Kategoria: <a href="/kategoria/webdev">Web Development</a></p>
    <p>Tagi: html5, semantyka, css</p>
    <p><a href="#comments">Przejdź do komentarzy</a></p>
  </footer>
</article>

Stopka artykułu może zawierać informacje specyficzne dla tego artykułu, takie jak kategorie, tagi, linki do powiązanych treści lub sekcji komentarzy.

Podsumowanie

Używanie <header> i <footer> zamiast generycznych <div id="header"> czy <div class="footer"> znacząco poprawia semantykę dokumentu HTML. Pomaga to zarówno programistom, jak i maszynom (wyszukiwarkom, czytnikom ekranu) lepiej zrozumieć strukturę i przeznaczenie poszczególnych części strony.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz szkielet HTML dla strony produktu. Użyj głównego <header> dla logo i nawigacji, <main> dla treści produktu, a wewnątrz <main> użyj <article> do opisania produktu. Wewnątrz <article> dodaj <header> z nazwą produktu i <footer> z linkiem "Dodaj do koszyka". Na końcu strony dodaj główny <footer> z informacją o prawach autorskich.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Strona Produktu</title>
    <style>
        body { font-family: sans-serif; }
        header, footer { background-color: #f0f0f0; padding: 10px; margin-bottom: 15px; }
        nav ul { list-style: none; padding: 0; }
        nav li { display: inline; margin-right: 10px; }
        main { border: 1px solid #ccc; padding: 15px; }
        article header h2 { margin-top: 0; }
        article footer { margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 10px; }
        .copyright { text-align: center; font-size: 0.9em; margin-top: 20px; }
    </style>
</head>
<body>

    <header> <!-- Główny nagłówek strony -->
        <img src="logo-sklepu.png" alt="Logo Sklepu" height="40">
        <nav>
            <ul>
                <li><a href="/">Strona główna</a></li>
                <li><a href="/kategorie">Kategorie</a></li>
                <li><a href="/koszyk">Koszyk</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article> <!-- Opis produktu -->
            <header> <!-- Nagłówek produktu -->
                <h2>Niesamowity Produkt XYZ</h2>
                <p>Numer katalogowy: XYZ-123</p>
            </header>
            
            <img src="produkt.jpg" alt="Zdjęcie produktu XYZ" width="300">
            <p>Szczegółowy opis produktu XYZ. Jest to najlepszy produkt na rynku...</p>
            <p>Cena: 99.99 PLN</p>
            
            <footer> <!-- Stopka produktu -->
                <button type="button">Dodaj do koszyka</button>
                <a href="/produkty-podobne">Zobacz podobne produkty</a>
            </footer>
        </article>
    </main>

    <footer> <!-- Główna stopka strony -->
        <p class="copyright">© 2025 Mój Sklep Internetowy. Wszelkie prawa zastrzeżone.</p>
    </footer>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

W głównym nagłówku strony dodaj pole wyszukiwania wewnątrz <header>.
W głównej stopce strony dodaj linki do polityki prywatności i regulaminu.
W stopce artykułu (produktu) dodaj informacje o dostępności produktu.

Najczęściej zadawane pytania

Do czego służy znacznik <header>?

Znacznik <header> definiuje nagłówek dla dokumentu lub sekcji (np. artykułu). Zwykle zawiera tytuły, logo, nawigację, informacje wprowadzające.

Do czego służy znacznik <footer>?

Znacznik <footer> definiuje stopkę dla dokumentu lub sekcji. Zwykle zawiera informacje o autorze, prawa autorskie, dane kontaktowe, linki do powiązanych dokumentów.

Czy <header> i <footer> mogą występować wielokrotnie na stronie?

Tak, zarówno <header>, jak i <footer> mogą być używane wielokrotnie. Można mieć główny nagłówek/stopkę strony oraz oddzielne nagłówki/stopki dla elementów <article> lub <section>.

Czy <header> musi być na górze, a <footer> na dole?

Semantycznie tak jest najczęściej, ale technicznie HTML i CSS pozwalają umieścić je w dowolnym miejscu. Jednak dla zachowania logiki i dostępności, powinny znajdować się odpowiednio na początku i końcu swojego kontenera (body, article, section).

Co powinno znaleźć się w głównym <header> strony?

Zazwyczaj logo, nazwa strony (h1), główna nawigacja (<nav>), czasem pole wyszukiwania lub przyciski logowania/rejestracji. Jest to wizytówka strony.