XHTML – pravidla pro chování interpretů

Vysvětleme si několik pravidel pro chování interpretů XHTML – především těch, které se týkají nakládání s neznámými prvky a bílými místy v kódu stránky (znaky jako mezera, řádkový zlom apod.).

Každý interpret XHTML, který chce vyhovovat normě XHTML, musí dodržovat těchto několik pravidel:

1. Musí zkontrolovat správnou strukturovanost dokumentu – tj. jestli má každý element i svou uzavírací část, celý obsah dokumentu je obsažen uvnitř elementu html a nedochází-li ke křížení elementů (každý element včetně svého obsahu musí být celý uvnitř svého rodičovského elementu, tzn. <p><strong></p></strong> je špatně, správně je <p><strong></strong></p>). Interpret musí poté také zkontrolovat, jestli dokument vyhovuje tomu DTD, které je deklarováno v Deklaraci typu dokumentu (viz předchozí díly seriálu).

2. Všechny prvky XHTML musí interpretovat přesně podle specifikací (X)HTML (jak také jinak, že :).

3. Pokud interpretuje dokument pouze jako XML, měl by jako identifikátory fragmentů rozeznávat pouze atributy typu ID, v XHTML tedy konkrétní atribut se jménem id (pokud příliš nerozumíte, o čem zde mluvím, nemusíte si s tím lámat hlavu – u XHTML pro běžné použití to není důležité).

4. Nyní přicházejí čtyři velmi důležitá pravidla, která definují chování interpretů v případě, že nerozeznají nějaký prvek XHTML. Proto byste jim měli věnovat náležitou pozornost:

1. Pokud se interpret XHTML setká s elementem, který nezná, musí interpretovat jeho obsah.
2. Pokud se interpret XHTML setká s atributem, který nezná, musí ignorovat celou jeho definici (jméno i hodnotu).
3. Pokud se interpret XHTML setká s hodnotou atributu, který nezná, musí u tohoto atributu použít základní (defaultní) hodnotu – tj. chovat se, jako by atribut uveden nebyl.
4. Pokud se interpret XHTML setká se znakovou entitou, která není deklarovaná ve specifikaci XHTML, XML (to může být např. i kvůli tomu, že interpret nečetl externí DTD) ani jinde (např. v interním DTD), musí ji celou opsat. Pokud bychom si tedy uvedli ve zdrojovém kódu stránky entitu &mojeSuperEntita; a nikde ji nedeklarovali, ve výstupu prohlížeče by se objevila přesně v tomto tvaru.

V těchto třech pravidlech je ukryt jeden ze základních znaků XHTML – interpret XHTML nenahlásí chybu v momentě, kdy narazí na neznámý prvek, ale jednoduše ho ignoruje (nebo opíše v případě znakové entity). Tím máte zajištěno, že pokud použijete prvek, který je definován teprve v nedávné specifikaci, a starší prohlížeče ho tím pádem neznají, nebude to znamenat zatuhnutí prohlížeče ani nic jiného (tedy až na to, že ho prohlížeč nepoužije tak, jak se udává ve specifikaci, ale to je jasné).

Hlavně díky tomu ale můžete používat sémantické elementy a atributy, prvky z jiných XML-kompatibilních jazyků (pomocí jmenných prostorů), můžete vytvářet a používat svá vlastní XHTML-kompatibilní DTD (např. pomocí modulů), a to všechno bez obav, že tím způsobíte chyby v prohlížeči. Abychom ale nezůstali jen u teorie, uvažte následující případ:

<dl>
<dt><e-shop:výrobek e-shop:kategorie=“Zahradnictví“>Sekačka na trávu</e-shop:výrobek></dt>
<dd><e-shop:popis-výrobku>Sekačka na trávu s benzinovým motorem, nízkou spotřebou a velkým záběrem – jasná koupě.</e-shop:popis-výrobku></dd>
</dl>

Poznámka: V této ukázce, stejně jako ve všech ostatních dnešních ukázkách, si uvádíme pro stručnost pouze krátký výsek ze stránky – chybí nám zde XML deklarace, Deklarace typu dokumentu a elementy html, head, title a body, což jsou prvky pro každou XHTML stránku povinné.

