Tento článek pojednává o headeru v kontextu webového designu.
Header (česky nejčastěji hlavička webu) je horní část webové stránky, která obsahuje klíčové prvky orientace a identity webu – například logo, hlavní navigační menu, kontaktní údaje nebo vyhledávání. Header je součástí layoutu a obvykle se opakuje na všech stránkách webu, což podporuje konzistentnost a použitelnost.
Co header obvykle obsahuje
Typické prvky hlavičky:
- Logo nebo název webu
- Hlavní navigace (menu)
- Vyhledávání na webu
- Kontaktní prvky (telefon, e-mail)
- CTA tlačítko (např. „Objednat“, „Kontakt“)
- Přihlášení / registrace
- E-shop prvky (košík, oblíbené položky, účet)
- Jazyková volba
Obsah se liší podle typu webu – e-shop má v hlavičce jiné prvky než firemní prezentace nebo blog.
Funkce headeru
Header má několik zásadních funkcí:
1) Identita webu
- uživatel okamžitě pozná, kde se nachází
- logo a barevné prvky komunikují brand
2) Navigace
- pomáhá uživatelům orientovat se na webu
- zajišťuje přístup k nejdůležitějším stránkám
3) Konverze
- CTA tlačítka v headeru výrazně ovlivňují výkon webu
- důležité akce jsou vždy „na očích“
4) UX a přístupnost
- přehledný header zlepšuje uživatelský zážitek
- správně strukturovaná navigace zlepšuje dostupnost
Typy headerů
1) Klasický statický header
- pevně umístěn nahoře, nemění pozici při scrollu
2) Sticky / fixed header
- zůstává viditelný i při posouvání stránky
- výhodný pro konverze a UX
3) Transparentní header
- header je průhledný, typicky přes hero banner
- často kombinován s animací přechodu při scrollu
4) Minimalistický header
- používán na obsahových nebo minimalistických webech
- obsahuje pouze logo + jednoduché menu
5) Mobile-specific header
- hamburger menu
- zkrácené prvky kvůli omezenému prostoru
- někdy “sticky bottom bar” pro rychlé akce
Header z pohledu HTML a sémantiky
V HTML5 existuje přímo prvek:
<header>
<!-- obsah hlavičky -->
</header>
Tento prvek:
- je sémanticky určen pro hlavičkové informace
- může se objevit i vícekrát – např. v rámci sekce, článku nebo celé stránky
Například:
<article>
<header>
<h1>Název článku</h1>
<p>Datum publikace</p>
</header>
</article>
❗ Neplést se <head>, což je jiný prvek obsahující metadata.
Header a SEO
- Nepřímo ovlivňuje SEO díky navigaci a UX
- dobře strukturované menu pomáhá vyhledávačům pochopit strukturu webu
- CTA v headerech snižují míru opuštění stránky
- strukturované interní odkazy mohou posilovat důležité stránky, co se týče zobrazování ve výsledcích vyhledávání
Vyhledávače sice nehodnotí header jako faktor „navíc“, ale jeho obsah je pro SEO významný.
Header a design
Při návrhu headeru se řeší:
- kontrastní barvy (kvůli čitelnosti)
- dostatek prostoru (padding)
- jednoduchost a přehlednost
- responzivita
- animace při scrollu
- konzistence napříč celým webem
Moderní trend: co nejméně prvků, o to vyšší přehlednost.
Shrnutí
Header je vrchní část webu obsahující logo, navigaci a další klíčové prvky pro orientaci a interakci. Je důležitý pro použitelnost, design, sémantiku i konverze. Správně navržený header je jeden ze základních pilířů profesionálního webu.
