PorównaniePorównania

<header> vs <head>

<head> to niewidoczna sekcja z metadanymi strony, jedna na dokument. <header> to widoczny element wprowadzający, którego może być wiele na stronie.

Na tej stronie

Porównanie w tabeli
Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Dobre praktyki
Powiązane hasła

Porównanie w tabeli

Widoczny na stronie
<header>
Tak, to widoczna treść
<head>
Nie, to metadane
Liczba na dokument albo stronę
<header>
Może być wiele: dla strony i dla artykułów
<head>
Dokładnie jeden, w całym dokumencie
Miejsce w dokumencie
<header>
Wewnątrz <body>, na początku strony lub sekcji
<head>
Pierwsze dziecko <html>, przed <body>
Typowa zawartość
<header>
Logo, nawigacja, tytuł, data publikacji
<head>
<title>, <meta>, <link>, <style>, <script>
Rola dla technologii asystujących
<header>
Punkt orientacyjny "banner" (na poziomie strony)
<head>
Brak, niewidoczne dla użytkownika

Cecha	<header>	<head>
Widoczny na stronie	Tak, to widoczna treść	Nie, to metadane
Liczba na dokument albo stronę	Może być wiele: dla strony i dla artykułów	Dokładnie jeden, w całym dokumencie
Miejsce w dokumencie	Wewnątrz `<body>`, na początku strony lub sekcji	Pierwsze dziecko `<html>`, przed `<body>`
Typowa zawartość	Logo, nawigacja, tytuł, data publikacji	`<title>`, `<meta>`, `<link>`, `<style>`, `<script>`
Rola dla technologii asystujących	Punkt orientacyjny "banner" (na poziomie strony)	Brak, niewidoczne dla użytkownika

Przykład

HTML

<head>
  <meta charset="utf-8">
  <title>Kurs HTML</title>
</head>

Definicja i zastosowanie

<head> przechowuje metadane dokumentu: <title>, <meta>, <link>, <style> i <script>. Nic z tego nie wyświetla się bezpośrednio na stronie. Jest pierwszym dzieckiem <html>, zawsze przed <body>, i w dokumencie jest dokładnie jeden.

<header> to widoczny, renderowany element: na poziomie całej strony to zwykle logo, nazwa serwisu i główna nawigacja, a wewnątrz <article> czy <section> tytuł, data publikacji albo autor. Stron może mieć wiele elementów <header>, po jednym dla każdej sekcji.

Zasada jest prosta: wszystko, czego przeglądarka potrzebuje, zanim zacznie wyświetlać stronę (tytuł karty, kodowanie, arkusze stylów), trafia do <head>. Wszystko, co widzi odwiedzający na początku strony albo sekcji, trafia do <header>. Podobne nazwy to jedyny powód, dla którego łatwo je pomylić.

Składnia

<head>
  <title>...</title>
</head>
<header>
  ...
</header>

Więcej przykładów

Header widoczny na początku strony

HTML

<header>
  <a href="/">CodeWorlds</a>
  <nav aria-label="Główna"><a href="/kursy">Kursy</a></nav>
</header>

Podgląd

Kilka header, ale tylko jeden head

HTML

<article>
  <header>
    <h2>Flexbox w 10 minut</h2>
  </header>
  <p>Flexbox układa elementy w jednym wymiarze.</p>
</article>

Podgląd

Dobre praktyki

<head> i <header> brzmią podobnie, ale to różne elementy: jeden jest niewidoczny, drugi widoczny.
W dokumencie jest dokładnie jeden <head>, ale <header> może wystąpić wielokrotnie: dla strony i dla każdego artykułu.
Metadane, takie jak tytuł karty czy opis dla wyszukiwarek, zawsze trafiają do <head>, nigdy do <header>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs