Dokument

(X)HTML dokument (zdrojový kód webové stránky) je základní textový soubor sloužící k ukládání dat.

Struktura HTML 4.01 dokumentu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="cs">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="cs">
    <meta name="language" content="cs">
    <title>HTML dokument</title>
    <meta name="description" content="Základní šablona HTML dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první HTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

Struktura XHTML 1.0 dokumentu

  • X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód
    • meta tag "X-UA-Compatible" by měl být přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář no)
    • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
    • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
      • podpora jen do ledna 2014 !!!
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cs" />
    <meta name="language" content="cs" />
    <title>XHTML dokument</title>
    <meta name="description" content="Základní šablona XHTML dokumentu" />
    <meta name="keywords" content="xhtml,dokument,šablona" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první XHTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html> 

Struktura HTML 5 dokumentu

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Můj první HTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

Struktura XHTML 5 dokumentu

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>XHTML 5 dokument</title>
    <meta name="description" content="Základní šablona XHTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první XHTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

 XML deklarace

<?xml version="1.0" encoding="utf-8"?>

Uvádí, že se jedná o XML dokument (logicky tudíž není u HTML dokumentu) a obsahuje dva pseudo-atributy:

  • version – verze XML dokumentu (u XML 1.0 i 1.1 vždy 1.0)
  • enconding – použité kódování dokumentu

Celá XML deklarace je nepovinná, pro kódování UTF-8 nebo UTF-16.

IE6- a některé starší verze Mozilly a Opery XML deklaraci nerozumí a přepínají vykreslování do nestandardního (tzv. quirk) režimu. Z tohoto důvodu je vhodné psát dokument v kódování UTF-8 a neuvádět XML deklaraci.

Typ dokumentu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Syntaktická pravidla stanovující:

  • které elementy je možné používat
  • jaké atributy je možné používat u daných elementů
  • jaký obsah může daný element obsahovat atd.

U HTML 4.01 a XHTML 1.0 je možné si zvolit jeden ze tří typů dokumentu:

  • Strict – striktní
  • Transitional – přechodný – povoleny zavržené (deprecated) prvky
  • Frameset – přechodný režim rozšířený o specifikaci rámů

Typ dokumentu obsahuje:

  • html – jméno kořenového elementu
  • klíčové slovo PUBLIC – udává, že se jedná o veřejně dostupnou deklaraci
  • veřejný identifikátor – součást programu (prohlížeče) nebo systému, aby se pravidla nemusela stahovat z internetu
  • systémový identifikátor – webová adresa souboru syntaktických pravidel

Element <html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

Kořenový element celého dokumentu do kterého se vkládá veškerý obsah obsahující atributy:

  • xmlns – povinný atribut xhtml
  • xml – kód jazyka dokumentu
  • lang – kód jazyka dokumentu (zpětná kompatibilita s HTML prohlížeči)

Důvody uvádění kódu jazyka:

  • zařazení vyhledávacími roboty do správné jazykové skupiny
  • určení výslovnosti u hlasového výstupu
  • dodržování typografických pravidel příslušející danému jazyku (např. uvozovky)
  • automatická kontrola pravopisu

Hlavička dokumentu <head>

<head>

</head>

Tělo dokumentu <body>

<body>

</body>

Doporučení:

Stránku začněte tvořit ve striktním režimu. Pokud z nějakého důvodu potřebujete použít i zavržené elementy změňte typ dokumentu na přechodný (transitional). Typ dokumentu s rámy již raději nepoužívejte.

PřílohaVelikost
dokument-html401.html753 bajtů
dokument-xhtml10.html859 bajtů