Kirjautuminen

Haku

Tehtävät

Opasarkisto: XHTML: HTML:stä XHTML:ään

Kirjoittaja: Juice. Vuosi: 2004, päivitetty 2012.

Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi.

Tämä opas on tarkoitettu lukijalle, joka tuntee jo HTML:n ja haluaa oppia XHTML:n. Opas keskittyy XHTML:n ja HTML:n eroavaisuuksiin.

XHTML (eXtensible HyperText Markup Language) on XML-pohjainen koodikieli, joka suunniteltiin korvaamaan HTML (HyperText Markup Language). Alkuun XHTML:ää pidettiin nettisivujen tulevaisuuden kielenä, mutta sittemmin innostus on laantunut, kun HTML:n päivitetty versio HTML5 alkoi muotoutua.

XHTML 1.0 sisältää samat tagit kuin HTML 4.01. XHTML 1.1 on tästä päivitetty versio, josta on karsittu vanhentuneita ominaisuuksia. Näiden seuraajaksi suunniteltu XHTML 2.0 jäi lopulta (vuonna 2009) kesken. Uusi XHTML:n haara on XHTML5, joka on HTML5-koodia XML-muodossa kirjoitettuna.

XHTML pystyy kaikkeen samaan kuin HTML, ja lisäksi siihen voi helposti upottaa muita XML-pohjaisia muotoja kuten SVG-kuvia tai MathML-kaavoja. XHTML saattaa tuntua hankalammalta kuin HTML, koska koodi pitää kirjoittaa tiukempien sääntöjen mukaan eikä virheitä sallita. Sääntöjen etuna on, että virheetkin löytyvät helpommin eivätkä selaimet yritä enää arvailla, mitä koodari on tarkoittanut. Toisaalta pieni virhe voi estää koko sivun näyttämisen, minkä vuoksi koodia muokatessa pitää olla hyvin tarkkana.

XML-määrittely

XML-dokumentin alussa voi olla XML-määrittely (engl. XML declaration), joka määrittelee dokumentissa käytettävän merkistökoodauksen ja XML:n version.

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

Jos versio on 1.0 ja merkistökoodaus on UTF-8, merkintä on tarpeeton. XHTML-dokumentin merkistön voi ilmoittaa myös muulla tavalla, esimerkiksi HTTP-otsikoilla ja tietyillä tageilla, joten tätä merkintää ei tarvita juuri koskaan. Lisäksi Internet Explorer 6 ja jotkin sitä vanhemmat selaimet eivät tue tätä ominaisuutta kunnolla, joten käytännössä määritelmä on usein parempi jättää nettisivuilta pois, ellei sen käytölle ole jotain tärkeää syytä.

DOCTYPE-määrittely

XHTML-dokumentin ensimmäinen pakollinen osa on DOCTYPE-määrittely. XHTML5:ssä käytetään HTML5:stä tuttua, erittäin lyhyttä DOCTYPE-määrittelyä, jonka tärkein tarkoitus on tyydyttää selaimet, jotka vaativat DOCTYPE-määrittelyn toimiakseen oikein.

<!DOCTYPE html>

XHTML 1.0:sta on kolme versiota: Strict, Transitional ja Frameset. Strict tarkoittaa suomeksi ankaraa ja tinkimätöntä. Tämä nimitys tulee siitä, että tämä on "puhdasta" XHTML:ää. Tämä ei esimerkiksi sisällä vanhentuneita tageja eikä kehyksiä. Tätä suositellaan käytettäväksi CSS:n kanssa.

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

XHTML 1.0 Transitional on lähinnä samanlainen kuin HTML 4.01.

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

Frameset-versio sisältää kaikki Transitionalin tagit ja lisäksi kehykset. Kehyksien käyttöä pidetään nykyään huonona tapana.

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

XHTML-dokumentin muut pakolliset osat

DOCTYPE-määrittelyn jälkeen seuraava XHTML-dokumentin pakollinen osa on <html>-tagi. Se kuuluu XHTML:ssä näin:

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

Tämä poikkeaa HTML:n yksinkertaisemmasta muodosta siitä syystä, että XHTML on XML-pohjainen kieli, kuten jo johdannossa mainitiin.

HTML-tagin jälkeen tulee <head>-tagi. Huomaa, että edellä mainitun tagin jälkeen on pakko tulla <title>-tagi, eli siis näitten välissä ei saa olla muita tageja. Näin ollen <title> on myös XHTML-dokumentin pakollinen osa. XHTML-dokumentin loppuosa on samanlainen kuin HTML-dokumentin, eli sitten tulee vielä </head>, <body> ja </body> (tai <frameset> ja </frameset>) ja lopuksi </html>.

Laitan asiaa selventääkseni alle vielä esimerkin:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>XHTML-esimerkki</title>
</head>
<body>
	<p>XHTML on helppo kieli.</p>
</body>
</html>

Tagit ja attribuutit

