Jak funguje HTML

…aneb i HTML má svá zákoutí!
10. 3. 2006

Pošlete-li stránku jako text/html můžete se spolehnout na to, že prohlížeč bude dodržovat jistá pravidla, kdy si bude domýšlet různé značky. Vámi napsaný zdrojový kód stránky ještě nutně nemusí být konečný kód pro prohlížeč. Specifikace HTML totiž obsahuje několik značek, které jsou „optional“ (neboli jsou nepovinné) a které se tedy uvádět nemusí, protože prohlížeč snadno pozná, kdy je doplnit. Jedná se především o ukončovací značky jako například </li>. Neboli v praxi – máte li nějaký seznam a neukončujete jednotlivé položky značkou </li>, jak prohlížeč pozná, kdy má danou značku ukončit? Ukončí ji ve chvíli, kdy narazí na element, který není v odrážce povolen. Tedy nejčastěji další odrážka. Ve chvíli, kdy prohlížeč narazí na druhou značku <li>, automaticky doplní i potřebnou značku </li>. I HTML musí být správně formátované tedy žádné neukončené značky, pouze pokud se o to nepostará přímo webdesigner, dodělá to prohlížeč. Takže vezměme si takovýto příklad:

<ul>
<li>hrušky
<li>jablka
<li><span>švestka</span>

</ul>

A jak to nakonec uvidí prohlížeč? Vykreslí první odrážku (hrušky), kouká kouká, další element <li> – odrážka nemůže být obsažena sama v sobě – proto okamžitě odrážku ukončí </li> a začne vykreslovat druhou odrážku. Opět narazí na třetí odrážku a ukončí druhou odrážku. Vykresluje třetí odrážku, <span> je povolený obsah elementu <li> tudíž se nic ukončovat nebude a teprve až narazí na konec seznamu, doplní i poslední </li> (končí-li seznam, tak s největší pravděpodobností také končí odrážka, že ano). Takže prohlížeč nakonec vykresluje tento kód:

<ul>
<li>hrušky</li>
<li>jablka</li>
<li><span>švestka</span></li>

</ul>

Nejčastěji bývají nepovinné značky ukončovány samy sebou (to byl třeba ten příklad s </li>), ale mohou být ukončeny jakýmkoliv elementem, který tam nemá co dělat. Jako příklad mohou posloužit odstavce, které také mají nepovinnou ukončovací značku. Element <p> je sice blokový, ale sám blokové elementy obsahovat nemůže. Tudíž prohlížeč ukončí odstavec ve chvíli, kdy v jeho obsahu nalezne kupříkladu nějaký blokový element. Takže když se do jednoho odstavce pokusíte zanořit další, nepovede se vám to, prohlížeč nejprve první odstavec uzavře a vytvoří druhý. Stejně tak uzavře odstavec, pokud se do něj pokusíte vnořit třeba <div>. Takže opět příklad:

<p>První odstavec

<p><strong>Druhý</strong> odstavec
<div id="footer">
Copyright 2006
</div>

Takže jak to uvidí prohlížeč? Začne vykreslovat první odstavec, narazí na další značku <p> a tak okamžitě chytře ukončí první odstavec a začne poté vykreslovat druhý. <strong> normálně vykreslí, jedná se o povolený obsah odstavce, ale až narazí na <div>, který také v odstavci nemá co dělat, ukončí druhý odstavec a začne vykreslovat patičku. Na konci tedy prohlížeč vidí takovýto kód:

<p>První odstavec</p>
<p><strong>Druhý</strong> odstavec</p>

<div id="footer">
Copyright 2006
</div>

Elementy, které mají nepovinnou ukončovací značku jsou tyto: colgroup, dd, dt, li, option, p, td, tfoot, th, thead a tr. Pokud se tedy v těchto elementech vyskytne nějaký další prvek, který tam nemá co dělat, prohlížeč si automaticky domyslí ukončovací značku a to i proti vaší vůli – pokud byste chtěli například zanořit nadpis do odstavce, neuspějete, protože v odstavci nadpis být nemůže.

<p>
<h1>nadpis</h1>
</p>

Protože nadpis je blokový element, prohlížeč automaticky doplní před nadpis ukončovací značku odstavce </p> a nadpis bude brán sám o sobě, „druhá“ značka </p> je tam tedy zbytečná. Prohlížeč by tento kód tedy viděl takto:

<p></p>
<h1>nadpis</h1>
</p>

