Ostatnio edytowany:

header

Autor: Virtual Patriot

Przeznaczenie elementu header

Element header reprezentuje zawartość, którą powinna być treść wstępu do treści reprezentowanej przez zawartość pierwszego w kolejności elementu przodka danego elementu header, który to element przodek należy do kategorii sekcja zawartości lub do kategorii korzeń sekcji. Zawartością elementu header może być: nagłówek zawartości, elementy HTML tworzące nawigację pomiędzy częściami sekcji zawartości oraz każda inna treść, którą uznamy za wspomnianą treść wstępu.

Dodatkowe techniczne informacje o elemencie header

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<article>
  <header>
    <h1>Mój ulubiony owoc</h1>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </header>

  <p>
    Moim ulubionym owocem jest czereśnia.
  </p>
</article>

Kontekstem zewnętrznym przykładowego elementu "header" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "header".

kontekst wewnętrzny
zawartość opływająca, lecz nie następujące elementy HTML jako elementy potomkowie: header, footer, main

Przykładowy Kod HTML

<article>
  <header>
    <h1>Mój ulubiony owoc</h1>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </header>

  <p>
    Moim ulubionym owocem jest czereśnia.
  </p>
</article>

Kontekstem wewnętrznym przykładowego elementu "header" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które nie są zakazanym kontekstem wewnętrznym elementu "header", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h1" oraz element "img", jest prawidłowym kontekstem wewnętrznym dla elementu "header".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<header> ... </header>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu header

header {
  display:block;
}

Interpretacja elementu header

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .