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

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 (11)

Avatar
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
Avatar
Miroslav Brzotický:

Proč je v <!DOCTYPE html> ten vykřiřník?

 
Odpovědět 10.12.2016 23:42
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Miroslav Brzotický
Daniel Vítek:

To je stejné, jako se ptát proč se <body> píše <body> :)

 
Odpovědět  +1 11.12.2016 0:08
Avatar
Miroslav Brzotický:

<body> je jasné, vykřičník u <!DOCTYPE html> má určitě svůj důležitý význam. Jestli mám něco pochopit, musím chápat důvody. Dogmatická tvrzení neposunou.

 
Odpovědět 11.12.2016 20:03
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Miroslav Brzotický
Jakub Žák:

Protože to není normální tag, nýbrž specifikace typu dokumentu. Stará se o to, aby prohlížeč věděl, jak má stránku vykreslit.

S vykřičníkem se píše, protože se to píše ve specifikaci, když si ji přečteš, možná se to tam dozvíš, ale přijde mi to jako naprosto zcestná informace.

Odpovědět  +1 11.12.2016 20:09
Kuba je ajťák. Buď jako Kuba.
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 21. Zobrazit vše