Syntaxe XHTML

Co je XHTML - Verze XHTML - Rozdíly XHTML oproti HTML - Všechny hodnoty atributů jsou v uvozovkách - Zákaz křížení tagů - Tagy a atributy jsou malými písmeny - Nepárové tagy končí lomítkem - Párové tagy jsou párové povinně - Všechny atributu musejí mít hodnotu - Souhrnný příklad - Zápis javascriptu - Zápis interního stylu - Na začátku je XML deklarace (prolog)

Co je XHTML

XHTML je jiná, svého času novější, norma jazyka HTML. HTML jako takové se dlouho nevyvíjelo, zůstalo ve verzi HTML 4.01, když přišel pokus zvaný XHTML.

To X na začátku XHTML znamená eXtensible, rozšiřitelný (ve skutečnost jde o zúžení a osekání).

Podstatné je, že podpora jazyka XHTML je v současných prohlížečích naprosto stejná jako podpora HTML (psáno 2004, platí i pro 2012). Ačkoli se usuzovalo, že v budoucnu bude podpora XHTML lepší než podpora HTML, na základě zkušeností s historickým vývojem prohlížečů není důvod se domnívat, že tomu tak vskutku bude.

Validita a význam XHTML

Tomu, že html/xhtml stránka splňuje normu (specifikaci, soulad s DTD), se říká validita. Mnozí autoři se validity kódu snaží dosáhnout. Validitu lze zkontrolovat validátorem. Současné prohlížeče ale zpravidla správně zpracují i nevalidní XHTML dokument a vykreslí jej dobře, protože je dodán s chybným MIME typem. Jinak řečeno -- je to stejně jako v HTML: pokud uděláte chybu, nestřílí se z toho.

XHTML oproti HTML nic nového nepřináší. Žádné nové možnosti, jenom omezení.

Taky bych měl připomenout, že já osobně nemám XHTML moc rád, protože ho považuji za zbytečně omezující. Validitu u veřejných dokumentů taktéž nevzývám. Účel světí prostředky, validita tím účelem není. Berte to prosím jako můj osobní názor. Konec mudrování.

Verze XHTML

XHTML se v praxi vyskytuje ve třech verzích:

XHTML 1.0 přechodové (transitional)
XHTML 1.0 striktní (strict)
XHTML 1.1

Zatímco XHTML 1.0 transitional lze vcelku doporučit k používání, XHTML 1.0 striktní je velmi pracné a v XHTML 1.1 už je spousta věcí zakázána a jeho používání je pro značnou část autorů horor.

Kromě toho se kdysi začalo dělat XHTML 2.0, ale to byla úplná úchylnost a zřejmě slepá cesta.

Specifikace

XHTML 1.0 na W3C (anglicky).

Specifikace XHTML 1.1 (anglicky), tamtéž.

Doctype XHTML 1.0

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nahlédnutím do odkazovaných souborů dtd se můžete podrobně seznámit s tím, které tagy a atributy jsou v dané verzi přípustné (stačí pochopit, jak je to DTD psané: chvíli na to koukat a pak je to jasné).

Doctype pro XHTML 1.1

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Výklad DTD (anglicky)

Problémy s DTD a XML deklarací

Správně by HTML soubor měl začínat XML deklarací. Např. takto:

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

Trochu lapálie je v tom případě s tím, že jakmile soubor nezačíná přímo zápisem <!doctype, nepozná Internet Explorer, že má stránku vykreslovat ve striktním módu. Neumím to řešit.

Další veselé chvilky začínají, když XHTML soubor s XML prologem <?xml version="1.0" ?> generujete přes PHP. PHP si myslí, že zápis <?XML patří jemu, a začne blbnout. To se řeší třeba tak, že se nechá ta XML deklarace vypsat pomocí PHP příkazu echo:

<? echo "<?XML version=\"1.0\" encoding=\"iso-8859-2\"?" . ">" ?>

Nebo ještě lepší je tam ten xml prolog nedávat, čímž sice vzniká nesprávně kódovaný dokument, ale zase to funguje i v Exploreru 6 se standardním vykreslováním.

Rozdíly XHTML oproti HTML

Některé věci platily už v HTML, XHTML je striktně vyžaduje:

Všechny atributy mají hodnoty v uvozovkách
Zákaz křížení tagů

Jaké jsou rozdíly XHML oproti HTML:

Tagy a atributy jsou malými písmeny
Nepárové tagy končí lomítkem
Párové tagy jsou párové povinně
Všechny atributy musejí mít hodnotu
Interní javascript a styly se zapisují jiným způsobem
Dokument má mít XML prolog.
Dokument požaduje správný doctype.

V dalším výkladu probírám jednotlivé rozdíly

Funkčnost versus soulad se specifikací

Prosím uvědomte si rozdíl mezi pojmy "je správně" a "funguje". V případě XHTML i HTML hodně běžně používaných zápisů není správně (tj. nejsou validní nebo nejsou v souladu se specifikací), ale v prohlížečích fungují. (Zhruba to platí i naopak -- mnohé věci ze specifikace nefungují.)

Většina prohlížečů totiž používá pro vykreslení XHTML stránek starý parser určený na HTML. V nich platí víceméně zásada, která říká, že co se nezná, to se ignoruje. Pak platí, co říkám: když se něco zkazí, tak se stránka stejně vykreslí.

Jsou ale případy, kdy toto neplatí a je třeba maximální soulad se specifikací. Když nastavíte server tak, aby odeslal XHTML dokument s hlavičkou Content-type: x-application/xhtml-xml a dotane ho některý moderní prohlížeč (např. Mozilla), pro XHTML dokumenty se pak může použít jiný parser, totiž v podstatě XML parser. Tento parser vyhnije na každé drobné chybce a uživateli se pak stránka vůbec nezobrazí.

Pokud chcete, můžete si na serveru nastavit, že se xhtml dokumenty budou s touto hlavičkou odesílat. Musíte si potom ale dát opravdový pozor, co jak na stránce děláte.

Jestliže nevíte, co to ta hlavička je, můžete být v klidu -- skoro všechny servery ve výchozím nastavení odesílají XHTML stránky s hlavičkou pro HTML, která žádné problémy nezpůsobuje.

Všechny hodnoty atributů jsou v uvozovkách

V HTML se nemusejí hodnoty atributů, které neobsahují mezeru, uzavírat do uvozovek. Když například napíšu kód pro obrázek

tak to bude v prohlížečích fungovat a podle starších verzí HTML to je i správný zápis. V XHTML se ale kolem všech hodnot vyžadují uvozovky:

Dávat uvozovky kolem hodnot je mimochodem dobrý mrav i v normálním HTML. Kód je rozhodně přehlednější a lépe se automaticky zpracovává.

Uvozovky se mohou nahradit apostrofy:

<a href='adresa'>odkaz</a>

Zákaz křížení tagů

Toto se třeba nesmí:

<b><i>tučná kurzíva</b></i>

takto je to správně:

<b><i>tučná kurzíva</i></b>

Křížení tagů se samozřejmě nesmělo už v HTML. Ironií zůstává, že když takovouto neplatnou křížovou konstrukci vyrobíte, prohlížeče to většinou vezmou a pochopí. XML parser to nevezme a nepochopí.

Tagy a atributy jsou malými písmeny

V HTML bylo jedno, jestli se píše <A HReF="..."></a> nebo <a href="..."></A>. HTML je tedy jazyk non-case sensitivní, takže v něm na velikosti písmen nezáleží.

Naopak XHTML je jazyk case sensitivní a na velikosti písmen v něm záleží (jako v každém jiném XML).

Navíc, podle specifikace se všechny tagy a atributy píšou malými písmeny. Takže například

<a href="...">Odkaz</a> je v XHTML správně
ale <A HREF="...">Odkaz</a> je v XHTML špatně

Další příklady doufám nejsou potřeba. Já k tomu dodám dva postřehy:

Pokud náhodou napíšete nějaký tag nebo atribut velkým písmenem, je to sice jako špatně, ale v prohlížeči by to problém dělat nemělo.
Já osobně striktně doporučuji psát všechny tagy a jejich atributy malými písmeny, i když píšete v HTML! Nadělá se pak méně chyb při případném automatickém zpracování.

Nepárové tagy končí lomítkem

V HTML je spousta tagů nepárových. Například obrázek (<img>) nebo čára (<hr>). V XML -- a tedy i v XHTML -- nic jako nepárový tag neexistuje. Když to vezmu na příkladu horizontální čáry (tag <hr>), tak:

v HTML je to nepárový tag <hr>
což se v XHTML musí rozšířit na párový tag <hr></hr>
který se vzápětí může smrsknout na <hr />. To lomítko tam znamená, že už se to nebude uzavírat.

Takže zjednodušeně řečeno nepárové tagy v sobě mají na konci lomítko. Taková úprava je co do funkčnosti zpětně kompatibilní s HTML -- když do HTML tagu napíšete lomítko, tak to prohlížeč pochopí jako neznámý parametr a ignoruje to. Proto nepárové tagy s lomítkem nedělají problémy v HTML ani v XHTML.

Opět si musíte uvědomit, že pokud píšete v XHTML a to lomítko tam nedáte, tak sice nemáte validní zápis, ale v prohlížeči to fungovat bude.

Na druhou stranu pokud píšete v HTML, tak lomítko jako neznámý parametr není v HTML validní. To sice prakticky nevadí, ale občas je to k smíchu. Vždycky si představím toho bastliče, jak sice píše HTML, ale aby šel s módou a aby spasil svět (XHTML přece spasí svět, nebo ne?), tak tam práská lomítka, aniž by věděl, proč to dělá.

Pamatujte: před zavíracím lomítkem má být mezera. Zápis

<br/>

