Úvod k úloze
Každá webová stránka stojí na pevných základech – na správně vystavěné HTML kostře dokumentu. Bez ní by prohlížeč nevěděl, jak správně zobrazit obsah, a mohly by vzniknout chyby nebo nekompatibility. Proto je důležité naučit se tvořit základní strukturu dokumentu HTML a rozumět, proč tam jednotlivé části patří. Tento základ budete používat pokaždé, když budete psát web – ať už půjde o jednoduchý formulář, nebo o složitou aplikaci.
Teorie a principy
Kostra HTML dokumentu obsahuje několik klíčových prvků:
-
Deklarace typu dokumentu (<!DOCTYPE html>)
-
Tag <html>
-
Obaluje veškerý obsah webové stránky.
-
Má otevírací <html> a uzavírací </html>.
-
Doporučuje se přidat atribut lang="cs" pro správné určení jazyka.
-
Sekce <head>
-
Obsahuje metadata (název stránky, kódování, odkazy na styly nebo skripty).
-
Nikdy se v ní nezobrazuje přímo obsah stránky.
-
Sekce <body>
-
Zde se nachází vlastní obsah stránky (texty, obrázky, odkazy, formuláře…).
-
To, co uživatel opravdu uvidí v prohlížeči.
Praktické příklady kódu
Minimální validní HTML dokument
-
<!DOCTYPE html> říká, že jde o HTML5.
-
<meta charset="UTF-8"> zajistí správné zobrazení českých znaků.
-
<title> nastaví název stránky (viditelný na záložce prohlížeče).
Časté rozšíření hlavičky
Typické chyby / záludnosti
-
Chybějící <!DOCTYPE html> – prohlížeč pak může přepnout do tzv. „quirks mode“, kde se chová jinak, než očekáváte.
-
Neuzavřené tagy – např. <body> bez </body> může rozhodit celou stránku.
-
Záměna <head> a <body> – do hlavičky nepatří texty nebo obrázky.
-
Zapomenutý atribut lang – není chyba, ale je dobrý zvyk ho uvádět (pomáhá vyhledávačům a čtečkám).
Shrnutí
-
HTML dokument vždy začíná deklarací <!DOCTYPE html>.
-
Obsahuje kořenový prvek <html>, uvnitř kterého jsou dvě hlavní části:
-
Každý otevřený tag musí být také správně uzavřen.
-
Správná kostra dokumentu je nezbytným základem pro všechny další úkoly v HTML, CSS i JavaScriptu.