DOCTYPE a základní kostra

Doba čtení: cca 2 min

Každý HTML soubor začíná úplně stejně. Existuje základní kostra, která musí být přítomna vždy – bez ní by prohlížeč nevěděl, co s obsahem souboru. Tato lekce ti ukáže, jak taková kostra vypadá a co každá její část znamená.

Co je DOCTYPE?

Úplně první řádek každého HTML souboru musí být deklarace DOCTYPE:

<!DOCTYPE html>

DOCTYPE říká prohlížeči: „Tento soubor je napsán v HTML5 – zpracuj ho podle moderních standardů.“ Bez DOCTYPE přejde prohlížeč do takzvaného quirks mode (režim kompatibility), kde se chová jako starý Internet Explorer a mnoho věcí funguje jinak než čekáš.

Všimni si, že DOCTYPE není HTML tag – nemá uzavírací variantu ani atributy. Je to speciální instrukce pro prohlížeč.

Základní kostra HTML stránky

Po DOCTYPE následuje samotná HTML kostra. Takto vypadá minimální platná HTML5 stránka:

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Název stránky</title>
</head>
<body>

  <h1>Ahoj, světe!</h1>

</body>
</html>

Pojďme si rozebrat každou část.

Tag `<html>`

Tag <html> je kořenový element – obaluje veškerý obsah stránky. Obsahuje vždy atribut lang, který určuje jazyk stránky:

<html lang="cs">   <!-- česky -->
<html lang="en">   <!-- anglicky -->
<html lang="sk">   <!-- slovensky -->

Atribut lang je důležitý pro odečítače obrazovky – VoiceOver díky němu ví, jak správně vyslovovat slova. Je také důležitý pro vyhledávače a překladače.

Sekce `<head>`

Sekce <head> obsahuje metadata – informace o stránce, které se nezobrazují přímo v prohlížeči. Patří sem:

<meta charset="UTF-8"> – kódování znaků. UTF-8 podporuje českou diakritiku i znaky z celého světa. Bez tohoto tagu se může diakritika zobrazit jako nesmyslné symboly.
<meta name="viewport" …> – nastavení pro mobilní zobrazení (viz lekce o responzivitě).
<title> – název stránky zobrazený v záložce prohlížeče a ve výsledcích vyhledávání.
<meta name="description"> – krátký popis stránky pro vyhledávače.
<link rel="stylesheet"> – připojení CSS souboru.

Sekce `<body>`

Sekce <body> obsahuje veškerý obsah, který se zobrazuje v prohlížeči – texty, obrázky, formuláře, navigaci. Vše, co uživatel vidí nebo slyší, je uvnitř <body>.

Na konec <body>, těsně před uzavírací tag </body>, se umísťují skripty JavaScriptu:

<script src="skript.js"></script>
</body>

Umístění skriptu na konec stránky (nikoli do <head>) je důležité: stránka se načte a zobrazí celá dříve, než se spustí JavaScript. Uživatel tak nemusí čekat.

Tip od Zdeňka

Zdeněk radí: Atribut lang na tagu <html> nikdy nevynechávej. Pro mě jako uživatele VoiceOveru je to klíčová informace – bez ní by odečítač mohl číst česká slova s anglickou výslovností a výsledek by byl místy nesrozumitelný. Je to jedna řádka navíc, ale zásadně zlepší zážitek pro každého, kdo web poslouchá místo aby ho četl.