(a podobné) je nejen nesprávný, ale hlavně může opravdu chybovat. Vyhodnotí se jako neznámý tag, který by prohlížeč měl ignorovat, ale těžko říct, jestli se tak skutečně stane. Může se tedy stát, že v různých prohlížečích bude kód <tag/> fungovat různě chybně.

Shrnutí o lomítku:

Toto je správně v HTML a nesprávně v XHTML:

<br>

toto je správně v XHTML a nesprávně v HTML:

<br />

a v obou případech v prohlížečích funguje oboje.

Párové tagy jsou párové povinně

Prohlížečům nevadí, když se nějaký tag občas neuzavře. Například tag <p> se nemusel dříve uzavírat, protože když prohlížeč na stránce viděl další tag <p>, tak si ten předchozí v duchu uzavřel -- to protože jeden odstavec nemůže být částí druhého. Nebo podobně to funguje u buněk tabulky -- u tagu <td>. Když začnu jedno <td>, neuzavřu ho (nedám tam </td>) a pak napíšu další <td>, tak si prohlížeč řekne: aha, další buňka, to ta předtím skončila. A chybějící </td> si doplní. (Podobně funguje např. tag. option.)

Takový přístup je v praxi přípustný (ačkoliv jej nedoporučuji). Starší verze HTML neuzavírání některých tagů akceptovaly. Novější verze HTML a XHTML neuzavírání párových tagů zapovídají. Všechny párové tagy se tedy musejí uzavírat a mít v dokumentu svůj protějšek.

Samozřejmě doporučuji všechny tagy striktně zavírat, ať už píšete v XHTML nebo v HTML. Co konkrétně prohlížeč vydejchá, pokud nechcete některé tagy uzavírat, musíte vždycky vyzkoušet.

Všechny atributy musejí mít hodnotu

V HTML se občas vyskytují atributy, které namají hodnotu. Třeba u tagu select (rozevírací nabídka) se vyskytují atribut multiple nebo disabled. Atribut multiple například dovoluje vybrání více položek z nabídky (podržením klávesy Ctrl) a do kódu se v HTML zapisuje například takto:

<select name="auta" size="3" multiple>
... několik tagů <option> ...
</select>

Podstatné je to multiple, všimněte si, že nemá hodnotu (není tam žádné multiple rovná se něco).

V XHTML je ale atribut bez hodnoty zakázaný. Aby byl zápis zpětně kompatibilní s HTML, přidává se atributu v XHTML nějaká vycpávková hodnota. Takže například

multiple="multiple"

Výše uvedený příklad se selectem v XHTML vypadá takto:

<select name="auta" size="3" multiple="multiple">
... několik tagů <option> ...
</select>

Jediná změna je tam to ="multiple".

Podobně se rozvádějí další atributy, např. disabled="disabled", readonly="readonly" (oboje u formulářových polí), noresize="noresize" u tagů <frame> a <iframe> apod.

Souhrnný příklad

Všechno se píše malými písmeny a ty značky, kterým se říká "párové", musí být uzavřené. Všechny atributy musí mít přiřazenu hodnotu, všechny hodnoty atributů musí být v uvozovkách (i čísla).

Například takovýhle HTML kód:

<select multiple> <option>opt1 <option>opt2 </select> <img src="x.jpg" width=10 height=10>

V XHTML se tentýž kód zapíše takhle:

<select multiple="multiple"> <option>opt1</option> <option>opt2</option> </select> <img src="x.jpg" width="10" height="10" />

Zápis javascriptu

Skript je v XHTML chápán jako neznámý puding, tedy beztvarý kus dokumentu. Musí se obalit zápisem CDATA. Zápis samotného řetězce CDATA je potřeba ještě javascriptově zakomentovat, aby se nevyhodnocoval.

Uvnitř skriptu se nesmí použít sekvence </x, kde x je písmenko. Potřebujete-li něco takového zapsat, zapisujte ji takto: <\/x. (Zápis \/ je jenom escapovaná verze lomítka.)

Externí skript se naštěstí zapisuje stejně jako v HTML a uvnitř externího skriptu není žádné omezení.

Zápis interního stylu

To samé jako javascript. Přes kopírák - zapoznámkované CDATA. Ale ve většině případů to CDATA ani poznámkování není nutné, pokud v zápisu stylu nepoužíváte žádné problematické znaky jako třeba & > a <. Zejména pozor na znak > (css selektor potomka).

Na začátku je XML deklarace (prolog)

<?xml version="1.0" encoding="iso-8859-2"?>

<?xml version="1.0" encoding="windows-1250"?>

<?xml version="1.0" encoding="UTF-8"?>

Samozřejmě záleží na použitém kódování. Pozor, tento zápis nenahrazuje meta tag pro kódování češtiny (zejména Google pak může mít problémy). V praktickém použití na webu se tento prolog většinou vypouští, protože (ačkoli tak vzniká neplatný dokument) Explorer 6 chce mít na prvním řádku doctype.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně