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).
| 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:
- Nevnořujte poznámky: <!-- toto je poznámka <!-- toto také --> ale tohle už ne! -->
- Uvnitř tagů <style> a <script> se obsah balí do poznámek, aby byl ignorován staršími prohlížeči. Nové prohlížeče poznámku ignorují a správně interpretují obsah jako styl nebo skript, nikoli tedy jako HTML. Obalování do poznámek je už dnes (aktualizace 2004) zcela zbytečné.
- Některé programy a skripty používají poznámky na vkládání různých věcí. Za znak poznámky se pak dává nějaký řetězec. Např.: <!--# je SSI vložka -->, <!--webbot je vložka FrontPage -->. Prohlížeče si jich ale nevšímají, což je správně.
- Specifikace říká, že v ukončení poznámky, tedy v sekvenci --> může být mezera nebo jiné znaky. Takže toto: -- > je také konec poznámky. Dávejte si pozor, abyste do html poznámky nepsali dvě pomlčky za sebou -- protože potom stačí jeden pravý zobáček > a tohle už pak není poznámka.
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
