01 Meta & Hlavička — HTML Taháček

<!DOCTYPE html>

Deklarace dokumentu

Povinný první řádek každého HTML souboru. Říká prohlížeči: "toto je HTML5".

SPECIALHTML5

DOCTYPE není HTML tag — je to instrukce pro prohlížeč. Bez ní prohlížeč přepne do quirks mode — retro chybový mód z 90. let, kde CSS layouty, inline-block a tabulky fungují nepředvídatelně. HTML5 DOCTYPE je nejkratší možný, neobsahuje žádnou URL.

// Proč to existujeHistoricky existovaly různé verze HTML s různými pravidly. DOCTYPE říkal prohlížeči která pravidla použít. HTML5 to zjednodušil na minimum.

Musí být úplně první řádek — před <html> i mezerou
Malá/velká písmena nehrají roli: <!doctype html> je OK
XML/XHTML mají jiný, delší DOCTYPE s URL
Bez DOCTYPE = quirks mode = nepředvídatelné chování CSS

Příklad

HTML

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Název stránky</title>
  </head>
  <body>
    <p>Obsah stránky</p>
  </body>
</html>

✅ <!DOCTYPE html> jako první řádek

❌ Prázdný řádek nebo BOM před DOCTYPE

<html>

Kořenový element

Obaluje celý dokument. Atribut lang je povinný pro přístupnost a SEO.

BLOCK

Atribut lang="cs" říká screen readerům jakou výslovnost použít, Googlu v jakém jazyce je obsah, a prohlížeči zda nabídnout překlad. Bez lang jsou tyto funkce nespolehlivé nebo nefunkční.

Atributy

lang	Jazyk dokumentu. POVINNÉ!	cs / en / de / sk
dir	Směr textu pro arabštinu/hebrejštinu	ltr / rtl / auto

lang="cs" je ISO 639-1 kód jazyka
lang="en-US" pro jazykovou variantu
Různé jazyky uvnitř: lang přímo na elementu
Screen reader bez lang čte česky anglicky!

Příklad

HTML

<html lang="cs">
  ...
</html>

<!-- Více jazyků na stránce -->
<html lang="cs">
  <p>Ahoj světe!</p>
  <p lang="en">Hello world!</p>
  <p lang="de">Hallo Welt!</p>
</html>

<head>

Záhlaví dokumentu

Obsahuje metadata — nezobrazuje se na stránce, ale je zásadní pro SEO, výkon a funkčnost.

BLOCK

Uvnitř head patří: meta tagy (charset, viewport, description), title, link (CSS, favicon, preload), style (inline CSS), script s defer/async. Pořadí tagů v head záleží — charset a viewport musí být první.

// Správné pořadí v head1. meta charset · 2. meta viewport · 3. title · 4. meta description · 5. link CSS · 6. link favicon · 7. script defer. Charset musí být v prvních 1024 bajtech dokumentu — jinak prohlížeč může špatně dekódovat znaky.

Nic z obsahu head se nezobrazí na stránce
Kritické CSS inline v <style> zabrání FOUC
Skripty s defer v head neblokují render stránky

Doporučené pořadí v head

HTML

<head>
  <!-- 1. Charset — VŽDY první! -->
  <meta charset="UTF-8">

  <!-- 2. Viewport -->
  <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">

  <!-- 3. Titulek -->
  <title>Název | Web</title>

  <!-- 4. SEO popis -->
  <meta name="description"
    content="Popis stránky...">

  <!-- 5. CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- 6. Favicon -->
  <link rel="icon" href="favicon.ico">

  <!-- 7. JS s defer -->
  <script src="app.js" defer></script>
</head>

<title>

Titulek stránky

Text v záložce prohlížeče a ve výsledcích Googlu. Nejdůležitější SEO element.

HTML5

Google zobrazí prvních ~55–60 znaků. Vzor: "Klíčové slovo | Název webu". Každá stránka musí mít unikátní titulek — stejné titulky poškodí SEO.

