Struktura dokumentu

Základní značky vymezující oblasti HTML souboru.

Tag Význam Párový Výskyt
html začátek HTML dokumentu ano na začátku souboru
head hlavička stránky ano na začátku souboru
body tělo stránky + definice pozadí ano za <head>
<!-- --> poznámka ano kdekoliv 
!doctype specifikace DTD ne úplně na začátku souboru

html

Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Pokud ale chcete mít soubory v souladu s dobrými mravy, <html> tag používejte.

Tag html nemá žádné atributy.

head

Hlavička dokumentu, která se nezobrazuje. Obsahuje nepovinně další tagy (title, meta, link, style, script aj.). Pokud v hlavičce použijete prostý text, v některých prohlížečích se zobrazí na začátku stránky!

Tag head nemá žádné atributy.

body

Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky.

Všechny níže zmíněné atributy tagu body (vyjma obecných) jsou zastaralé a nahrazují se využitím CSS vlastností nastavených pro tag body (doporučené CSS vlastnosti uvádím v pravém sloupci tabulky).

Atributy tagu <body>
Atribut tagu <body> Význam Hodnoty CSS náhrada pro tag body
bgcolor barva pozadí barva background-color
background obrázek na pozadí URL obrázku background-image
text barva popředí (textu) barva color
link barva nenavštívených odkazů barva a:link {color: ...}
vlink barva navštívených odkazů barva a:visited {color: ...}
alink barva klikaných odkazů (a pod tabulátorem) barva a:active {color: ...}
bgproperties posouvání obrázkového pozadí scroll | fixed background-attachment
scroll rolování těla (raději neměňte) yes | no overflow
leftmargin levý okraj pixely margin-left
topmargin horní okraj pixely margin-top
rightmargin pravý okraj (ne v NN) pixely margin-right
bottommargin spodní okraj (ne v NN) pixely margin-bottom
marginwidth levý a pravý (pouze NN) pixely margin
marginheight horní a spodní (pouze NN) pixely margin
+ obecné atributy

Příklad: <body background="obrazek.gif" bgcolor="yellow" text="blue" link="green" vlink="olive" alink="#FF0000">

Zadávání barev pomocí atributů tagu body je zastaralé. Doporučuji barvit dokument pomocí CSS stylů, např.:

<body style="color: blue; background-image: URL('obrazek.gif')">

nebo ještě lépe v hlavičce dokumentu pomocí tagu style:

<style>
body {color: blue; background-color: yellow; background-image: URL('obrazek.gif')}
a:link {color: green;}
a:visited {color: olive;}
a:active {color: #FF0000}
</style>

<!-- poznámka -->

Všechno, co je v HTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. <!-- je tedy začátek poznámky, --> její konec. Poznámkám se také říká "komentáře".

Čtyři záludnosti:

Pomocí poznámek určitého tvaru se dá dosáhnout nestandardního chování Internet Exploreru. Říká se tomu conditional comments, podmíněné komentáře.

(V jiných webových jazycích, v CSS a v Javascriptu, se poznámka dělá úplně jinak, totiž pomocí sekvencí /* a */. V javascriptu je navíc poznámkou všechno za sekvencí // až do konce řádku.)

!doctype

Specifikace DTD. Píše se úplně na začátek souboru, ještě před značku <html>. Navíc se udává verze HTML, které dokument odpovídá. Jde částečně o formalitu, částečně o užitečnou věc.

Hlavní užitečnou funkcí !doctype je dnes přepínání zobrazovacích modů CSS. Jinak řečeno podle doctype se určuje, ve kterém prohlížeči se budou jak počítat šířky a velikosti písma. Je to velmi pošahaná a nepříjemná situace, která vznikla historickým vývojem. O přepínání módů prohlížečů.

Doctype se vyvinulo ze standardu značkovacích jazyků SGML a XML kterým bylo nutné strukturovanou formou říci, že tento dokument je HTML dokument. To je ta formalita.

Syntaxe doctype je poněkud podivná. Omezím se na pár příkladů:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<!doctype html>

Na místě řetězce "strict" se někdy užívají řetězce "draft" nebo "final". Pokud nemáte syntaxi souboru zkontrolovanou parserem podle příslušného DTD, raději do <!doctype> nepište vůbec nic než html (viz poslední příklad).

Já osobně už pár let uvádím doctype

<!doctype html>

Tento zápis doctype jednak přepne dokument do standardního módu, jednak se formálně hlásí k HTML 5 (což je mi jedno, ať se hlásí třeba k Marťanům, hlavně když se dokument vykreslí správně). Sám to užívám, protože to je jednoduché.

Více informací a příkladů o Doctype.

Příklad

Klasický HTML soubor může vypadat takto:

<!doctype html>

<html>
    <head>
        obsah hlavičky
    </head>

    <body>
        obsah těla
    </body>
</html>

Strukturní tagy z HTML 5

Naprosto zbytečné strukturní tagy z HTML 5 uvádím na samostatné stránce. Tagy <article>, <main>, <header>, <footer> a podobné.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.