Dokumentacja HTML z przykładami: Znacznik header

Q: Czym różni się head od header w HTML?

to niewidoczna część dokumentu z , znacznikami i linkami do arkuszy stylów, i jest dokładnie jeden. to widoczna treść wewnątrz , a strona może mieć ich kilka.

Q: Czy strona może mieć więcej niż jeden element header?

Tak. Strona zwykle ma jeden nagłówek strony, a każdy lub może mieć własny na tytuł i metadane. Tylko header, który nie jest wewnątrz article, aside, main, nav ani section, jest dla czytników ekranu banerem strony.

Q: Jak sprawić, żeby header został u góry podczas przewijania?

Nadaj mu position: sticky; top: 0; oraz kolor tła i z-index, żeby treść przewijała się pod nim. Sticky działa tylko wtedy, gdy rodzic headera jest od niego wyższy, a przodek z overflow: hidden nie pozwala mu przykleić się do strony.

Jak zrobić nagłówek strony w HTML

Otocz górę strony (logo, nazwę strony, główne menu) elementem <header>. To blok bez domyślnego wyglądu, więc kilka linijek CSS zmienia go w pasek:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto na logo spycha menu i przycisk na drugi koniec paska. Usuń element <style>, a nadal będziesz mieć header: to znacznik czyni go nagłówkiem, a nie ciemne tło.

header a head a h1

Trzy nazwy, które brzmią podobnie, a robią co innego:

Element	Gdzie	Widoczny	Ile
`<head>`	Bezpośrednio w `<html>`, przed `<body>`	Nie: zawiera `<title>`, `<meta>`, `<link>`	Dokładnie jeden
`<header>`	Wewnątrz `<body>`	Tak: treść wprowadzająca strony lub sekcji	Dowolnie wiele
Od `<h1>` do `<h6>`	Gdziekolwiek w `<body>`	Tak: nagłówek tekstowy	Dowolnie wiele

<head> poniżej ustawia tytuł strony, który przeglądarka pokazuje na karcie. Wszystko, co widać w podglądzie, pochodzi z <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Header często zawiera nagłówek tekstowy, ale nie musi, a nagłówek tekstowy nie potrzebuje wokół siebie headera.

Header w artykułach

<header> wprowadza najbliższy artykuł lub sekcję, nie tylko stronę. Lista wpisów na blogu, w której każdy wpis ma własny header, jest poprawna i popularna:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Dla czytników ekranu tylko header na poziomie strony (taki, który nie jest wewnątrz article, aside, main, nav ani section) staje się punktem orientacyjnym banner. Headery artykułów to zwykłe grupy, więc nie powstaje kilka banerów.

position: sticky trzyma header u góry, podczas gdy treść pod nim się przewija. Przewiń zawartość pudełka poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Działa to dzięki trzem szczegółom: top: 0 (bez przesunięcia sticky nic nie robi), kolor tła (inaczej wiersze prześwitują) i z-index, żeby pozycjonowana treść nie malowała się na nim. Na prawdziwej stronie przewijanym pudełkiem jest sama strona, więc header stoi bezpośrednio w <body>.

Header z position: fixed też zostaje na miejscu, ale wypada z przepływu strony, więc treść wsuwa się pod niego i potrzebuje paddingu u góry. Sticky zachowuje swoje miejsce w układzie.

Co może się znaleźć w headerze

Header może zawierać prawie każdą treść: nagłówki, obrazek z logo, <nav>, formularz wyszukiwania, przycisk. Nie może zawierać innego <header> ani <footer> i nie może znajdować się w <footer>, <address> ani innym <header>.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Gdy logo jest linkiem do strony głównej, jego tekst alt powinien mówić, dokąd prowadzi link ("Acme home"), bo to właśnie ogłasza czytnik ekranu.

Częste błędy

Mylenie <header> z <head>. Metadane trafiają do <head>; widoczna treść nigdy.
<header> przy każdym nagłówku tekstowym. Sam nagłówek nie potrzebuje opakowania w header. Używaj <header>, gdy jest grupa treści wprowadzającej.
Przyklejony header bez tła. Przewijany tekst strony prześwituje przez niego. Ustaw background.
Sticky, który się nie przykleja. Przodek z overflow: hidden lub overflow: auto staje się pudełkiem przewijania dla sticky, więc header przykleja się w tym pudełku (albo wcale). Sprawdź przodków.
Menu strony w <div> wewnątrz headera. Użyj <nav>, żeby użytkownicy czytników ekranu mogli do niego przeskoczyć.

Najczęściej zadawane pytania

Czym jest znacznik header w HTML?

<header> to element semantyczny na treść wprowadzającą: logo strony i menu u góry albo tytuł i podpis autora na początku artykułu. To zwykły blok bez domyślnego stylu.

Czym różni się head od header w HTML?

<head> to niewidoczna część dokumentu z <title>, znacznikami <meta> i linkami do arkuszy stylów, i jest dokładnie jeden. <header> to widoczna treść wewnątrz <body>, a strona może mieć ich kilka.

Czy strona może mieć więcej niż jeden element header?

Tak. Strona zwykle ma jeden nagłówek strony, a każdy <article> lub <section> może mieć własny <header> na tytuł i metadane. Tylko header, który nie jest wewnątrz article, aside, main, nav ani section, jest dla czytników ekranu banerem strony.

Czy nav powinien być wewnątrz header?

Może i często jest, gdy główne menu znajduje się u góry strony. Umieszczenie <nav> poza <header> też jest poprawne; wybierz to, co pasuje do twojego układu.

Jak sprawić, żeby header został u góry podczas przewijania?

Nadaj mu position: sticky; top: 0; oraz kolor tła i z-index, żeby treść przewijała się pod nim. Sticky działa tylko wtedy, gdy rodzic headera jest od niego wyższy, a przodek z overflow: hidden nie pozwala mu przykleić się do strony.

Powiązane zagadnienia