Hlavička (head)

00:00:00

Sekce <head> je část HTML stránky, která se nezobrazuje v prohlížeči. Přesto je nesmírně důležitá – obsahuje informace pro prohlížeče, vyhledávače, odečítače obrazovky i sociální sítě. Tato lekce ti ukáže, co všechno do <head> patří a proč.

Kódování znaků – charset

Hned první meta tag v sekci <head> by měl definovat kódování znaků:

<meta charset="UTF-8">

UTF-8 je univerzální kódování, které podporuje českou diakritiku, emoji, znaky arabštiny, čínštiny a prakticky vše ostatní. Bez tohoto tagu se může zobrazit místo háčků a čárek nesmyslná změť symbolů. Vždy ho umísti jako první tag v sekci <head>.

Název stránky – title

Tag <title> definuje název stránky:

<title>Co je HTML | Crazy-Mac Učebna HTML</title>

Tento název se zobrazuje:

  • v záložce prohlížeče,
  • ve výsledcích vyhledávání (Google, Bing),
  • v záložkách a historii prohlížeče,
  • jako první informace, kterou přečte VoiceOver po načtení stránky.

Dobrý titulek je výstižný, jednoznačný a popisuje obsah stránky. Doporučená délka je 50–60 znaků. Osvědčený formát: „Název stránky | Název webu“.

Popis stránky – meta description

<meta name="description" content="Co je HTML, k čemu slouží a jak funguje – Učebna HTML na Crazy-Mac.cz">

Popis se zobrazuje ve výsledcích vyhledávání pod titulkem. Ovlivňuje, zda uživatel na výsledek klikne. Nepřesahuj 160 znaků.

Další meta tagy

Autor

<meta name="author" content="Zdeněk Doležal">

Viewport (mobilní zobrazení)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Nezbytný pro správné mobilní zobrazení. Podrobněji je popsán v lekci o responzivním designu.

Open Graph (sdílení na sociálních sítích)

Tagy Open Graph určují, jak se stránka zobrazí při sdílení na Facebooku, LinkedIn nebo Twitter/X:

<meta property="og:title" content="Název stránky">
<meta property="og:description" content="Krátký popis">
<meta property="og:image" content="https://example.com/obrazek.jpg">
<meta property="og:url" content="https://example.com/stranka.html">

Tag <link> slouží k připojení externích zdrojů. Nejčastěji CSS:

<link rel="stylesheet" href="styl.css">

Ale také ikonu stránky (favicon):

<link rel="icon" href="favicon.ico">

<!-- Nebo SVG favicon (moderní přístup) -->
<link rel="icon" href="data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22><text%20y=%22.9em%22%20font-size=%2290%22>🏠</text></svg>">

Tip od Zdeňka

Zdeněk radí: Titulek stránky (<title>) je pro mě jako nevidomého uživatele to první, co slyším po načtení každé stránky. Pokud jsou na celém webu titulky stejné nebo příliš obecné (například jen „Stránka“), nemám šanci zjistit, kde jsem, bez dalšího čtení. Vždy napiš titulek tak, aby jednoznačně identifikoval obsah konkrétní stránky – a uveď za ním název webu. Tvůj web bude lepší pro vyhledávače i pro uživatele zároveň.