Jak na dokonalé XHTML

…aneb kdo chce tam, pomožme mu kam!
27. 3. 2006

Chcete-li úspěšně přejít ze staršího jazyka HTML na novější verzi XHTML se všemi náležitostmi, které se s tímto přechodem pojí, určitě čtěte dál. XHTML definuje zcela nový jazyk pro tvorbu webových stránek na bázi XML (XHTML je reformulace HTML do XML). S tím se váže několik pravidel a různých strastí. Takže nejprve základní rozdíly oproti HTML 4.

  • všechny značky musí být uzavřené. V HTML jste nemuseli psát do kódu značky jako třeba </li>, protože si to prohlížeč sám snadno domyslel. V XHTML si prohlížeč nic nedomýšlí, tudíž všechny značky, které byly v HTML 4.01 nepovinné jsou v XHTML povinné (vyjma značky <tbody>)
  • všechny značky a atributy jsou definovány malými písmeny a protože XHTML je case-sensitive, musíte tedy všechny značky a atributy psát malými písmeny. <HTML> => toto je v XHTML špatně, <html> => toto je správně. Samozřejmě si to můžete sami předefinovat.
  • všechny hodnoty atributů musí být bezpodmínečně v uvozovkách nebo apostrofech
  • v XHTML není povolena minimalizace atributů, tento zápis je špatně: <dl compact>. Tento je správně: <dl compact="compact">
  • všechny prázdné elementy musí být ukončeny – místo <br> tedy patří zápis <br></br> nebo zkráceně <br/>
  • bílé znaky na začátku a na konci hodnoty atributu se vymazávají a pokud se (někde uprostřed – ne na kraji) v hodnotě atributu vyskytuje více než jedna mezera, smrskne se právě na jednu
  • pokud se v elementu <script> vyskytuje znak „&“ nebo závorky „<“ či „>“, musí být obsah elementu ještě obalen v <![CDATA[…obsah elementu… ]]>
  • v HTML se částečné identifikátory dělaly za pomocí atributu name, v XHTML k tomu slouží atribut id
  • pokud má atribut nějaké pevné hodnoty (například center u atributu align), musí být tato hodnota psána malými písmeny. Stejně tak musíte psát malými písmeny, pokud odkazujete na entity hexadecimální hodnotou (např. &#xnn;)

Rozdíly máme za sebou, ale to pochopitelně není všechno. Ještě se podíváme co musí obsahovat striktně shodný XHTML dokument.

  • v prvé řadě musí dokument odpovídat jednomu z daných DTD
  • zdrojový kód musí obsahovat povinnou značku <html>, která musí obalovat celý obsah stránky (tj. musí být kořenovým elementem)
  • kořenový element (tedy <html>) musí odkazovat na jmenný prostor pomocí atributu xmlns. Odkaz musí být směřován na http://www.w3.org/1999/xhtml
  • v každém dokumentu musí být ještě před značkou <html> jedna ze tří daných deklarací <!DOCTYPE> a není povolené přepisovat parametrické entity

XHTML dokument by také měl obsahovat XML deklarace určující kódování a verzi XML. Avšak není to nutnost, pokud píšete v UTF nebo určujete kódování například http hlavičkou.

Hurá, v tuto chvíli je náš XHTML dokument shodným XHTML dokumentem a zároveň jsme opravili všechny nesrovnalosti vzhledem k HTML. To ovšem stále není všechno. Pokud byste v tuto chvíli vypustili stránku do světa, všechny prohlížeče by ji vykreslovali jako obyčejné HTML, nikoli jako XHTML. Což samozřejmě nechceme, nedělali jsme toliko změn, aby prohlížeč nakonec stránku parsoval jako ono staromódní HTML. A to kouzlo, které prohlížeči poví, aby se stránkou nakládal jako s XHTML dokumentem je MIME typ. Takže jenom stručně. HTML stránky se standardně posílají jako text/html, XHTML běžně jako application/xhtml+xml (jsou povolené i jiné hodnoty). V tuto chvíli tedy i přes veškeré úpravy, které jste provedli, pracujete s HTML stránkou. Stačí ovšem uložit stránku s příponou .xhtml a server by ji měl odeslat s požadovanou hlavičkou a hopla – XHTML je na světě (samozřejmě si hlavičky můžete poslat sami).

V tuto chvíli byste měli být připraveni na některé nemilé věci, které se ovšem dají velice snadno překousnout. Takže hlavně – váš dokument musí být bezpodmínečně bezchybný, musí být well-formed (ale nemusí být přitom validní). V zásadě to znamená mít správně zanořené všechny elementy, všechny také musí být uzavřené, všechny hodnoty atributů musí být v uvozovkách, nemíte mít na stránce nedefinované entity, stránka musí obsahovat kořenový element a znaky „&“ a „<“ musíte zapisovat příslušnými entitami. Splňovat těchto pár bodů je opravdu povinnost, není to pro dobrý pocit webmastera, protože pokud prohlížeč narazí na byť jen jedinou chybu, vyhodí dračí chybu a stránku nevykreslí a uživatel si může přečíst hlášení, že se na stránce vyskytl neukončený element <br>, což ho dozajista potěší. S tímto souvisí ještě jedna taková drobnost a sice, že se stránka začne načítat, až když prohlížeč stáhne a zkontroluje XHTML kód, protože nemůže vědět, jestli se někde na stránce nevyskytuje chyba.

Pokud vám tedy tyto drobnosti nevadí, můžete směle poslat stránku jako application/xhtml+xml a kochat se svou první skutečnou XHTML stránkou. Samozřejmě můžete okamžitě začít využívat nepřeberné množství výhod XHTML jako třeba rozšíření o další jazyky. Jistě budete prahnout po moderním SVG – popis vektorové grafiky pomocí XML. Nuže směle do toho! XHTML je přímo stavěné na to, abyste ho mohli takto snadno rozšířit. Stejně tak pokud byste potřebovali dostat do kódu nějaký ten matematický zápis, můžete si oddechnout, protože zde máme jazyk MathML, který je určen právě pro matematikou posedlé webmastery.

Doufám, že jste si užili nově uvolněné euforie, ale je čas vrátit se zpět do reality. Nenápadně si zkuste stránku prohlédnout v prohlížeči Internet Explorer a nelekněte se, jestli vám nabídne stránku ke stáhnutí. Nic se neděje, všechno je v pořádku, MSIE prostě MIME typ apllication/xhtml+xml nezná. Tak co teď? Nebojte, konsorcium i na tuto možnost myslelo, a tak letmým náhledem do specifikace zjistíte, že pokud splníte směrnici kompatibility, můžete XHTML stránku posílat s MIME typem text/html jako staré neučesané HTML. Ovšem budete se muset smířit s tím, že již nebudete moci využívat technologie jako SVG či MathML. I když šance tady je stále – můžete application/xhtml+xml poslat pouze prohlížečům, které ho znají a ostatním poslat text/html. Návod najdete u Hulána. Takže hromádka z karet se prozatím nezbortila celá, ještě pár karet drží pohromadě.

Ovšem pokud alespoň jednomu prohlížeči pošlete XHTML dokument jako text/html, musí splňovat již výše zmiňovanou směrnici kompatibility. Nuže pusťte se do ni a neberte to, prosím, jako další zbytečnou práci, kterou nám konsorcium staví do cesty, není to legrace nechávat vykreslovat XHTML jako HTML. Takže vezměmě to bod po bodu:

  • nevkládejte do stránek žádné XML deklarace, některé prohlížeče je mohou interpretovat jako běžný text (povšimněte si prosím, že v tuto chvíli musíte mít stránku v kódování UTF nebo určovat jiné kódování zasláním příslušné http hlavičky).
  • v XHTML musí být všechny elementy ukončené, tedy elementy, které byly v HTML brány jako nepárové, třeba <br>.V XHTML je tedy správný zápis <br></br>. Ovšem tento zápis není zrovna šetrný vůči HTML prohlížečům, tudíž musíte používat zkrácený zápis <br/> a ještě ke všemu musíte před lomítko vrazit mezeru. Tedy konečný správný zápis prázdných elementů je takovýto – <br />.
  • pokud vaše styly nebo skripty obsahují < nebo & nebo ]]> nebo --, přesuňte je do externího souboru
  • v hodnotě atributů nesmí být více mezer nebo řádkový zlom
  • nevkládejte do stránek více než jeden element <isindex> do sekce head
  • častá chyba – pokud určujete jazyk dokumentu, musíte použít jak atribut xml:lang tak atribut lang
  • v HTML se odkazy v rámci jedné stránky dělaly za pomocí elementu <a> a atributu name nebo použitím atributu id. Pro zajištění zpětné komptability tedy musíte částečné identifikátory dělat jak s použitím atributu name tak s atributem id. Oba musí být pochopitelně v elementu <a>. Konečný zápis identifikátoru by vypadal takto: <a name="pravidla" id="pravidla></a>.
  • někteří uživatelští agenti nedokáží zpracovat logické atributy ve své plně formě (myslím tedy například zápis disabled="disabled") jak to vyžaduje XHTML. Konsorcium nepřichází s žádným způsobem, jak docílit celkové kompatiblity, pouze upozorňuje na fakt, že se to netýká uživatelských agentů, kompatibilních s HTML 4.
  • používáte-li kaskádové styly, zapisujte v nich elementy a atributy malými písmeny
  • HTML si některé značky „domýšlelo“, avšak XHTML nikoli. Proto pokud jste stylovali například element <tbody> aniž byste ho měli v kódu, připište ho tam, XML parser si tento element nedomyslí.
  • Pokud ve svém dokumentu používáte element <style> měli byste k němu přidat identifikátor a potom na něj odkazovat přes XML deklaraci. Tedy nějak takto:
