Základní pravidla jazyka XML (byla stručně představena v předchozím článku) jsou zároveň pravidly XHTML. Pokud už znáte jazyk HTML, přečtěte si pozorně tento článek a zjistíte, jaké jsou mezi HTML a XHTML rozdíly a nač si v XHTML musíte dát na rozdíl od HTML pozor. Pokud HTML neznáte, čtěte dále ještě pozorněji.
Celý kód stránek HTML a XHTML se skládá z prvků (elementů). Představte si prvek jako nádobu, ve které se přenáší část stránky. Zde platí, že cokoliv je obsaženo v prvku, bere na sebe jeho vlastnosti. Například chceme-li označit na stránce nějaký text jako nadpis, uzavřeme ho do nadpisového prvku:
<h1> text označený jako nadpis </h1>
Prvek se skládá z počáteční značky, značky koncové a ze samotného obsahu prvku. Každá značka je uzavřena do hranatých závorek. Například počáteční značka pro odstavec vypadá takto:
<p>
U koncové značky je rozdíl v tom, že před jménem značky stojí zpětné lomítko:
</p>.
Obsah prvku je umístěn vždy mezi počáteční a koncovou značku. Jednoduchý odstavec by vypadal tedy nějak takhle:
<p> Tohle je odstavec. </p>
V XHTML existují zvláštní druhy prvků, které jsou tvořeny jen jednou značkou. Tyto prvky se nazývají prvky s prázdným obsahem (též nepárové prvky), neboť neobklopují žádný obsah (jsou tvořeny jen jednou značkou). Těmto prvkům vkládáme zpětné lomítko těsně před jejich ukončením. Dobrým příkladem prvku s prázdným obsahem je prvek ukončení řádku (ekvivalent prostého „Enteru“ v textovém editoru):
<br />
U prvků s prázdným obsahem je důležité před koncovým lomítkem napsat mezeru!
správně: <br />
špatně: <br/>
Když prohlížeč uvidí lomítko, pozná, že tento prvek je ukončen, i přestože k jeho ukončení nebyla použita samostatná koncová značka.
Další správnou zato pracnější variantou je jednat s takovýmto prvkem jako s párovým, ale žádný obsah do něj nevkládat:
<br> </br>
S touto variantou však mohou mít některé prohlížeče problémy, a proto je lepší používat úspornou variantu <značka />. Na rozdíl od HTML musí být v XHTML každý prvek řádně uzavřen!
Atributy (neboli vlastnosti) jsou další důležitou součástí kódu XHTML. Atributy se používají pro definování vlastností prvku a nachází se uvnitř počáteční značky. Například k vložení obrázku na stránku se užívá prvek s prázdným obsahem img a ke specifikaci jeho rozměrů slouží atributy height (výška) a width (šířka).
<img height="500" width="400" />
Takto vložený obrázek by se zobrazil velikostí 500x400 pixelů. Čísla 500 a 400 v tomto případě představují hodnoty atributů. Všimněte si, že za každým atributem následuje znamínko rovná se a pak přijde na řadu vámi zvolená hodnota uzavřená do horních uvozovek. (Výše zmíněný příklad je pouze ilustrační - ve skutečnosti by nefungoval, neboť prvek obrázku postrádá důležitý atribut, který udává, který obrázek má být na stránku vložen.)
Atributy spolu s jejich hodnotami doplňují prvky. Je to něco jako s podstatnými a přídavnými jmény. Podstatné jméno něco pojmenovává a přídavné jméno to popisuje. Jak by to vypadalo, kdybychom pomocí XHTML chtěli identifikovat člověka s hnědými vlasy? Třeba takhle:
<vlasy barva="hnědá"> Hnědovlasý člověk </vlasy>
barva je zde atribut prvku vlasy a hnědá je vybraná hodnota atributu barva. Tento prvek by v XHTML samozřejmě nefungoval, jelikož XHTML uvedené značky nezná, ale je to dobrý názorný příklad.
Některé prvky mají povinné atributy, jiné žádné atributy obsahovat nemusí. Na rozdíl od HTML, musí mít v XHTML každý atribut přiřazen hodnotu a každá hodnota musí být uzavřena do uvozovek!
Složení prvku je znázorněno na obrázku .
V XHTML musí být všechny značky a atributy psány malými písmeny. Jazyk HTML takovéto požadavky neměl, ale XHTML ano. Pro jazyk HTML jsou například <h1> a <H1> stejné značky, ale pro jazyk XHTML naprosto odlišné. Značku <h1> tedy XHTML rozpozná, ale <H1> ne.
I na krátký oddíl XHTML stránky použijeme více než jeden prvek. Proto je důležité porozumět vnořování prvků. Vnořování označuje skutečnost, že jeden prvek obsahuje další prvek (či prvky) a ty mohou obsahovat další. Je to vlastně stejné jako se závorkami v matematických příkladech. Závorka, která v příkladu začíná jako poslední, musí být uzavřena jako první a závorka, která začíná první, musí být uzavřena jako poslední. Například:
(((4*8)+(9*3))2 +7)3
Když zapomeneme nějakou závorku uzavřít nebo ji uzavřeme dřív nebo později než máme, udělá nám to v příkladu pěkný zmatek a můžeme si být jistí, že dojdeme ke špatnému výsledku.
Také XHTML prvek, který je poslední otevřen, musí být první uzavřen a prvek, který je první otevřen, musí být poslední uzavřen. Například takto:
<a> <b> <c> </c> </b> </a>
Je snazší udržet si přehled, když jednotlivé prvky odsadíme podle stupně vnoření. Takto je to správně:
<a>
<b>
<c>
</c>
</b>
</a>
Následující prvky jsou vnořeny chybně:
<a>
<b>
</a>
<c>
</b>
</c>
Správné vnořování prvků je základ! Jazyk HTML odpouštěl některé nedostatky v této oblasti, ale XHTML ne. Je lepší kód vždy několikrát překontrolovat a eliminovat možné chyby.
V XML musí existovat samostatný prvek, který obepíná celé tělo dokumentu. V případě XHTML je tímto prvkem html:
<html>
...
Obsahem kořenového prvku html
je celý kód stránky. Jak takový
kód napsat se brzy naučíme.
...
</html>
Každý XML i XHTML dokument lze chápat jako stromovou strukturu s jedním kořenovým prvkem (v případě XHTML jím je již zmíněný html), z něhož vycházejí větve (obsahuje další prvky). Tyto větve se samozřejmě mohou dále větvit (obsahovat další a další prvky).
Ještě výstižnější je přirovnání k situaci mezi rodiči a dětmi. Prvek html je prvním rodičem - dalo by se říci zakladatelem rodu. Každý prvek, který je v něm obsažen, je jeho dítětem a html je mu rodičem. Každý prvek (kromě kořenového html) potřebuje rodiče a každé dítě je potenciálním rodičem dalších prvků. XHTML má pevně daná pravidla, určující jaký prvek smí být jakému prvku rodičem a naopak.
DTD znamená Document Type Definition (česky Definice typu dokumentu) a jedná se o jazyk pro popis struktury SGML či XML dokumentu. Dokument napsaný v jazyce DTD se nazývá DTD dokument, zkráceně též DTD. V dokumentu DTD je obsažena veškerá slovní zásoba a definice pravidel syntaxe daného značkovacího jazyka - vlastně takový slovník a příručka gramatiky v jednom. Je zde dopodrobna popsán každý prvek daného jazyka - jeho jméno, zda se jedná o prvek s prázdným obsahem, do jakého prvku může být vnořen, jaké prvky mohou být vnořeny do něho, jaké atributy smí či musí obsahovat, jaké jsou možné hodnoty těchto atributů a mnohé další. Každá verze jazyka XHTML (např. XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML1.1) a HTML (např. HTML 3.2, HTML 4.01) má svůj zvláštní DTD dokument. Tyto dokumenty se mohou s ostatními v lecčems shodovat a v jiném zas lišit.
Znáte-li HTML, pak si s dodržováním výše zmíněných pravidel většinou vystačíte při tvorbě dokumentu XHTML verze 1.0 Transitional. V dalších verzích XHTML jsou však již zakázány některé prvky a atributy, které byly v HTML povoleny. S každou novější verzí XHTML je zakázáno stále více prvků a atributů nedeskriptivního charakteru - tzn. prvků a atributů, zabývajících se pouze vzhledem.
Zda je kód vaší stránky napsán "gramaticky správně" - tzn. zda se shoduje s pravidly W3C pro danou verzi XHTML, můžete snadno zjistit pomocí validátoru (viz článek "Validátory").