XHTML:ssä kaikki tagit (paitsi DOCTYPE-määrittely) tulee kirjoittaa pienin kirjaimin. Esimerkiksi tagi <head> voidaan kirjoittaa HTML-kielessä myös muodossa <HEAD>, mutta tämä merkintätapa on XHTML:ssä kielletty.

Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin. Nimen ja arvon välissä on =-merkki, ja sen ympärillä ei saa olla välejä. Attribuuttien arvoja ei saa myöskään lyhentää. Esimerkki:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Attribuuttiesimerkki</title>
</head>
<body>
	<form action="?" method="post">
		<input type="text" name="tieto" required="required" />
		<button type="submit">Lähetä</button>
	</form>
</body>
</html>

Huomaa, että kaikkien attribuuttien arvot ovat lainausmerkeissä. Toinen huomioimisen arvoinen seikka on input-tagissa, kun määritellään, että tekstikenttä on pakko täyttää. HTML:ssähän attribuutin saa lyhentää näin:

<input type="text" name="tieto" required>

Tagien sulkeminen ja sisäkkäistäminen

XHTML on, toisin kuin HTML, hyvin tarkka tagien sisäkkäistämisen(engl. nesting) suhteen. Sisäkkäistäminen on helpoin selostaa esimerkillä:

<i><b>Tämä on väärin.</i></b>

Tässä tagit on suljettu väärässä järjestyksessä. Oikea muoto olisi seuraava:

<i><b>Tämä on oikein.</b></i>

XHTML:ssä kaikki tagit täytyy sulkea (paitsi XML- ja DOCTYPE-määritykset). Esimerkiksi seuraava merkintätapa kävisi HTML:ssä, mutta XHTML:ssä se ei käy päinsä:

<p>Tämä on oikein HTML:ssä, mutta väärin XHTML:ssä.

Sen sijaan seuraava tapa on oikein myös XHTML:ssä:

<p>Tämä passaa molemmissa kielissä.</p>

Miten sitten kirjoitetaan lyhyet tagit kuten <img> ja <br>? Näihin lisätään loppuun välilyönti ja sitten kauttaviiva.

<br />
<img src="esimerkki.jpg" alt="mallikuva" />
<hr />

Dokumentin kieli

Jos dokumentin kieli halutaan määritellä, kuten on suositeltavaa, se tehdään seuraavan kaavan mukaisesti:

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

Kielen voi määritellä attribuuteilla lang ja xml:lang myös yksittäiselle muulle elementille, eli samalla sivulla voi olla monia eri kieliä.

MIME-tyypit

HTML-dokumentin MIME-tyyppi (Multipurpose Internet Mail Extension) on text/html. XHTML 1.1-tiedostot täytyy lähettää tyyppinä application/xhtml+xml. XHTML 1.0-tiedostot pitäisi lähettää tuona tyyppinä, mutta myös edellä mainittu tyyppi text/html käy. Lisätietoa MIME-tyypistä application/xhtml+xml on osoitteessa http://www.rfc-editor.org/rfc/rfc3236.txt.

Mutta kuinka tiedosto lähetetään jonakin tiettynä MIME-tyyppinä? Monet palvelimet lähettävät .xhtml-päätteiset tiedostot automaattisesti oikein. Muussa tapauksessa voi muokata palvelimen asetuksia tai käyttää jotain palvelimella ajettavaa skriptikieltä kuten PHP:tä:

<?php header('Content-Type: application/xhtml+xml; charset=UTF-8'); ?>

Usein MIME-tyyppi ilmoitetaan myös lisäämällä dokumentin head-osioon metadataa. Tässä määritellään sekä MIME-tyyppi sekä käytettävä merkistökoodaus:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

Tämä merkintätapa ei todellisuudessa vaikuta selaimen toimintaan, koska selain joutuu tulkitsemaan dokumentin saadakseen merkinnän selville eikä se sitten enää muuta tulkintatapaa.

Linkkejä

Kommentit

sooda [17.07.2004 16:35:49]

Lainaa #

Jee. Mä luulin että xml ois jotain ihan sekavaa hankalaa pskaa mutta jopas kiva. Hyvä selkeä kompakti opas.

tsuriga [17.07.2004 17:53:48]

Lainaa #

XML + XSL on ehkä utopistisin vääntö, mihin oon koskaan törmänny. Jaksoin vääntää ehkä 4h ja sain aikaan yhden sanan tulostuksen ku se ei suostunu looppaa XML-dokumentin arvojen läpi. En vaan osaa ;__;. Sitä toivon jatko-osaksi erityisen paljon ;).

Juice [17.07.2004 18:29:00]

Lainaa #

XML+XSL on todella virhealtis ja vaikea. Enpähän tiedä, että jaksaisko siitä jatko-osaa vääntää. No käy kummiski W3 Schoolsissa opiskelemassa ko. asiaa. Tai sitten kokeile XML + CSS. Ja sooda: XML on mielestäni kyllä osittain sitä miten sitä kuvailit. XHTML on vain XML:n osa ja se on kyllä melkoisen helppoa verrattuna XML + XSL-virityksiin.

tuomas [21.07.2004 19:14:36]

Lainaa #

XML:ssä on hyvä puoli se että paskaa koodia ei vain voi yksinkertaisesti tehdä. Jos koodissa on yksikin virhe niin sivua ei näytetä.

