XHTML, Extensible Hypertext Markup Language.

XHTML on HTML:stä kehitetty merkkauskieli. XHTML täyttää XML:n muotovaatimukset ja täten mahdollistaa eri medioissa toimivien www-sivujen kehittämisen.

Tässä artikkelissa käymme läpi asijoita, joita tulee huomioida merkkauksessa, sekä kerromme kuinka XHTML eroaa perinteisestä HTML:stä.

Dokumentin rakenne.

XML-määritys

Xhtml-dokumentin tulee sisältää joitakin pakollisia elementtejä, tageja ja attribuutteja. Dokumentin ensimmäisellä rivillä olisi hyvä olla xml-määrittelyllä, mutta tämän käyttö ei ole pakollista. Joillakin (etenkin IE:llä) vanhoilla selaimilla on ongelmia tulkita tätä määrittelyä.

<?xml version="1.0" encoding="ISO-8859-1"?>

Tämä määrittää xml versioksi 1.0 ja käytettäväksi merkistöksi ISO-8859-1. Kuten ylempänä sanoin, tätä ei ole pakko laittaa.

DOCTYPE-elementti (DTD)

Seuraavaksi tulee lisätä DOCTYPE-elementti (DTD). Se vaihtelee eri versioissa. Tässä esimerkissä käytät XHTML:n versiota 1.0 Strict, jonka DTD-elementti on seuraavanlainen:

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

DTD:n kirjoitusasun tulee olla täysin oikea. Siinä ei saa olla virheitä. Huomio siis isot- ja pienetkirjaimet. Muita DTD-elementtejä löydät Vulpesista kohdasta HTML -> HTML-dokumentin rakenne -> DOCTYPE-elementti.

DTD kertoo selaimelle, että sen tulee tulkita html-dokumenttia ja että dokukentti noudattaa xhtml:n syntaksia, eli muotosäänöjä.

XML nimiavaruus

Seuraavaksi laitetaan XML:n nimiavaruus (XML namespace) määritys, joka ottaa käyttöön XHTML:ssä käytettävät nimet (universaaleja nimiä). Tämä laitetaan siksi, että XML sallii nimetä tagit miten haluaa, kun taas XHTML ei salli. Tästä johtuen voisi tulla erilaisia ristiriitoja, jos ei otettaisi käyttöön universaaleja nimiä. Tähän voi myös laittaa käytettävän kielen.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">

Tämän jälkeen laitetaan tutut head, title, sekä body-tagit ja niiden lopetukset.

XHTML-dokumentin perusrakenne olisi siis kutakuinkin tämänlainen:

<?xml version="1.0" encoding="ISO-8859-1"?>

<!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="fi" lang="fi">
	<head>
		<title></title>
	</head>
		<body>
		</body>
</html>

HTML:stä XHTML:ään

Yleinen harhaluulo taitaa olla, että XHTML olisi vaikeampaa, kuin HTML. Siksi moni ei edes halua tutustua XHTML:ään. XHTML on kuitenkin hyvin samantapaista, kuin HTML, eikä sen opetteleminen ole ollenkaan ylitsepääsemätöntä, tai edes vaikeata.

Alla muutamia esimerkkejä ja selostuksia kuinka XHTML eroaa HTML:stä.

Tagien kirjoittaminen

HTML:ssä tagit voidaan kirjoittaa isolla, pienellä, sekä niin, että ensimmäinen kirjain on iso.

HTML:
<DIV ID="MALLI" STYLE="WIDT:10EM;"></DIV>

<Div Id="MALLI" Style="Width:10EM;"></Div>

XHTML:ssä tämä ei ole kuitenkaan sallittua. XHTML:ssä kaikki tagit ja attribuutit tulee kirjoittaa pienellä. Poikkeuksena on DOCTYPE-elementti, jossa on sekä pieniä, että isoja kirjaimia.

XHTML:
<div id="malli" style="width:10em;"></div>

Tagien lopettaminen

HTML:ssä joitakin tageja ei ole pakko sulkea. Alla esimerkkejä.

<img src="kuva.jpg" alt="kuva">
<br>
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
<li>
<p>

XHTML:ssä jokainen tagi täytyy sulkea tavalla, tai toisella.

<h1></h1>
<li></li>
<p></p>

Jos tagi, tai elementti on oletukseltaan "tyhjä", eli sille ei ole omaa päätöstagia, tulee se sulkea / merkillä. Huomaa yksi välilyönti ennen lopetusta.

<img src="kuva.jpg" alt="kuva" />
<br />

Attribuuttien sitaatit

HTML:ssä tagien attribuuteissa ei ole pakko olla sitaatteja (lainausmerkkejä).

<div width=10em height=10em border=0.05em></div>

XHTML:ssä sitaatit pitää kuitenkin laittaa jokaiseen attribuuttiin.

<div width="10em" height="10em" border="0.05em"></div>

Ulkoasulliset tagit

HTML:ssä on useita pelkästään ulkoasuun vaikuttavia tageja ja attribuutteja. Esimerkiksi fontin väriä ja kokoa voidaan muuttaa font- tagilla.

<font size="1.0em" color="red">Tämä on punaista tekstiä</font>

XHTML:ssä ei ole ulkoasuun vaikuttavia tageja, vaan kaikki pelkästään ulkoasuun vaikutta tulee merkata CSS:llä, sekä käyttää erilaisia tageja. Font-tagin sijaan voidaan käyttää esim. span-tagia, jos halutaan vaikuttaa johonkin yksittäiseen sanaan, tai lauseeseen. Jos taas halutaan vaikuttaa kokonaiseen kappaleeseen, tai koko sivuun, tulee käyttää esim. p-tagia.

<span style="font-size:1.0em; color:red;">Tämä on punaista tekstiä</span>

Miksi XHTML?

XHTML tulee korvaamaan jossakin vaiheessa HTML:n. Se ei tietenkään tapahdu päivässä, tai kahdessa, mutta on hyvä oppia ajoissa, kuin liian myöhään. XHTML on siis dokumentti, joka noudattaa xml:än muotovaatimuksia. Tämän ansiosta voidaan web-sivut toteuttaa niin, että ne näkyvät usealla eri medialla. Perinteinen HTML toimii hyvin vain ja ainoastaan tietokoneella. XHTML-dokumentti voidaan saada toimimaan hyvin myös mm. kännyköillä ja PDA-laitteilla, sekä muilla kannettavilla päätelaitteilla.

Loppusanat

Artikkeli päättyy tähän. Toivottavasti sait edes jonkinlaisen kuvan siitä, mitä XHTML on ja kuinka sitä käytetään. Kuten saatoit huomata, ei XHTML ole ollenkaan niin vaikeata, kuin mitä ehkä ensin luulit. Tulevaisuudessa on tulossa myös jonkinlainen artikkeli XHTML:n semantiikasta. Ei riitä, että sivut ovat merkkaukseltaan oikeelliset (valid), vaan niiden täytyy olla myös semantiikaltaan oikeat.

-Foxytin 25.11.2006