// Proč záleží délkaGoogle titulek ořízne po ~55-60 znacích s "...". Nejdůležitější klíčové slovo dejte co nejdříve — Google přikládá větší váhu začátku titulku.

Max 55–60 znaků pro plné zobrazení v Googlu
Klíčové slovo co nejdříve (vlevo)
Každá stránka = unikátní titulek
JS: document.title = "Nový název" pro SPA
Nezaměňovat s nadpisem stránky — title je v záložce

Příklady

HTML

<!-- Produktová stránka -->
<title>Victorinox Classic | Shop.cz</title>

<!-- Homepage -->
<title>Shop.cz — Nože od 299 Kč</title>

<!-- Kategorie -->
<title>Kapesní nože | Shop.cz</title>

<!-- Dynamicky v JS (SPA) -->
<script>
  document.title = "Zpráva (3) | Chat";
</script>

✅ Victorinox Classic | Shop.cz

❌ Stránka — příliš krátký a obecný

❌ Shop.cz | Victorinox Classic nůž — brand by neměl být první

<meta>

Metadata

Charset, viewport, SEO popis, Open Graph, Twitter Card, robots. Void element — bez zavíracího tagu.

VOIDHTML5

charset UTF-8 zabrání problémům s diakritikou. viewport umožní responzivní design. description ovlivňuje CTR ve výsledcích vyhledávání. og: tagy řídí jak stránka vypadá při sdílení na Facebooku/LinkedIn.

Atributy

charset	Kódování dokumentu. Vždy UTF-8!	UTF-8
name	Typ: description, viewport, robots, author	string
content	Hodnota metadat	string
property	Open Graph / Twitter Card atributy	og:title...
http-equiv	HTTP ekvivalent (refresh, CSP)	string

// og:imageIdeálně 1200×630 px. Testujte na: developers.facebook.com/tools/debug nebo cards-dev.twitter.com/validator

charset musí být v prvních 1024 bajtech souboru
description: max 155–160 znaků
robots: noindex pro dev/staging prostředí
og:image min. 600×315 px, ideálně 1200×630 px

Kompletní příklad

HTML

<!-- Charset — VŽDY první! -->
<meta charset="UTF-8">

<!-- Viewport — povinné pro mobily -->
<meta name="viewport"
  content="width=device-width,
  initial-scale=1.0">

<!-- SEO popis (max 155-160 znaků) -->
<meta name="description"
  content="Kapesní nože Victorinox.
  Doprava zdarma od 500 Kč.">

<!-- Zakázat indexaci (dev/staging) -->
<meta name="robots"
  content="noindex, nofollow">

<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title"
  content="Victorinox Classic | Shop.cz">
<meta property="og:description"
  content="Kapesní nůž s 9 funkcemi.">
<meta property="og:image"
  content="https://shop.cz/og.jpg">
<meta property="og:url"
  content="https://shop.cz/victorinox">
<meta property="og:type"
  content="website">

<!-- Twitter Card -->
<meta name="twitter:card"
  content="summary_large_image">
<meta name="twitter:image"
  content="https://shop.cz/og.jpg">

<link>

Odkaz na externí zdroj

CSS, favicon, preload, prefetch, manifest, canonical. Void element — nemá zavírací tag.

VOIDHTML5

rel="preload" přednahraje kritické zdroje ihned (fonty, LCP obrázek). rel="prefetch" nízká priorita — pro zdroje příští stránky. rel="canonical" říká Googlu, která URL je originál, zabraňuje penalizaci za duplicitní obsah.

Atributy

rel	Vztah: stylesheet, icon, preload, prefetch, manifest, canonical, dns-prefetch	string
href	URL zdroje	URL
as	Pro preload: typ zdroje	font/style/image/script
media	Aplikovat jen pro médium	screen / print
crossorigin	CORS — nutné pro fonty!	anonymous
type	MIME typ zdroje	text/css / image/svg+xml

Preload > prefetch pro kritické zdroje na aktuální stránce
Fonty vždy s crossorigin="anonymous"
media="print" = načte se jen při tisku
Canonical zabrání penalizaci za duplicate content