S významem elementů uvedených v ukázce si nemusíte příliš lámat hlavu, dl, dt a dd slouží k vytváření výčtů (ještě se jimi budeme zabývat) a jsou součástí specifikace XHTML. Naopak prvky začínající e-shop: nejsou součástí specifikace XHTML, mohly by být pouze součástí nějaké sady sémantických značek, které lze do XHTML začlenit (ty z ukázky jsem si ale vymyslel). Zajímavé pro nás nyní je, jak by se zachoval interpret XHTML u stránky obsahující tento kód. Jak asi správně tušíte, ignoroval by elementy a atributy e-shop:, protože je nezná, a zobrazil by celý obsah mezi nimi jako výčet, díky elementům dl, dt a dd.

5. Pokud se interpret XHTML setká se znakem, který rozezná, ale nemůže ho vykreslit (např. kvůli absenci ve fontech nainstalovaných v systému uživatele), může ho nahradit znakem se stejným významem nebo symbolem, který dá uživateli najevo, že znak nelze vykreslit. Toto se v našich podmínkách týká např. jazyků, které používají jiné písmo než latinku (arabština, čínština, ruština).

6. Poslední pravidlo se týká nakládání s tzv. bílými místy, tedy znaky mezera, tabulátor a znaky pro zlom řádky (již sem ale nepatří např. rozličné typografické mezery jako en-space, em-space apod.). Pokud jsou tyto znaky uvnitř elementu s atributem xml:space nastaveným na preserve (což jsou elementy style a script, které mají tento atribut nastaven napevno – sami jej v dokumentu použít nemůžeme) nebo uvnitř elementu pre, musí interpret odstranit bílá místa na začátku a konci obsahu elementu a všechny ostatní nechat a interpretovat tak, jak jsou. Ve všech ostatních případech musí uplatnit tato pravidla:

1. Všechna bílá místa obklopující blokové elementy musí být odstraněna (pokud nevíte, co jsou to blokové elementy, nezoufejte – hned si všechno vysvětlíme).
2. Komentáře jsou odstraněny a neovlivňují nakládání s mezerami.
3. Bílá místa na začátcích a koncích obsahů blokových elementů musí být odstraněna.
4. Posuvy řádků uvnitř blokových elementů musí být nahrazeny mezerou.
5. Více bílých znaků bezprostředně za sebou musí být nahrazeno jedinou mezerou.
6. Interpret XHTML musí vykreslit dokument v závislosti na jazyce, v jakém je jeho obsah napsán.

Nejdříve tedy k tomu, co jsou to blokové elementy. Jsou to ty elementy, které začínají většinou na novém řádku. Obsah stránky nacházející se za nimi následuje také až na novém řádku – vytvářejí tedy na stránce obdélníkové bloky. Podívejte se na příklad:

Lorem ipsum…
<div>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit. Duis volutpat. Duis leo. Donec laoreet iaculis quam. Vivamus ipsum. Vestibulum feugiat,</span> neque pretium aliquet pulvinar, nunc diam fringilla mi, sit amet pulvinar nibh enim vel ipsum.</div>
Lorem ipsum…

Pro teď nám bude stačit, že element div uzavírá určitý blok obsahu a je blokový, zatímco element span má tu samou funkci, ale je řádkový (inline). Nyní se podívejme, jak by se náš příklad vykreslil uvnitř nějaké konkrétní stránky – pro názornost jsem příklad nechal orámovat šedivě, element div z našeho příkladu červeně, a element span modře:

Element div začíná i končí novým řádkem, zatímco span se rozprostírá přes dva řádky, ale nevytváří souvislý útvar (nachází se v normálním toku textu).

Většina elementů v XHTML je buď blokových nebo řádkových, navíc se to dá ještě změnit pomocí CSS (kaskádových stylů). K tomuto se vztahuje ještě jedno pravidlo, a sice, že obsahem řádkového elementu nesmí být nikdy blokový element (teď myslím řádkové elementy podle XHTML – změna zobrazení elementu na blokový v CSS na to nemá vliv) – tedy např. uvnitř elementu span se nesmí nacházet element div. Povolený obsah elementu je definován pomocí DTD, ale toto pravidlo je leckdy užitečnou pomůckou, protože vždy platí.

Nyní se již budeme věnovat pravidlům o používání mezer. Mj. z nich vyplývá, že jakákoli sekvence bílých znaků za sebou bude redukována na jedinou mezeru. Následující dva příklady tedy budou interpretovány stejně (element p slouží k vytvoření odstavce, ještě se jím budeme zabývat):

