XHTML oktatás
Ha Ön már készített honlapot, akkor biztosan hallott már az XHTML-ről. Sokan azért használják, mert sok más oldalon látták, illetve úgy gondolják, hogy a HTML-nél újabb tehát jobb.
Azonban az XHTML sokkal több dologban különbözik a HTML-től, de sokan nem ismerik ezeket a különbségeket. Ezért ha XHTML-t használ, valószínűleg rosszul használja, még akkor is, ha a weboldalain nem jelez hibát a validator.
A problémákról a fejezet második fele szól, az első felében az XHTML használatáról van szó.
Az XHTML az Extensible HyperText Markup Language angol kifejezés rövidítése, magyarul kiterjeszthető hyperszöveges leíró nyelv. Míg a HTML az SGML (Standard Generalized Markup Language) nyelven alapul, addig az XHTML az XML (Extensible Markup Language) nyelven.
Az SGML 1986-ban született meg, és mára a főbb nyelvek közül csak a HTML épül rá. Az XML 1998-ban született meg, azóta többször módosították, és mára rengeteg nyelv épül rá.
Az SGML és az XML hasonlítanak egymásra, céljük az információcsere és információleírás platformfüggetlen megvalósítása. Az alábbi dokumentum például SGML és XML dokumentum is lehet:
<html>
<head>
<title>Cím</title>
</head>
<body>
<p>Lorem ipsum <a href="http://www.w3.org/">dolor</a> sit amet</p>
</body>
</html>
SGML-ben viszont sokkal több nyelvi elem megengedett, mint XML-ben. Például nincs különbség a kis- és nagybetűk között, az attribútumokat nem kell mindig idézőjelbe tenni, az elemeket nem kell mindig lezárni. Ezt már tudjuk a HTML ismereteinkből, és azt is, hogy nem ajánlott kihasználni az SGML tág korlátait a HTML kód írásakor, mert kevésbé lesz áttekinthető a kód, és nehezebbé válik a hibakeresés.
Az XML sokkal kevesebb mozgásteret ad a kód írásakor, például mindig le kell zárni az elemeket, az attribútumok értékeit mindig idézőjelbe kell tenni stb. (erről szó lesz részletesen). Az XHTML az XML nyelven alapul, a HTML pedig az SGML nyelven, ezáltal az XHTML-nek az alábbi előnyei vannak a HTML-lel szemben:
- Könnyebb írni egy olyan algoritmust, ami XML fájlokat kezel, mint ami SGML fájlokat, hiszen az XML-nek kevesebb szabálya van.
- Egy XHTML fájlt gyorsabban lehet feldolgozni, mint egy HTML fájlt, mert az XML egyszerűbb nyelv.
- Egy XHTML weboldal csak akkor jelenik meg a böngészőben, ha nem tartalmaz hibákat. Ha a böngésző egy hibás XHTML oldallal találkozik, akkor az oldal helyett csak egy hibaüzenetet jelenít meg. Ellenben egy HTML weboldal akkor is megjelenik valahogy, ha hemzseg a hibáktól. Az XHTML arra kényszeríti a honlapkészítőt, hogy helyes kódot írjon, ezáltal jobb lesz a honlapok minősége.
- Egy XHTML weboldalban más XML-re épülő nyelveket is tudunk használni. Ezek közül a két legtöbbször említett nyelv az SVG (Scalable Vector Graphics) és a MathML (Mathematical Markup Language). Előbbivel képeket tudunk rajzolni pusztán XML kód (azaz sima szöveg) segítségével, utóbbival pedig mindenfajta bonyolultságú matematikai képleteket tudunk megjeleníteni. Egy ilyen oldalra példa.
Az XHTML verziói
XHTML 1.0
Az XHTML 1.0 a legelső verzió, ami csak a HTML 4.01 XML alapokra helyezését jelenti. Ezért az XHTML 1.0 ugyanazokat a címkéket és attribútumokat engedi meg, mint a HTML, tehát ugyanolyan weboldalakat tudunk vele készíteni. A fő különbség abban van, hogy szigorúbbak a szabályai, mint a HTML-nek, erről szó lesz később.
Láttuk, hogy a HTML 4.01-nek három doctype-ja lehet, így van ez az XHTML 1.0 esetében is:
- XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
Itt már csak egyfajta doctype-ot használhatunk:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Ez a verzió az XHTML 1.0 Strict továbbfejlesztése, tehát a Transitional prezentációs elemeket már nem lehet használni, a kinézetet csak stíluslappal lehet állítani, ami egy nagyon jó megközelítés. Az XHTML 1.1 továbbá modulokra van osztva.
XHTML 2.0
Ez a verzió még csak munkavázlat állapotban van, a HTML 4.01-et és az XHTML 1.x-et hivatott leváltani. Azonban vele párhuzamosan fejlesztik a HTML 5-öt, aminek jelenleg nagyobb támogatottsága van a böngészőgyártók körében. A HTML 5 megpróbál kompatibilis lenni a HTML 4.01-gyel és az XHTML 1.x verziókkal is, miközben az XHTML 2.0 egy teljesen új koncepciót tükröz, ami viszont teljesen inkompatibilis a régebbi verziókkal.
Tartalomtípusok
Amikor böngészünk az Interneten, különböző típusú fájlokat tudunk letölteni, pl. HTML oldalakat, képeket, videókat, zenei fájlokat. Amikor letöltünk egy fájlt, akkor a böngésző egy kérést küld a fájlt tároló webszerver felé. Ezután általában a böngésző megkapja a fájlt, azonban tudnia kell, hogy milyen típusú fájlt kapott meg. Ugyanis a hálózaton csak egy nyers adattömeg érkezik meg.
A böngésző a fájl MIME (Multipurpose Internet Mail Extensions) típusa alapján tudja, hogy mit kell kezdeni a fájllal (a MIME típust a webszervertől kapja meg): pl. ha képet kap, meg kell jelenítenie, ha videót, el kell indítani egy külső médialejátszót, ha HTML oldalt, akkor fel kell építenie a weboldalt stb.
Milyen fájl | MIME típusa |
---|---|
HTML oldal | text/html |
CSS stíluslap | text/css |
JPEG kép | image/jpeg |
MPEG videó | video/mpeg |
Például ha egy JPEG kiterjesztésű képet akarunk megnézni az Interneten, akkor a böngésző megkapja az image/jpeg
típusú MIME kiterjesztést a webszervertől, ezután már tudni fogja, mit kell kezdeni a letöltött adattömeggel.
Azért kell tudnunk a MIME típusokról, mert a HTML-nek és az XHTML-nek különböző a MIME típusa. Ugyanis az XHTML fájlok valójában XML fájlok. A lényeg, hogy egy HTML oldalt text/html
típusban, egy XHTML oldalt viszont application/xhtml+xml
MIME típusban kellene küldeni. Azonban a legelterjedtebb böngésző, az Internet Explorer, nem ismeri fel az application/xhtml+xml
típust!
MIME típus | HTML 4 | XHTML 1.0 (HTML kompatibilis) | XHTML 1.0 (nem HTML kompatibilis) | XHTML 1.1 |
---|---|---|---|---|
text/html |
kellene | lehet | nem kellene | nem kellene |
application/xhtml+xml |
tilos | kellene | kellene | kellene |
Tehát az XHTML 1.0 oldalakat application/xhtml+xml
típusban kellene küldeni. HA betartjuk a HTML kompatibilitásra vonatkozó feltételeket (a HTML kompatibilitás szabályaival kicsit később részletesen foglalkozunk), akkor text/html
típusban is küldhetők. Az XHTML 1.1 oldalakat viszont csak application/xhtml+xml
típusban ajánlott küldeni, amit az IE nem ismer, ezért nagyon kevesen használnak XHTML 1.1-et.
Egy XHTML 1.1 weboldal, amit az Internet Explorer nem tud megnyitni!
A fő problémát megint az IE okozza, miatta nem lehet kihasználni az XHTML-t. Ha XHTML-t használunk, akkor a következő lehetőségeink vannak, hogy működjön IE böngészőnél is:
- Betartjuk a HTML kompatibilitásra vonatkozó összes szabályt, és minden böngészőnek
text/html
típusban küldjük oldalainkat. Ez a legelterjedtebb módszer, ezzel azonban teljesen elvesztjük az XHTML minden előnyét, ez minden tekintetben olyan, mintha HTML-t használnánk. - Betartjuk a HTML kompatibilitásra vonatkozó összes szabályt, oldalainkat
text/html
típusban küldjük az Internet Explorernek, deapplication/xhtml+xml
típusban az olyan böngészőknek, amik kezelik ezt. - Az Internet Explorernek HTML 4.01 oldalakat küldünk, de a többi böngészőnek XHTML 1.x oldalakat
application/xhtml+xml
típusban. - Minden böngészőnek HTML 4.01-et küldünk, nem használjuk az XHTML-t és ezzel elkerüljük a számos hibaforrást mindegyikét.
A továbbiakban végigvesszük az összes lehetőséget!
XHTML használata application/xhtml+xml
típusban
Ha XHTML-ben írjuk meg oldalainkat, akkor mindenképpen tudnunk kell arról, hogyan kell helyesen használni az XHTML-t application/xhtml+xml
típusban, még akkor is, ha mindig text/html
típusban küldjük vagy küldtük eddig XHTML oldalainkat!
Egy hibátlan XHTML oldalnak két kritériumnak kell megfelelnie:
- legyen jól formázott (well-formed)
- és legyen érvényes (valid)
Ha XHTML oldalunkat application/xhtml+xml
típusban küldjük, akkor muszáj jól formázottnak lennie, különben a böngésző az oldal helyett egy hibaüzenetet jelenít meg:
Ugyanakkor nem muszáj, hogy érvényes legyen, de ajánlott. Ez különbzik a HTML viselkedésétől, ugyanis egy hibás HTML oldalt meg tudnak jeleníteni a böngészők.
A W3C validator a jól formázottságot és az érvényességet is ellenőrzi. A továbbiakban megnézzük az XHTML jellemzőit, kitérve arra, hogy az egyes jellemzők miben különböznek a HTML-től.
Mindig zárjuk le helyesen az elemeket!
A most következő példa HTML-ben és XHTML-ben is hibás, azonban a böngésző ettől még meg tudja jeleníteni a HTML oldalt, XHTML oldalnál viszont hibát jelezne.
<strong><abbr>XHTML</strong></abbr>
A jó megoldásban először az abbr
címkét kell lezárni, mert azt nyitottuk ki később, és meg kell tartanunk a sorrendet:
<strong><abbr>XHTML</abbr></strong>
Figyeljünk arra, hogyha egy lista egyik listaeleme maga is egy lista (azaz beágyazunk egy listát), akkor azt is a <li>...</li>
címkék közé kell tennünk. Ez a példa helyes HTML-ben, de helytelen XHTML-ben:
<ul>
<li>Számítógép</li>
<li>Telefon
<ul>
<li>Mobiltelefon</li>
<li>Vezetékes telefon</li>
</ul>
<li>Fax</li>
</ul>
Ez a jó megoldás, mert itt a beágyazott lista után lezártuk a <li>
címkét:
<ul>
<li>Számítógép</li>
<li>Telefon
<ul>
<li>Mobiltelefon</li>
<li>Vezetékes telefon</li>
</ul>
</li>
<li>Fax</li>
</ul>
A címkéket MINDIG le kell zárni! Ez a példa helyes HTML-ben, de hibás XHTML-ben, mert nem zártuk le a bekezdést:
<p>Ez egy bekezdés. Itt van a vége.
<p>Ez már egy másik bekezdés.
A helyes megoldásban figyelünk arra, hogyha kinyitunk egy címkét, akkor azt le is kell majd zárnunk:
<p>Ez egy bekezdés. Itt van a vége.</p>
<p>Ez már egy másik bekezdés.</p>
Az üres elemeket is le kell zárnunk. HTML-ben nem tudjuk lezárni az üres elemeket, ez a példa helyes HTML-ben:
<br>
<img src="mosoly.gif" width="50" height="50" alt="Mosoly">
XHTML-ben háromféleképpen is lezárhatjuk az üres elemeket, az alábbi három módszer mind megengedett:
<br/>
<img src="mosoly.gif" width="50" height="50" alt="Mosoly"/>
<br />
<img src="mosoly.gif" width="50" height="50" alt="Mosoly" />
<br></br>
<img src="mosoly.gif" width="50" height="50" alt="Mosoly"></img>
Helytakarékosság miatt ajánlott csak az első módszert használni.
A címkéket és az attribútumokat kisbetűvel kell írni
Ez a példa helyes HTML-ben, de helytelen XHTML-ben:
<P>Ez egy bekezdés</P>
<IMG SRC="kep.jpg" WIDTH="10" HEIGHT="20" ALT="Ez egy kép" />
Ez helyes, mert a címkék és az attribútumok is kisbetűsek:
<p>Ez egy bekezdés</p>
<img src="kep.jpg" width="10" height="20" alt="Ez egy kép" />
Az attribútumok értékeit idézőjelek közé kell tenni
Ez a példa helyes HTML-ben, de helytelen XHTML-ben, mert nem tettük idézőjelbe az értékeket:
<img src=mosoly.gif width=40 height=40 alt=Mosoly />
A helyes példa:
<img src="mosoly.gif" width="40" height="40" alt="Mosoly" />
Az attribútumokat nem szabad rövidíteni
Az alábbi példában úgy mondjuk meg, hogy alapértelmezettként egy adott opció legyen kiválasztva, hogy a checked="checked"
attribútumot beírjuk az input
elembe. Most a helyes példával kezdjük:
<input name="male" type="radio" value="male" checked="checked" />
A helytelen az, amikor a checked="checked"
helyett csak checked
értéket írunk, ami HTML-ben engedélyezett, de XHTML-ben nem. A hibás példa:
<input name="male" type="radio" value="male" checked />
Itt van a listája a minimalizálható attribútumoknak, és hogy mit kell írni hozzájuk XHTML-ben:
HTML | XHTML |
---|---|
compact | compact="compact" |
checked | checked="checked" |
declare | declare="declare" |
readonly | readonly="readonly" |
disabled | disabled="disabled" |
selected | selected="selected" |
defer | defer="defer" |
ismap | ismap="ismap" |
nohref | nohref="nohref" |
noshade | noshade="noshade" |
nowrap | nowrap="nowrap" |
multiple | multiple="multiple" |
noresize | noresize="noresize" |
Karakter entitások
XHTML-ben kötelező entitással helyettesíteni a szövegben előforduló < és & karaktereket. Az alábbi linkben nem kódoltuk a & karaktereket, ez HTML-ben sem jó szokás, XHTML-ben viszont tilos:
<a href="http://www.google.com/search?hl=en
&q=html+css&btnG=Google+Search">Google</a>
Ehelyett ezt kell írnunk:
<a href="http://www.google.com/search?hl=en&
q=html+css&btnG=Google+Search">Google</a>
Továbbá nem kötelező, de ajánlott kódolni az alábbi karaktereket is:
Karakter | Entitása |
---|---|
> | > |
" | " |
' | ' |
Csak ez az 5 névvel ellátott entitás (&
, >
, <
, "
, '
) használható biztonsággal XHTML-ben, ha ezeken kívül entitást kívánunk használni, akkor számmal, és ne névvel hivatkozzunk az entitásra! Például HTML-ben a
jelöli a nem törő szóközt, de XHTML-ben ehelyett inkább ezt használjuk:
.
Kódolatlan < és & karakter nem maradhat a beágyazott Javascriptben és CSS-ben sem! Ezért inkább használjunk külső Javascriptet és stíluslapokat, ezzel elkerüljük ezt a problémát.
Ha mégis használnánk belső stíluslapot és Javascriptet, akkor a tartalmukat tegyük a <![CDATA[
és a ]]>
karakterek közé, mert ezen a blokkon belül már használhatunk kódolatlan < és & karaktereket is:
<script type="text/javascript">
<![CDATA[
document.title = "Lorem & ipsum";
]]>
</script>
De jobb megoldás, ha külső Javascriptet és stíluslapot használunk:
<script type="text/javascript" src="script.js"></script>
Szükséges XHTML elemek
HTML-ben elhagyható a html
, head
és a body
elem is. Az alábbi példa érvényes HTML, de nem jól formázott XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Érvényes HTML oldal</title>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ut elit. Quisque diam arcu, ornare vitae, condimentum ac, congue ac, felis. Nulla ullamcorper sapien vel massa. In elementum mattis nibh. Mauris nec justo. Integer non quam.</p>
Egy XHTML dokumentum alapszerkezete máshogy néz ki:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.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="hu">
<head>
<title>Helló világ!</title>
</head>
<body>
<p>Ide jön a tartalom</p>
</body>
</html>
Egy XHTML dokumentum az XML deklarációval kezdődik. Ez elhagyható abban az esetben, ha UTF-8 kódolásban írtuk meg az oldalt, minden más esetben kötelező kitenni. Az XML deklaráció a használt XML verzióról is ad információt, ami legtöbbször az 1.0.
Figyeljük meg, hogy HTML-ben máshogy adtuk meg a karakterkódolást:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
XML-ben viszont az XML deklaráció állítja be a karakterkódolást, ezért nincs szükség a fenti sorra:
<?xml version="1.0" encoding="utf-8"?>
Az XML deklaráció után egy stíluslapot csatoltunk az oldalhoz. HTML-ben így csatoltunk stíluslapot a head
-ben:
<link href="style.css" rel="stylesheet" type="text/css">
XHTML-ben viszont nem a head
-ben, hanem rögtön az XML deklaráció után tudunk stíluslapot csatolni:
<?xml-stylesheet type="text/css" href="style.css"?>
Ezután következik a már ismert doctype (a használható doctype-okat lásd fent).
XHTML-ben kötelező megadni a html
, head
és body
elemeket. A html
címkének pedig kötelező megadni a xmlns="http://www.w3.org/1999/xhtml"
attribútumot. Erről elég annyit tudni, hogy az XML névteret állítja be.
A weboldal fő nyelvét szintén a html
címkében kell megadni az xml:lang="nyelvkód"
attribútummal. HTML-ben a lang
attribútumot használtuk erre:
<html lang="hu">
Ha megadtuk az oldal főnyelvét, akkor ha ettől eltérő nyelvet használunk, azt XHTML-ben is jelezni kell:
<p>Tudtad, hogy a <span xml:lang="en">The quick brown fox jumps over the lazy dog</span> mondat tartalmazza az angol ábécé összes betűjét?</p>
Az eddigiek szemléltetésére nézzük meg egy HTML 4.01 Strict és egy XHTML 1.0 Strict (application/xhtml+xml
típusban küldött) oldal forráskódját! A két oldal teljesen ugyanúgy néz ki, csak a kód más.
HTML 4.01 Strict vs. XHTML 1.0 Strict application/xhtml+xml típusban
HTML kompatibilis XHTML
A W3C azt állítja, hogy egy XHTML 1.0 oldalt lehet text/html
típusban küldeni akkor, ha betartjuk a HTML kompatibiliásra vonatkozó szabályokat. Azonban XHTML 1.1 oldalainkat mindig application/xhtml+xml
típusban küldjük!
A HTML kompatibilitásra vonatkozó feltételek itt találhatók: http://www.w3.org/TR/xhtml1/guidelines.html.
Abból indulunk ki, hogy már ismerjük az „igazi” XHTML-t, azaz az application/xhtml+xml
típusban küldött XHTML-t. A HTML kompatibilis XHTML-re az összes fent említett tulajdonság fennáll, a különbségek viszont a következők:
-
Ne használjuk az XML deklarációt, mert az IE 6 quirks mode-ba kerül tőle! (Az IE 7-ben már kijavították ezt a hibát.) Viszont, ha nem használjuk az XML deklarációt, akkor UTF-8 kódolásban kell megírni minden weboldalunkat, mert az XML deklaráció elhagyásakor ez lesz az alapértelmezett kódolás.
Továbbá a HTML-ben megszokott módon jelezni kell, hogy UTF-8 kódolást használunk, a
head
-ben:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
A stíluslapokat a HTML-ben megszokott módon csatoljuk a dokumentumhoz. Tehát e helyett...
<?xml-stylesheet type="text/css" href="style.css"?>
...Így csatoljuk a stíluslapokat:
<link href="style.css" rel="stylesheet" type="text/css" />
-
A nyelv megadásánál az
xml:lang
és alang
attribútumot is használnunk kell:<p>Tudtad, hogy a <span lang="en" xml:lang="en">The quick brown fox jumps over the lazy dog</span> mondat tartalmazza az angol ábécé összes betűjét?</p>
A
html
címkében továbbra is használjuk azxmlns
attribútumot, a nyelv megadásánál pedig itt is kell alang
attribútum:<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">
-
Most is ajánlott inkább külső stíluslapot és Javascriptet használni. De ha mégis beágyaznánk ezeket, akkor nem használhatjuk a
<![CDATA[ ... ]]>
blokkot, mert ilyen nincsen HTML-ben. A megoldás az, hogy kommentbe tesszük ezt a kifejezést. Azaz stíluslapot így ágyazzunk be:<style type="text/css">
/*<![CDATA[*/
h1 {
color: blue;
text-align: center;
}
/*]]>*/
</style>Javascriptet pedig így:
<script type="text/javascript">
//<![CDATA[
document.title = "Lorem & ipsum";
//]]>
</script> -
Az üres elemeket csak egyféleképpen zárhatjuk le. Az
application/xhtml+xml
típusban háromféleképpen is lezárhattuk az üres elemeket:<br/>
<br />
<br></br>De most csak ezt a lezárást használhatjuk:
<br />
<img src="smile.gif" alt="Smile" />
Az eddigiek szemléltetésére vessünk egy pillantást két weboldal forráskódjára, amik ugyanazt tartalmazzák, de az első XHTML 1.0 Strict application/xhtml+xml
típusban küldve, a második pedig HTML kompatibilis XHTML.
XHTML 1.0 Strict application/xhtml+xml típusban vs. HTML kompatibilis XHTML 1.0 Strict
A HTML és a HTML kompatibilis XHTML közti különbségeket pedig itt nézhetjük meg:
HTML 4.01 Strict vs. HTML kompatibilis XHTML 1.0 Strict
Problémák a HTML kompatibilis XHTML-lel
A fent ismertett módszerrel szemben, tudniillik hogy text/html
típusban küldjük az XHTML-t, sokan komoly kritikákat fogalmaztak meg. Ezeket az álláspontokat úgy lehetne összefoglalni, hogy az XHTML-t nem praktikus és kockázatos text/html
típusban küldeni, csak application/xhtml+xml
típusban ajánlatos küldeni. De mivel az Internet Explorer ezt nem támogatja, ezért ma a legjobb amit tehetünk, hogy maradunk a HTML 4.01-nél.
Nem más, mint hibás HTML
Kezdjük ott, hogy a böngésző a text/html
típusban küldött XHTML-t úgy kezeli, mintha egyszerű HTML lenne. Ugyanis a böngésző nem az oldal elején lévő doctype-ról dönti el, hogy HTML vagy XHTML fájllal áll szemben, hanem a MIME típusból!
Tehát ha a böngésző letölt egy fájlt, aminek a MIME típusa text/html
, akkor ezt a fájlt HTML fájlként fogja látni. Így a text/html
típusban küldött XHTML nem más, mint hibás HTML.
- Az XHTML-ben használt doctype nem létezik HTML-ben, ezért a böngésző ismeretlen doctype-ként fog rá tekinteni
- Az
xmlns
attribútum érvénytelen HTML-ben - Az
xml:lang
attribútum érvénytelen HTML-ben
HTML parser és XML parser
Amelyik böngésző támogatja az XHTML-t, az kétféle algoritmust használhat a weboldalak kirajzolására.
A text/html
típusban küldött oldalakat a HTML feldolgozó (HTML parser) jeleníti meg, az application/xhtml+xml
típusban küldött oldalakat pedig az XML feldolgozó (XML parser). Az XHTML összes előnye csak akkor mutatkozik meg, ha a böngésző az XML feldolgozót használja, tehát a text/html
típusban küldött XHTML minden tekintetben „csak” egy hibás HTML oldal.
A böngészők hibáján alapul az oldal
A HTML kompatibilis XHTML-ben így kell lezárni az üres elemeket:
<br />
<img src="smile.gif" alt="Smile" />
Ez valójában HTML-ben teljesen mást jelent, mint XHTML-ben. HTML-ben a következő kódrészlet
<p>Lorem<br />ipsum</p>
ekvivalens ezzel:
<p>Lorem<br>>ipsum</p>
És így kellene megjelenítenie a böngészőnek:
Lorem
>ipsum
Az ok, amiért nincsenek minden XHTML oldalon nem kívánt > jelek, az, hogy a gyakorlatban semelyik böngészőben nem valósították meg a szabványnak ezt az előírását. Tehát tudunk kell róla, hogy a text/html
-ben küldött XHTML helyes megjelenése a böngészők hibáján alapul.
A mai XHTML oldalak többsége nem jól formázott
Egy XHTML oldalnak jól formázottnak kell lennie. Ha nem az, akkor a böngészőnek nem kötelező megjeleníteni az oldalt. Elég egy kódolatlan & karakter, és például a Firefox máris egy ilyen képernyőt fog kiadni (ha application/xhtml+xml
típusban küldtük az oldalt):
Viszont ha text/html
típusban küldjük az XHTML-t, akkor a böngésző meg fogja jeleníteni az oldalt még akkor is, ha nem jól formázott. Ezért ilyenkor valójában meg kellene néznünk, hogy a weboldalunk működik-e application/xhtml+xml
típusban is.
A W3C azért hozta létre a C függeléket (ami arról szól, hogyan kell HTML kompatibilis XHTML-t írni), hogy segítse az átállást XHTML-re. Ha text/html
típusban küldjük az XHTML oldalainkat, akkor az lenne a logikus, ha valamikor áttérnénk application/xhtml+xml
típusra. Ugyanis csak így tudjuk kihasználni az XHTML előnyeit. A text/html
-ben küldött XHTML csak hibás HTML.
Rendben, tehát feltételezzük, hogy mindenki, aki most text/html
típusban küldi XHTML oldalait, az a jövőben valamikor át akar majd térni igazi XHTML-re. Nem fog könnyen sikerülni nekik. Ma az XHTML oldalak többsége hibás XHTML, például nem jól formázott. Tehát a mai „XHTML” oldalakat jelentősen át kéne alakítani ahhoz, hogy application/xhtml+xml
típusban küldhessük őket.
Erre mondhatnánk azt, hogy jól elvannak a mai XHTML oldalak text/html
típusban, és soha nem is fogjuk őket application/xhtml+xml
típusban küldeni. Rendben, de akkor mi értelme volt XHTML-t használni? Ezzel a módszerrel semmilyen előnyét nem használtuk ki az XHTML-nek, és 100%-ban azt az eredményt kaptuk, mintha HTML 4.01-et használtunk volna, ráadásul a böngészők hibás HTML-ként látják az oldalainkat, és csak azért jelennek meg helyesen, mert minden böngészőben ugyanaz a hiba fordul elő (lásd fent).
Ráadásul valószínűleg azok, akik XHTML-t használnak, nem hallottak arról, hogy az application/xhtml+xml
típusban küldött XHTML-ben máshogy működik a CSS és a Javascript! Ezért a mai „XHTML” oldalakon a szkriptek és stíluslapok egy részét is át kéne írni ahhoz, hogy működjenek igazi XHTML-ként.
Az XHTML-re máshogy működnek a stíluslapok és a Javascript, mint HTML-re
A legtöbb XHTML oktatás nem is említi ezt az igen fontos tényt. Az alábbi listában mindig egy HTML kompatibilis XHTML oldalt vizsgálunk két esetben: Az első esetben az XHTML oldalt text/html
típusban küldjük, a második esetben pedig application/xhtml+xml
típusban. Az XHTML kód, a CSS kód és a Javascript kód mindkét esetben ugyanaz, csak a MIME típust változtatjuk.
A példákat nem tudjuk megnézni Internet Explorerrel, mert nem ismeri fel az application/xhtml+xml
típust. Helyette Firefox böngészővel ajánlott a példák megtekintése, mert a Firefox minden alábbi példát a szabványnak megfelelő módon jelenít meg, míg az Opera és a Safari néhány helyen eltér a szabványtól.
Tehát ebben a listában olyan XHTML oldalakat találunk, amelyek tökéletesen működnek text/html
típusban, viszont teljesen megváltoznak application/xhtml+xml
típusban.
- A
body
elem máshogy viselkedik - Nagybetűs CSS kijelölő
- A
tbody
elem máshogy viselkedik - Kódolatlan & karakter (hibás kód)
- Nem jól formázott
- A
document.write
függvény - Rejtélyes hézagok a képek alatt
- Karakterkódolási bonyodalmak
- Kis- és nagybetű érzékenység Javascriptben 1.
- Kis- és nagybetű érzékenység Javascriptben 2.
- Javascript SGML kommentek között
A Firefox 2 és régebbi változatai lassabban jelenítik meg az XHTML weboldalakat
A text/html
típusban küldött weboldalakat minden böngésző már letöltés közben elkezdi megjeleníteni. Ez főleg hosszabb, összetettebb weboldalaknál fontos, pl. lehet hogy csak 20 másodperc alatt végez a böngésző a teljes oldal betöltésével, de mi már az első másodpercekben láthatjuk a szöveget.
A Firefox 2 és régebbi verziók azonban ezt nem támogatják application/xhtml+xml
típusban küldött XHTML oldalaknál (ez egy hiba a Firefox XML feldolgozójában). Ezért az ilyen oldalakat nem folyamatosan jeleníti meg a Firefox, hanem miután a teljes weboldal letöltődött, bevillantja az oldalt. A Firefox 3 már kijavítja ezt a hibát.
A Mozilla maga is ellenzi az XHTML használatát!
Tévhitek az XHTML körül
- Az XHTML a jövő, ezért már most fel akarom készíteni a weboldalaimat
A jövő vagy a HTML 5, vagy az XHTML 2.0, vagy mindkettő. A HTML 5-öt több böngészőgyártó cég is támogatja, míg az XHTML 2.0-nak csekély a tábora. Tehát jelenleg úgy tűnik, hogy a HTML 5-é a jövő, tehát jobban felkészülünk, ha HTML 4.01-ben írjuk weboldalainkat.
De ha mégis az XHTML 2.0 válna egyeduralkodóvá: Az XHTML 2.0 nem lesz visszafelé kompatibilis az XHTML 1.x nyelvekkel, az XHTML 1.x pedig nem előre kompatibilis. Ez azt jelenti, hogy hiába használunk ma XHTML-t, weboldalainkat ugyanolyan nehéz/könnyű lesz átalakítani XHTML 2.0-ra vagy HTML 5-re, mintha HTML-t használtunk volna. Az XHTML használata nem készít fel a jővőre!
- Az XHTML szigorúbb, például mindig le kell zárni az elemeket, ezért jobb kódot eredményez
HTML-ben ugyanúgy megengedett, hogy minden elemet lezárjunk, minden címkét kisbetűvel írjunk, stb. Sőt még olyan validatort is használhatunk, ami kötelez is minket erre.
- Ez a legújabb W3C ajánlás, a W3C is az XHTML-t ajánlja
Valóban újabb ajánlás, de a W3C nem ajánlja az XHTML-t a HTML ellenében. Továbbá a HTML 4.01 is W3C ajánlás, azaz ajánlott weboldalak készítésére.
- A mobiltelefonok, vagy kisebb teljesítményű eszközök csak XHTML-t tudnak megjeleníteni/jobban jelenítik meg az XHTML-t
Ez csak akkor lehetne igaz, ha
application/xhtml+xml
típusban küldenénk az XHTML oldalainkat. Egyébként meg az Opera Mini már megmutatta, hogy mobiltelefon is képes gyorsan megjeleníteni HTML oldalakat, tehát a feni állítás ma már nem igaz. - XHTML-ben használhatók egyéb XML alapú nyelvek is, például a MathML és az SVG
Ez csak akkor igaz, ha
application/xhtml+xml
típusban küldjük a weboldalt, így viszont az Internet Explorert használó látogatókat (~80%) kizárjuk, a Firefox használóknak (~15%) pedig lassabban jön be az oldal, mintha HTML-t használtunk volna. Egyébként SVG-t lehet használni HTML-ben is, MathML-t pedig lehet emulálni Javascripttel. - Sok weboldal használ XHTML-t, tehát biztos jobb
És a legtöbb oldal hibásan használja. Ha nem hisszük, telepítsük fel ezt a Firefox kiegészítőt, ami segítségével
application/xhtml+xml
típusban is meg tudjuk nézni a weben lévő XHTML oldalakat. Sok közülük például meg sem fog jelenni, mert nem jól formázott, vagy pedig máshogy fog működni rajtuk a CSS és a Javascript (lásd fent).Lehet, hogy sok weboldal használja, de közülük hányan használják ki tényleg az XHTML előnyeit?
Ha mindenképpen használni akarjuk
A „Tartalomtípusok” fejezetben szó volt erről a lehetőségről: Az Internet Explorernek HTML 4.01 oldalakat küldünk, de a többi böngészőnek XHTML 1.x oldalakat application/xhtml+xml
típusban.
Ilyen módszert követ pl. ez, ez és ez az oldal. A módszer leírása itt található.
A használatát azonban nem ajánlom a körülményessége miatt, és mert feleslegesen terheli a szerverünket.
Konklúzió
Az XHTML-t csak application/xhtml+xml
típusban küldve használjuk! Azonban az Internet Explorer ezt nem kezeli, a Firefox pedig lassabban jeleníti meg így az oldalakat, ebből következően maradnunk kell a HTML 4.01 Strict használatánál. De mivel most úgy tűnik, hogy a HTML 5 lesz az új jelölőnyelv, ezért a HTML használatával valójában felkészítjük weboldalainkat a jövőre.
Néhány szakértő, akik maradnak a HTML-nél:
- Eric Meyer, több CSS könyv szerzője
- Ian Hickson, HTML 5 munkacsoport tagja
- Roger Johansson, HTML 5 munkacsoport tagja
- Anne van Kesteren, az Opera böngésző szabvány-szakértője
- David Hammond, www.webdevout.net
Bónusz: Lehull a lepel a hibás XHTML kódokról
Ezt a fejezetet ez a cikk (David Hammond - www.webdevout.net) inspirálta. Az említett honlapon még sok más hasznos cikket is találhatunk, érdemes megnézni.
Telepítsük fel ezt a Firefox kiegészítőt! Ennek segítségével be tudjuk állítani, hogy egy XHTML weboldalt a böngésző mindenképpen application/xhtml+xml
típusban jelenítsen meg. Ha így a weboldal ugyanúgy néz ki, mint text/html
típusban, akkor a készítő jól használja az XHTML-t. Ha problémák lépnek fel, akkor nem.
Most nézzünk meg néhány ismertebb, szabványokkal foglalkozó honlapot, amelyek nem működnek tökéletesen igazi XHTML-ként.
- CSS Zen Garden
A felső háttérkép eltűnik, mert a
body
elem máshogy viselkedik XHTML-ben. - Position Is Everything
Az oldal helyett hibaüzenet jön be, mert nem jól formázott.
- Hivatalos Internet Explorer blog
Az oldal helyett hibaüzenet jön be, mert nem jól formázott.
- BrainJar.com
Fehér hézag jelenik meg az oldal körül, mert a
body
elem máshogy viselkedik XHTML-ben. Továbbá nem működik a menü, ezért használhatatlan az oldal, ugyanis a Javascript máshogy működik XHTML-ben.
...Továbbá a legtöbb XHTML weboldal kint a weben.
Ajánlott linkek
XHTML 1.0 hivatalos specifikáció: http://www.w3.org/TR/xhtml1/
XHTML 1.1 hivatalos specifikáció: http://www.w3.org/TR/xhtml11/
XHTML 2.0 munkavázlata: http://www.w3.org/TR/xhtml2/
HTML 5 munkavázlata: http://www.whatwg.org/.../multipage/
A problémákat okozó C függelék: http://www.w3.org/TR/xhtml1/#guidelines
A Mozilla a HTML-t ajánlja: http://www.mozilla.org/.../faq.html#accept
Webdevout cikk, sok hasznos linkkel a végén: http://www.webdevout.net/articles/beware-of-xhtml
Ian Hickson, HTML 5 munkacsoport tagja figyelmeztet az XHTML veszélyeire: http://www.hixie.ch/advocacy/xhtml