Struktura HTML dokumentu - Český HTML 5 manuál

HTML a CSS Manuál HTML struktura Struktura HTML dokumentu - Český HTML 5 manuál

Tagy nemůžeme psát jen tak, do prázdného souboru s koncovkou HTML. Aby byl dokument validní a prohlížeč mu správně rozuměl (a správně ho i zobrazil), musí mít určitou strukturu. Ta je poměrně jednoduchá a skládá se z několika základních tagů. Podívejme se nejprve na následující obrázek:

Struktura HTML dokumentu

<!DOCTYPE>

Doctype není ve skutečnosti tag, protože je nepárový a není uzavřený. Umožňuje nastavit typ dokumentu a měl by být prvním elementem vaší webové stránky. Ve starším HTML 4 byl poněkud komplikovaný, nyní se jeho zápis velmi zjednodušil a je následující:

<!DOCTYPE html>

Kód výše prohlížeči sdělí, že zobrazuje HTML 5 dokument.

<html>

Html tag obaluje celý HTML dokument, který je dále rozdělen na hlavičku (ta obsahuje informace hlavně pro prohlížeč) a tělo, kde je uložen fyzický obsah dokumentu.

<!DOCTYPE html>
<html>
        <head>
        </head>
        <body>
        </body>
</html>

Můžeme uvést atribut:

  • manifest - Obsahuje umístění manifestu pro cache. HTML 5 totiž přichází s možností cachování obsahu stránky pro zrychlení načítání, ale tím se nyní nebudeme zabývat.
  • xmlns - Pokud si přejeme používat raději XML syntaxi HTML 5 (ne HTML), můžeme napsat doctype následujícím způsobem:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

Hlavička je první částí HTML dokumentu a obsahuje informace hlavně pro prohlížeč. Povinný je párový tag <title>, který specifikuje titulek stránky. Ten se zobrazí na záložce prohlížeče a také se jím řídí vyhledávače. Podrobněji se hlavičce věnuje článek HTML hlavička.

Základní HTML hlavička by mohla vypadat takto:

<head>
        <title>Titulek stránky</title>
</head>

<body>

Do těla stránky již patří tagy, které se uživateli zobrazí. Jsou to např. odstavce s textem, obrázky, tabulky, seznamy a podobně. Tyto tagy jsou ještě uloženy v tzv. layoutu.

Nakonec si uveďme příklad jednoduché HTML stránky:

<!DOCTYPE html>
<html>
        <head>
                <title>devbook.cz - programátorská sociální síť</title>
        </head>
        <body>
                <h1>devbook.cz</h1>
                <p>Vítejte v programátorské sociální síti!</p>
        </body>
</html>

A výsledek:

Jednoduchá HTML stránka

 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
HTML struktura - Český HTML 5 manuál

 

 

Komentáře
Zobrazit starší komentáře (7)

Avatar
Neaktivní uživatel:

muzes to psat plne bez doctype ale nemas to spravne viz. Dan a Msave

Odpovědět 5.7.2013 13:53
Neaktivní uživatelský účet
Avatar
Michal Žůrek (misaz):

Neaktivní uživatel, martin a Amomym: Doctype musíte psát jedině ve formátu:

<!DOCTYPE html>

není těžké si to zapamatovat, pro představu před příchodem HTML5 se muselo psát:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Odpovědět  +1 5.7.2013 13:59
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Neaktivní uživatel:

ja to taky pisu s tim Doctypem jak ty pises

Odpovědět 5.7.2013 14:29
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek (misaz):

však to je dobře.

Dobře je jen jediná varianta:

<!DOCTYPE html>

Špatně pak jsou všechny ostatní:

<DOCTYPE>
<!DOCTYPE>
<DOCTYPE html>
<! DOCTYPE>
...
Odpovědět  +1 5.7.2013 14:31
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Neaktivní uživatel:

to vim
ja jen rikal ze jde to sice psat i bez toho ale neni to spravne

ja samozrejme pisu validne

Odpovědět 5.7.2013 14:33
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel:

pracovalm jsem na tom 5 minut,prestavka 2 tydny,ano nevalidni sice je ale chci opravit :D

Odpovědět 7.7.2013 19:55
Neaktivní uživatelský účet
Avatar
viktor.matas
Člen
Avatar
viktor.matas:

Asi hloupá otázka, ale proč má výsledek v titulku i nadpisu Islandsoft.cz místo devbook.cz?

 
Odpovědět 6.1.2014 19:27
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na viktor.matas
Jan Vargovský:

To byl název starého webu.

 
Odpovědět 6.1.2014 19:41
Avatar
done
Člen
Avatar
Odpovídá na viktor.matas
done:

Islandsoft byl dřívější název. Ještě dnes tě islandsoft.cz přesměruje na devbook.cz

Editováno 6.1.2014 19:43
 
Odpovědět 6.1.2014 19:42
Avatar
viktor.matas
Člen
Avatar
viktor.matas:

Díky moc. :)
Kouknul jsem se na Islandsoft.cz a pochopil. :)

 
Odpovědět 6.1.2014 23:13
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 17. Zobrazit vše