<header>
Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu bez elementów
<header>i<footer>
Przykład
#<header>
<a href="/">CodeWorlds</a>
<nav aria-label="Główna">
<a href="/kursy">Kursy</a> ·
<a href="/dokumentacja">Dokumentacja</a> ·
<a href="/kolekcje">Kolekcje</a>
</nav>
</header>Definicja i zastosowanie
#Element <header> zawiera treści wprowadzające. Na poziomie całej strony to zwykle logo, nazwa serwisu i główna nawigacja. Wewnątrz <article> czy <section> to tytuł, data publikacji, autor albo krótki lead.
Na jednej stronie może być wiele elementów <header>, po jednym dla każdej sekcji czy artykułu. Nie może jednak znaleźć się wewnątrz <footer>, <address> ani innego <header>.
Nagłówek strony umieszczony bezpośrednio w <body> jest rozpoznawany przez technologie asystujące jako punkt orientacyjny „banner”. Ten sam element zagnieżdżony w artykule już tej roli nie pełni.
Składnia
#<header>
…
</header>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<article>
<header>
<h2>Flexbox w 10 minut</h2>
<p>Autor: Marta Nowak · <time datetime="2026-05-02">2 maja 2026</time></p>
</header>
<p>Flexbox układa elementy w jednym wymiarze: w wierszu albo w kolumnie.</p>
</article>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
header {
display: block;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#<header>to nie to samo co<head>. Ten drugi zawiera metadane i nie wyświetla się na stronie.- Sam nagłówek nie wystarcza jako tytuł sekcji. W środku nadal potrzebujesz
<h1>–<h6>.
Powiązane hasła
#- <footer>Stopka strony lub sekcji: autor, prawa autorskie, linki, dane kontaktowe.
- <nav>Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
- <main>Główna, unikalna treść strony. Na stronie jest tylko jeden widoczny.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
Widzisz błąd albo brakuje przykładu? Napisz do nas.