<?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?>

<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>An internal stylesheet example</title>
<style type="text/css" id="internalStyle">
  code {
    color: green;
    font-family: monospace;
    font-weight: bold;
  }

</style>
</head>
<body>
<p>
  This is text that uses our
  <code>internal stylesheet</code>.
</p>
</body>

</html>

(kód vypůjčen přímo ze specifikace).

Konfliktu tohoto bodu s prvním, který naopak říká, abychom takovéto XML deklarace do kódu nevkládali si prosím nevšímejte.

  • namísto entity &apos; používejte entitu &#39;

Tohle by byly ty nejdůležitější body, ostatní už jsem většinou jmenoval někde jinde. V tuto chvíli tedy máte po ruce XHTML dokument, který posíláte jako application/xhtml+xml a pouze prohlížečům, které tento MIME typ neznají, posíláte text/html. Pokud nechcete posílat application/xhtml+xml žádnému prohlížeči, není to žádný problém, váš XHTML dokument je kompatibilní s HTML, tudíž si MIME typ text/html můžete dovolit, avšak už se nejedná ani tak o XHTML dokument komptabiliní s HTML dokumentem, ale spíš bych to nazval přesně naopak – HTML dokument kompatibilní s XHTML dokumentem.

Avšak pokud ono XHTML nerozšiřujete o další jazyky jako třeba SVG, není vlastně nutné používat application/xhtml+xml a vystavovat se tak zbytečnému riziku, že se stránka nezobrazí. De facto i při použití text/html (tudíž i v samotném HTML, stránka nemusí mít XHTML syntaxi) můžete na stránku dostat úplně jednoduše SVG či MathML. Stačí použít element <object> a externí .svg soubor. Zajímavé pak je, že například Amaya vykreslí MathML i při použití text/html bez toho, aniž bych to MathML připojil přes <object>. Což mi přijde poměrně zvláštní, protože samo W3C říká, že výhodou XHTML je, že si ho můžete snadno rošířit od další jazyky, což bychom pochopitelně v HTML nemohli. Jak nám Amaya názorně předvedla – mohli ;-).