<p>text          druhý text       třetí text
čtvrtý text</p>
<p>text druhý text třetí text čtvrtý text</p>

Dále z nich vyplývá, že bílá místa kolem blokových elementů budou kompletně odstraněna. My již víme, že blokovým elementem je např. div, proto si na něm ukážeme opět dva příklady, které budou ve výsledku stejné:

text
      <div>
        text
      </div>
text<div>text</div>

Třetí příklad se týká bílých míst kolem komentářů a řádkových elementů (v našem příkladu je to element strong) – oba příklady budou ve výsledku opět identické:

<p>Lorem ipsum <strong> dolor </strong> sit amet, consectetuer <!– Tady je komentář –> adipiscing elit.</p>
<p>Lorem ipsum <strong>dolor </strong>sit amet, consectetuer adipiscing elit.</p>

Jak vidíte, komentář vůbec neovlivňuje nakládání s bílými místy, interpret se chová, jako by zde nebyl. Podobná je situace u řádkových elementů, kdy se narozdíl od blokových elementů neodstraňují všechna bílá místa, ale ponechá se první z nich a přemění se na mezeru (interpret se tedy také chová jako by zde element nebyl), všechna ostatní jsou odstraněna.

Možná se teď ptáte, k čemu je toto nakládání s bílými místy dobré. Díky němu můžete v kódu udržovat pořádek novými řádkami, mezerami a tabulátory, aniž byste ovlivnili interpretaci.

Za této situace bychom se ale dostali do problémů, kdykoli bychom chtěli na stránce vytvořit dvě mezery za sebou nebo zlom řádku. Pro tyto účely můžeme v XHTML použít několik speciálních prvků:

• pre – cokoli umístíte do tohoto blokového elementu, bude obsahovat bílá místa přesně tak, jako v kódu (tento element ještě budeme probírat).
•   – tzv. nezlomitelná mezera, má stejnou funkci i zobrazení jako obyčejná mezera (vytvořená stisknutím mezerníku), ale není odstraňována jako ostatní bílá místa. Používá se i tehdy, když nechceme, aby v místě konkrétní mezery byl zalomen řádek v prohlížeči (protože prohlížeč delší texty automaticky rozdělí na řádky tak, aby se vešly na šířku do okna prohlížeče – žádný prohlížeč ještě neovládá dělení slov, a proto k rozdělení na řádky dochází vždy v místech mezer).
• br – tam, kam ho vložíme, se skočí na nový řádek (také se jím ještě budeme zabývat).
• white-space – touto vlastností můžeme mj. kterémukoli blokovému elementu nastavit chování stejné jako má element pre, tato vlastnost ale může být prohlížeči ignorována (což se bohužel děje u nejrozšířenějšího prohlížeče Internet Exploreru, který až do dnešní šesté verze tuto vlastnost nepodporuje).

Pokud tedy budeme chtít vložit tři mezery vedle sebe, můžeme to udělat několika způsoby:

<p>text1 &nbsp; text2</p> <!– Mezery kolem &nbsp; nebudou odstraněny, protože &nbsp; není považováno za bílé místo, takové mezery jsou považovány za osamocené. –>
<p>text1&nbsp;&nbsp; text2</p>
<p>text1 &nbsp;&nbsp;text2</p>
<p>text1&nbsp;&nbsp;&nbsp;text2</p> <!– Řádek nebude v prohlížeči zalomen mezi „text1“ a „text2“. –>

Řádkový zlom bychom udělali takto:

<p>text1<br />
text2</p>

Pokud máme delší texty, kde chceme zanechat rozložení bílých míst, je lepší ho uzavřít ho do elementu pre, než ho ručně celý upravovat:

<pre> text1 text2 text3 text4 </pre>

Ještě bych se rád zmínil o tom, jak se to má s bílými místy uvnitř hodnot atributů. Platí, že bílá místa na začátku a na konci hodnoty jsou odstraněna a ostatní bílá místa uvnitř hodnoty redukována na jedinou mezeru. Navíc se doporučuje nepoužívat zde zlomy řádků a více bílých míst za sebou, protože se interpreti XHTML chovají v takových případech různě.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.