Sémantický element

<header>

Úvodní část stránky nebo jejího oddílu. Obvykle v ní je logo, název a navigace.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Párový tag pro úvodní obsah

Do header patří to, čím stránka začíná. Začneme logem, tedy odkazem na úvodní stránku.

Nepleťte si <header> s <head>. Hlavička head je neviditelná část dokumentu s titulkem a metadaty. header je viditelná část stránky.

Zápis

Logo a navigace

Vedle loga v hlavičce obvykle bývá hlavní menu. To je element nav se seznamem odkazů.

Hlavička může obsahovat i vyhledávání, přepínač jazyka nebo nadpis h1.

Zápis

Hlaviček může být víc

header nemusí být jen jednou na stránce. Vlastní hlavičku může mít i článek, například s nadpisem a datem.

header ale nesmí být uvnitř footer ani jiného header.

Atributy

Třída pro hlavičku webu

header má jen globální atributy. Protože jsou teď na stránce dvě hlavičky, odlišíme tu hlavní třídou class.

Selektor header by v CSS zasáhl obě hlavičky. Selektor .site-header zasáhne jen tu hlavní.

Styl

Hlavička od kraje ke kraji

Prohlížeč dává elementu body výchozí margin. Ten zrušíme, aby hlavička sahala přes celou šířku. Padding pak dáme hlavičce a obsahu.

Styl

Logo vlevo, menu vpravo

Flexbox rozdělí hlavičku na dvě strany. Menu nastylujeme stejně jako v lekci nav.

Hlavička článku zůstala beze změny, protože nemá třídu site-header.

Styl

Hlavička, která zůstane nahoře

S position: sticky se hlavička při skrolování přilepí k hornímu okraji okna. Potřebuje pozadí, jinak by přes ni prosvítal obsah.

Zkuste skrolovat přímo v náhledu.

Responzivita

Na mobilu pod sebou

Na úzké obrazovce dáme menu pod logo a zmenšíme padding, aby obsahu zbylo víc místa.

Přepněte náhled na desktop klávesou M a porovnejte.

Shrnutí

Kdy použít header

Ano

• hlavička celého webu s logem a menu
• úvod článku nebo oddílu: nadpis, autor, datum

Ne

• místo head, to je úplně jiný element
• uvnitř footer nebo jiného header
• jen kvůli vzhledu, když nejde o úvodní obsah

Další: <nav> →