Ještě bych se zmínil o filosofii XHTML aneb další rozdíl mezi HTML a XHTML. Pokud něco v XHTML vyznačíte tak a tak, bude to prohlížeč chápat přesně tak a tak. Tuto trochu krkolomnou větu vysvětlím na příkladu. Pokud jste se v HTML pokoušeli nesmyslně zanořit nadpis do odstavce, nemohlo se vám to povést. Odstavec má nepovinnou ukončovací značku a proto prohlížeč, ve chvíli kdy narazí na nadpis, ukončí odstavec a začne vykreslovat nadpis. Snadno si to můžete vyzkoušet tím, že přes se přes styly pokusíte přebarvit nadpis v odstavci:

p h1{color:red;}

Neprojde vám to, nadpis červený nebude. Ale v XHTML žádné takové domýšlení značek nefunguje, proto pokud z toho uděláte XHTML a pošlete ho jako application/xhtml+xml, bude tento CSS zápis fungovat a prohlížeč bude skutečně vnímat předchozí kód jako nadpis v odstavci. Bude to sice nevalidní zápis, ale protože validita není podmínkou pro zobrazení XHTML dokumentu, prohlížeč to musí interpretovat, nevyhodí dračí chybu jako v případě neuzavřeného elementu.

Jak je vidět, XHTML trpí mnohými problémy, takže si dobře rozmyslete, zda se vám vůbec psaní v XHTML nějakým způsobem vyplatí a zda by nebylo lepší ponechat stránku v HTML.