Správná struktura HTML dokumentu je důležitá z hlediska funkčnosti, zobrazování jak vizuální tak obsahové stránky webu. Základní struktura je velmi prostá a měla by vypadat takto:
<!DOCTYPE HTML>
<html>
<head>
<title> Titulek webu </title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML> prohlížeči říká, že tento dokument je napsán v jazyce HTML 5. Jednotlivé verze HTML se od sebe liší, proto bychom na tento tag neměli zapomínat, jinak by nám mohla stránka dělat neplechu. Tag <html> </html> říká, že všechno vevnitř je HTML kód. Značka <head></head> udává informace o dokumentu, které se na stránce nezobrazují. Tag, který se do hlavičky vkládá je například výše zmíněný <title></title>, je to titulek nebo by se taky dalo říct popisek webu. V prohlížeči nám pomáhá k orientaci mezi záložkami, proto by měl být výstižný a krátký. Do těla dokumentu <body> </body> píšeme vše, co chceme, aby se na dané stránce zobrazovalo.
Kostru dokumentu můžeme dále prakticky rozvinout o určité meta tagy a vlastnosti, ale o tom někdy příště.
Základní složkou obsahu webu jsou nadpisy. HTML disponuje 6 různými nadpisy navzájem se lišící velikostí přičemž nadpis první úrovně je největší a nadpis šesté úrovně je nejmenší. Tag pro nadpis je samozřejmě párový značí se <h1> Nadpis první úrovně </h1>. Číslo následující za písmenem h uvádí o jakou úroveň nadpisu jde.
V praxi to vypadá takto:
…
<body>
<h1> Nadpis první úrovně </h1> <br>
<h2> Nadpis druhé úrovně </h2> <br>
<h3> Nadpis třetí úrovně </h3> <br>
<h4> Nadpis čtvrté úrovně </h4> <br>
<h5> Nadpis páté úrovně </h5> <br>
<h6> Nadpis šesté úrovně </h6> <br>
</body>
…
Tag <br> má stejnou funkci jako klasický enter. Odřádkování enterem v textovém editoru je na webu ignorováno a takové odřádkování musíme tedy nahradit tímto nepárovým tagem.
V dalším díle seriálu se podíváme na číslované a nečíslované seznamy.