Zde bych ještě udělal drobnou vsuvku a zmínil se krátce o XHTML. V XHTML dokumentech se žádné značky nedomýšlejí, protože o to, aby byl dokument správně formátovaný se musí postarat již webdesigner. Proto budou i výstupy validátory jiné. Zvalidujeme-li ten kód s nadpisem vloženým do odstavce, HTML validátor vyhodí chybu právě na tu druhou ukončovací značku, která je tam navíc („end tag for element "P“ which is not open"). Ovšem na stejný kód pod hlavičkou XHTML vyhodí validátor jinou chybu – jelikož XHTML si žádné ukončovací značky nedomýšlí, nedomyslí si ani </p> před nadpisem a skutečně nyní vnímá daný kód jako nadpis v odstavci. Ovšem odstavec pořád nemá ve svém povoleném obsahu nadpis, proto validátor oznámí, že nadpis nemá v odstavci co dělat („document type does not allow element "h1“ here"). Zpět k HTML.

Je důležité si uvědomit, že prohlížeč si domýšlí ukončovací značky pouze u těch elementů, které ji mají definovanou jako nepovinnou. Neplatí, že si domyslí ukončovací značku u každého řádkového prvku, když do něj vložíte blokový prvek (poznámka: ona to tak trochu není pravda, co jsem teď napsal, ale je to na delší povídání, v příštím článku nevalidní zanoření blokového elementu do řádkového rozeberu podrobněji. Prozatím předpokládejme, že se prostě neukončí). Takže můžete s klidným svědomím neukončovat odrážky v seznamu, ale pokud chcete mít (pouze) jednu odrážku zvýrazněnou, musíte element <strong> také ukončit:

<ul>
<li>první položka

<li><strong>druhá položka
<li>třetí položka
<li>čtvrtá položka
</ul>

Element <strong> nemá volitelnou ukončovací značku, tudíž si ji tam prohlížeč nedomyslí a zvýrazněná bude i ta třetí a čtvrtá položka. Správně by ten kód měl pochopitelně vypadat takto:

<ul>
<li>první položka
<li><strong>druhá položka</strong>
<li>třetí položka

<li>čtvrtá položka
</ul>

Prozatím jsem se zmiňval o elementech, které mají volitelnou ukončovací značku. Ale existují i elementy, které mají volitelnou počáteční značku. Jedná se o elementy <html>, <head>, <body> a <tbody>. Volitelná počáteční značka v praxi znamená, že i když do kódu tyto značky nenapíšete, prohlížeč si je tam sám domyslí, obdobně jako ukončovací značky </li>. V každém HTML dokumentu musí být elementy <html>, <head> a <body> přítomny, stejně tak element <tbody> musí být obsažen je obsažen v každé běžné tabulce. Mimochodem s tím souvisí i to, že pokud tyto elementy do kódu nenapíšu, stejně je mohu normálně stylovat (viz třeba kaskádová hádanka, kde styluji element <body>, aniž bych ho psal do kódu).

Jelikož <html> je kořenový element , musí obalovat celou stránku. Pokud tedy tuto značku do dokumentu nevložíte, ve chvíli, kdy prohlížeč narazí na první element či přímo znak, domyslí si tuto značku a pokračuje dále ve vykreslování. Každý dokument musí obsahovat element <title>. Pokud neuvedete ani značku <head>, ve chvíli, kdy prohlížeč narazí na element <title> (nebo na jiný element, který se běžně vyskytuje v hlavičce), domyslí si značku <head> a pokračuje ve vykreslování. Jakmile narazí na element, který se může vyskytnout pouze v elementu <body> nebo na prostý text, domyslí si značku <body> (a zároveň uzavře havičku) a pokračuje ve vykreslování. Na konci dokumentu potom již v klidu uzavře </body> a </html>. Mějme tedy následující kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>jednoduchá stránka</title>

to koukáte

Zápis je pochopitelně validní. Prohlížeč si všechny elementy domyslí sám, takže nakonec vidí takovýto kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>jednoduchá stránka</title>
</head>
<body>
to koukáte
</body>

</html>

Že to funguje i v praxi se můžete přesvědčit na tomto webu, všechny tři značky jsem z kódu vyhodil a přece to funguje. Přitom se nespoléháte na nějaké milosrdenství prohlížeče, že ty značky domýšlí, prohlížeč je musí domýšlet, není to jeho „chyba“, je to spíš jeho „princip“. A o tom, jak prohlížeče vidí některé pestrobarevné části kódu zase někdy příště.