Matti Kaijomaa [02.08.2004 11:57:56]

Lainaa #

Krhm...

En tiedä teinkö jotain väärin, mutta kun lisäsin tuon PHP-koodin sivuuni niin selaimeen tuli se tiedoston latausikkuna xD Päätimpä sitten ottaa sen pois.

Tempfile [03.08.2004 11:03:31]

Lainaa #

Tuolta näkyy puuttuvan x tuosta application/html+xml-pätkästä, sen lisääminen varmaan auttaa.

Matti Kaijomaa [08.08.2004 20:21:33]

Lainaa #

Entä kuinkas kierretään tilanne, jossa tuo selain ja validaattori itkevät kuin linkissä on esim. ?tieto1=arvo&tieto2=arvo ?

Jostain syystä ne eivät tykkää jos linkkiin on laittanu useamman muuttujan...

Draiz [11.08.2004 22:23:18]

Lainaa #

Matti Kaijomaa:
Kokeileppa korjata & -> &amp;

Eli ainakin & pitää olla html-entiteettinä.

henrin [03.09.2004 12:48:20]

Lainaa #

Jihaa kiva opas=)ja hyödyllinen

makeuu [17.09.2004 12:50:16]

Lainaa #

Tästä oli apua :)

ville-v [10.02.2005 10:39:17]

Lainaa #

Ääkköset pitää pistää entiteeteiksi. Tämä ei käy ilmi oppaasta.

Juice [10.02.2005 18:42:14]

Lainaa #

ville-v kirjoitti:

Ääkköset pitää pistää entiteeteiksi. Tämä ei käy ilmi oppaasta.

Eipä siitä validaattori kylläkään älähdä, kunhan muistaa lähettää headerissa oikean merkistötyypin.

FlashBack [04.07.2005 07:47:25]

Lainaa #

Tämä oli kyllä hyvä opas. Pisti vain tuossa ekalla rivillä silmään "XHTML on XML-pohjainen koodikieli". XHTML ei ole koodikieli siinä missä HTML ja XML:kään.

Juhko [19.11.2006 16:26:12]

Lainaa #

Hieno opas. Mutta mitä tapahtuu, jos laittaa vain <img src="kuva://kkk.kuvia.kuv/kuvia/kuva.kva">

Juice [20.11.2006 21:21:19]

Lainaa #

Juhko kirjoitti:

Hieno opas. Mutta mitä tapahtuu, jos laittaa vain <img src="kuva://kkk.kuvia.kuv/kuvia/kuva.kva">

Näkyy se kuva siltikin, mutta koodi ei ole standardin mukaista.

Koodari_Antti [02.01.2007 20:37:48]

Lainaa #

Tässä oppaassa on jäänyt mainitsematta attribuuttien määreiden oikeanlainen käyttö. Ne täytyy laittaa lainausmerkkien sisään. Muuten ei sivu toimi. Eivätkä ongelmat tähän loppuneet. Saan käyttäessäni xhtml:ää seuraavanlaisen virheilmoituksen:

XML-jäsennysvirhe: yhteensopimaton tunnus. Odotettu tunnus: </br>.

Rivinumero 17, sarake 6:
</center>
--^

Mistäköhän mahtaa olla kyse?

Koodari_Antti [02.01.2007 20:48:05]

Lainaa #

Ai niin, sivu näyttää toimivan Internet Explorerilla, muttei Mozilla Firefoxilla. Mutta Internet Explorer ei näytä äätä eikä öötä. Dokumentin kielen määrittelykään ei auta.

Juice [03.01.2007 16:54:48]

Lainaa #

Koodari_Antti kirjoitti:

Tässä oppaassa on jäänyt mainitsematta attribuuttien määreiden oikeanlainen käyttö.

Eipäs ole.

Opas kirjoitti:

Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin.

Kysele keskustelualueella ja pistä linkki. Oletan, että tagisi ei ole muotoa <br /> ja toisessa lienee headeriongelma tai jtn.

Koodari_Antti [05.01.2007 09:56:05]

Lainaa #

Nyt aloin päästä selville ongelmasta. Syynä oli huono tapani vaihdella fontin kokoa <font></font>-attribuuttien avulla ja se aiheutti tagien sulkemisia väärässä järjestyksessä. Täytynee vihdoinkin opetella CSS-tyylien käyttö.

moptim [26.01.2007 16:10:53]

Lainaa #

Oppaan kirjoittaja kirjoitti:

Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin.

Joo. Tämmöinen kelvannee:

<input type="submit" value="TäSsÄ eI sEnTäÄn KaI oLe UpPeRcAsElLa VäLiÄ" />

Dude [27.10.2007 21:58:34]

Lainaa #

Mä huomasin että ohjelmointiputkan sivut määritetään xhtml strictiks mutta käytetään br-tagia ilman />-loppuosaa.

uid-8361 [13.05.2009 21:40:53]

Lainaa #

Kiva opas.

ErroR++ [18.05.2011 15:06:07]

Lainaa #

Meni hermot.

python61 [08.11.2012 19:59:57]

Lainaa #

Hyvä opas.

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea keskustelun ohjeet.
Tietoa sivustosta