Příklady

HTML

<!-- CSS -->
<link rel="stylesheet" href="style.css">

<!-- Favicony -->
<link rel="icon" href="favicon.ico">
<link rel="icon" href="icon.svg"
  type="image/svg+xml">
<link rel="apple-touch-icon"
  href="apple-touch-icon.png">

<!-- PWA manifest -->
<link rel="manifest" href="manifest.json">

<!-- Preload — kritické zdroje -->
<link rel="preload" href="font.woff2"
  as="font" crossorigin="anonymous">
<link rel="preload" href="hero.jpg"
  as="image">

<!-- Prefetch — příští stránka -->
<link rel="prefetch" href="/dalsi.html">

<!-- DNS prefetch — třetí strany -->
<link rel="dns-prefetch"
  href="//fonts.googleapis.com">

<!-- Canonical URL -->
<link rel="canonical"
  href="https://web.cz/produkt">

<!-- Tisk -->
<link rel="stylesheet" href="print.css"
  media="print">

<style>

Inline CSS

Vloží CSS přímo do HTML. Vhodné pro kritické CSS, které musí být načteno okamžitě.

BLOCK

Kritické CSS vložené inline zabrání FOUC (Flash of Unstyled Content — záblesk nestylizované stránky než se načte externí CSS). Vkládejte jen styly potřebné pro viditelnou část stránky (above-the-fold). Zbytek načtěte přes <link>.

Alternativy

Atributy

media

Aplikovat jen pro dané médium

screen / print

Jen kritické CSS inline (doporučení max ~14 kB)
Zbytek načtěte externě přes <link>
V Next.js: CSS Modules nebo styled-components

Příklady

HTML

<!-- Kritické CSS inline -->
<style>
  body {
    margin: 0;
    font-family: sans-serif;
  }
  .hero {
    padding: 2rem;
    background: #000;
    color: #fff;
  }
</style>

<!-- Tiskové styly -->
<style media="print">
  .nav, .footer { display: none; }
  body { font-size: 12pt; color: #000; }
  a::after {
    content: " (" attr(href) ")";
  }
</style>

JavaScript

Vloží nebo načte JavaScript. defer nebo async zabrání blokování parsování stránky.

BLOCKHTML5

Script bez atributů v head blokuje parsování HTML — prohlížeč zastaví čtení stránky, stáhne a spustí JS, teprve pak pokračuje. defer = spustí po parsování, zachová pořadí skriptů. async = spustí hned po stažení, bez čekání na pořadí.

Atributy

src	URL externího JS souboru	URL
defer	Spustí po parsování, zachová pořadí	boolean
async	Spustí hned po stažení, bez pořadí	boolean
type	module = ES modules (auto defer)	module
nomodule	Fallback pro staré prohlížeče bez ES modules	boolean

// defer vs async — kdy codefer: zachová pořadí, spustí před DOMContentLoaded. Ideální pro aplikační skripty. async: spustí kdykoli po stažení (náhodné pořadí). Vhodné pro nezávislou analytiku nebo reklamy.

defer zachovává pořadí, async ne
type="module" má automaticky defer
Vyhněte se inline JS v produkci (bezpečnost CSP)
Script na konci <body> = starý způsob, defer je lepší

Příklady

HTML

<!-- ✅ DOPORUČENO: defer v head -->
<head>
  <script src="app.js" defer></script>
</head>

<!-- ✅ ES Modules (automaticky defer) -->
<script type="module" src="main.js">
</script>

<!-- ✅ Analytika — async (pořadí nehraje) -->
<script async
  src="https://analytics.com/tag.js">
</script>

<!-- ❌ Blokuje parsování HTML! -->
<script src="app.js"></script>

<!-- Nomodule fallback -->
<script type="module" src="modern.js">
</script>
<script nomodule src="legacy.js">
</script>

✅ <script src="app.js" defer>

❌ <script src="app.js"> ← blokuje!