Yleistä

HTML-sivujen tekeminen on helppoa. On olemassa paljon ohjelmia, joilla sivuja voi tehdä ymmärtämättä oikeastaan juuri mitään HTML-asiakirjojen koodin rakenteesta, sillä ne näyttävät sivut suoraan lähes sellaisina kuin ne näkyvät eri selaimissa (aivan tarkka tuo yhtäläisyys ei yleensä ole). Tällaisia sovelluksia nimitetään WYSIWYG-ohjelmiksi (What You See Is What You Get = mitä näet sen saat).

HTML perustuu SGML-kieleen (Standard Generalized Markup Language = standardi yleismerkintäkieli. SGML on yleinen dokumenttien rakenteen esittämiskieli, joka sisältää välineet eri dokumenttityyppien kuvaamiseksi (käsittelen dokumenttityyppiä koskevia näkökulmia tarkemmin edempänä). SGML ei ole siis merkintäkieli vaan metakieli eli tapa kuvata merkintäkieliä, jotka ovat sekä ihmisen että koneen luettavissa.

SGML-dokumentaatiossa kirjoitetaan elementtimerkkauksista seuraavasti (lisäsin tekstiin hieman korosteita; voit katsoa myös sanan tag selityksen):

Markup that describes the structure and other attributes of a document in a non-system specific manner, independently of any processing that may be performed to it. In particular, SGML descriptive markup uses tags to express the element structure.

Elementtimerkkaukset ovat dokumentin elementtirakennetta kuvaavia ja siten kielen tärkeimpiä merkintäkoodeja (markup codes; HTML ja XML-kielissä on eräitä muitakin merkintäkoodeja, joita käsittelee Alaviite 2). Jos sana tag haluttaisiin "kääntää" sen selityksen perusteella, voisimme nimittää sitä kuvausmerkinnäksi.

Elementin nimeä kutsutaan sen yleistunnisteeksi (generic identifier) ja se tarkoittaa eri asiaa kuin tag, mikä käy ilmi seuraavista SGML- ja modularisaatio­dokumentaatioiden sitaateista:

SGML:

Generic identifier (GI) = A name that identifies the element type of an element

Modularization of XHTML (Terms and Definitions):

Tag

Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.1.3.
Modularization of XHTML.

Tosiasiassa elementin nimi yhdessä rajoittimien kanssa toimii tunnistimena (mitä tarkoitetaan rajoittimilla, tulee esille elementin käsitekaaviossa, jossa esimerkkinä on elementti HTML). On silti terminologinen asiavirhe sanoa, että elementtimerkkaus kokonaisuudessaan on tunniste, sillä elementin alkumerkkaus saattaa sisältää useita tunnisteita (käsittelen tätä asiaa tarkemmin myöhemmin; voit tutkia asiaa myös käännösvastineen perusteluista).

SGML:ssä elementtimerkkaukset eivät itsessään sisällä mitään toimintaohjetta, mutta HTML:ssä niillä on määritellyt tehtävät. Perustehtävä on kuitenkin sama kuin SGML:ssä eli kuvata dokumentin rakennetta. Nimi HTML johtuu osaltaan siitä, että aloitus- ja päätösmerkkaukset merkitsevät alueita. Siksi puhumme merkintäkielestä (markup language).

Elementtimerkkaus eli alkukielessä tag on ikään kuin "leima", joka "isketään" elementin alkuun ja mahdollisesti myös loppuun, jotta elementti varmasti erottuisi muusta koodista. Sitä voisi verrata puiden leimaamiseen. tai voit ajatella sen "lapuksi", joka laitetaan valitun sisällön alkuun ja loppuun. Toivon, että sitä havainnollistaa käyttämäni eläinvertaus. Tälle eläimelle laitetaan eräitä merkintöjä. Mutta ei toki kuvassa olevia! Asiakirjamme nimi voisi olla vaikka Lehma.html.

Toinen keskeinen merkitys on se, että elementtien avulla luodaan linkkejä. HTML suunniteltiin alun alkaen hyvin yksinkertaiseksi kieleksi luoda dokumentteja, jotka sisältävät hyperlinkkejä (hyperlinkit ovat dokumentin sisäisiä tai dokumenttien välisiä linkkejä). Tämän vuoksi puhumme HTML:n yhteydessä hypertekstistä ja HTML-kielestä (Hyper Text Markup Language = hypertekstin merkintäkieli - alunperin HTML sisälsi vain tekstilinkkejä). Itse asiassa alun alkaen muut kuin linkitykseen tarvittavat elementit olivat lähinnä vain viestinnän selkeyttämisen apukoodeja, jotta asiasisältö olisi luettavampaa ja se voisi olla selkeästi jäsenneltyä ().

Elementit, jotka voivat saada sekä alku- että päätösmerkkaukset, voivat toimia sisällön ja toisten elementtien säilyttiminä eli "konttielementteinä" (element containers). Tällaiset elementit voivat olla emoelementtejä (parent elements) lapsielementeille (child-elements) eli elementeille, jotka ovat jonkun emoelementin alku- ja päätösmerkkauksen välissä ilman että elementtien välissä on muita elementtitasoja (käsittelen tätä näkökulmaa tarkemmin myöhemmin). Emoelementeillä voi olla sisältömalleja (content models; vastaavasti elementillä, joka on jonkun toisen elementin lapsielementti, voi olla emomalleja, parent models).

Jotkut elementit eivät voi saada päätösmerkkauksia, sillä ne eivät rajaa mitään sisältöaluetta. Tällöin niitä nimitetään "tyhjiksi elementeiksi" (empty elements). Esimerkki elementtien käytöstä (esimerkissä on elementit P= paragraph eli kappale ja BR = pakotettu rivikatko), joka näkyy seuraavanlaisena ns. lähdekoodia (source code) katsomalla ():

<P>Tämä teksti on aloitus-<BR> ja päätösmerkkausten välissä,<BR> mutta välissä on eräitä BR-elementtejä,<BR> jotka aiheuttavat ylimääräisiä rivikatkoja.</P>

Edellinen sivu

Sivun jaksot:

Seuraava sivu

Rivinsisäiselementtejä on kahdentyyppisiä. Ensinnäkin erilaiset tekstiin liittyvät rivinsisäiselementit, esim. B ja I, joita voidaan pitää esitysasullisina elementteinä (inline presentational). Useimmilla tämän ryhmän elementeillä on tietty semanttinen (semantic = merkitysopillinen) sisältö. Em. elementit voidaan ilmaista myös semanttista puolta kuvaavilla elementeillä EM (emphasized = painotteinen) ja STRONG. Näitä elementtejä voisi kutsua rivinsisäisiksi fraasielementeiksi (inline phrasal). Tällaiset rivinsisäiselementit voivat olla rajoituksetta keskenään sisäkkäisiä (nested).

Ne eivät luo ympärilleen lohkoelementtien tavoin suorakaiteen muotoisia laatikoita vaan elementit liikkuvat rivin mukana. Ne käyttäytyvät kuin rivillä oleva fraasi. Tekstiin vaikuttavia rivinsisäiselementtejä käytetään ensisijaisesti korostamaan jotain asiasisällön kohtaa.

Opiskeluaikana monet pistivät kirjoihinsa keltaisella paksulla tussilla merkkauksia. Käytän samaan tapaan elementtiä CODE, jonka avulla merkitsen sinisellä vain lähdekoodissa näkyvät merkintäkoodit - huomaa, että tässä lauseessa olevat korosteiset sanat ovat rivinsisäiselementtejä (CODE ja STRONG).

Myös linkitykseen käytetty erityiselementti A (sanasta Anchor = ankkuri) kuuluu rivinsisäiselementteihin. Se käyttäytyy tekstiin vaikuttavien elementtien tavoin, mutta sen rajoituksena on se, että linkitykseen käytetyt elementit eivät saa olla sisäkkäisiä.

Yksittäisillä attribuuteilla on arvoja (values). HTML 3.2 dokumentissa elementille P voi olla esim. attribuutti align="center", joka tarkoittaa keskitä kappale ():

<P align="center">Tässä on tavallinen kappale, joka on keskitetty kuten tämä esimerkkikappale käyttäen attribuuttia align="center".</P>

Selvyyden vuoksi pyrin siihen, että tekstissä ja esimerkeissä elementit on merkitty isolla kirjaimella (esim. BLOCKQUOTE) ja kaikki attribuutit ja niiden määrittelyt pienellä kirjaimella (esim. style=" ... ").

On kuitenkin kaksi poikkeusta. Dokumenttityypin kuvausilmoitus on isolla kirjaimilla, koska se on yleinen tapa. Se ei kuulu dokumentin varsinaiseen rakenteeseen. Mikäli ilmoitus sisältää tiedostonimen, se antaa selaimelle mahdollisuuden ladata DTD-tiedosto tietokoneen muistiin. Erilaisille validaattori ohjelmille tieto on välttämätön. Alkuerottimessa on huutomerkki (<!DOCTYPE ... >).

W3C on luonut HTML -dokumenteille ns. DTD-tiedostot (Document Type Definition = dokumenttityyppimäärittely), jotka sisältävät tiedot elementeistä ja käytetyistä attribuuteista sekä tiedon siitä, millaisia rakenteita dokumentissa sallitaan.

Dokumenttityypin kuvausilmoitus on kuin lehmän korvamerkkaus (eartag). Lehmä ei tarvitse korvamerkintää, mutta sen isäntä (ja viranomaiset) tarvitsee. Selain osaa ne ilman ilmoitustakin, mutta periaatteessa juuri dokumenttityyppi ilmoittaa sen kielen, jolla dokumentti on kirjoitettu (kuten aiemmin on tullut esille, määrittelykielenähän HTML-dokumenteissa on SGML).

XML-dokumentit sen sijaan saattavat tarvita dokumenttityyppi-ilmoitusta, sillä sivujen tekijä voi luoda oman dokumenttityyppikuvauksen. XML-dokumenteissa korvamerkintää vastaakin <?xml version="1.0"?>. Käytän viitatessani XML-elementteihin pieniä kirjaimia.

Kommenteissa käytetään seuraavan kaltaisia merkitsemistapoja, joita olen itsekin käyttänyt esimerkeissäni (katso kommentin käsitekaavio):

/* tämä on CSS-kommentti, joka CSS-määrittelyjä ymmärtävillä selaimilla selvyyden vuoksi pitäisi näkyä vihreänä */
<!-- merkitsen myös mahdolliset HTML-kommenttien aloitus- ja päätösmerkit vihreällä -->

Rakenne-elementtien lisäksi jotkut elementit olivat semanttisia (esim. STRONG), mutta esitysasua kuvaavia elementtejä ei Dan Connollyn ensimmäisessä DTD:ssä ollut. Sen sijaan W3C:n hakemistossa, joka käsittelee ensimmäisiä HTML-dokumentteja on käytetty elementtejä B ja I (niidenkin käytön voi ymmärtää osittain semanttisesti). Ensimmäiset dokumentit eivät sisältäneet lainkaan kuvia eikä fonttimäärittelyjä, sillä dokumenttien tuli olla käyttöympäristöstä riippumattomia, kuten seuraavasta sitaatista käy ilmi:

It is required that HTML be a common language between all platforms. This implies no device-specific markup, tai anything which requires control over fonts tai colors, for example. This is in keeping with the SGML ideal.

Tutustu varhaisien HTML-versioiden historiaan sivun Help for HTML All johdanto-osa Document typesavulla.

W3C: HTML Home page; esimerkkihakemisto.
Muita sivustoja: Dan Connollyn ensimmäinen DTD, Dmitry Kirsanov.

HTML 2.0 toi jo mahdollisuuden käyttää kuvia, mutta elementtien ja attribuuttien määrä pysyi sangen pienenä. Vähitellen niihin haluttiin yhä lisää tekstinkäsittelyohjelmien (kuten Word, WordPerfect) tapaisia muotoiluja ja lisäelementtejä, jolloin elementtien ja attribuuttien määrää kasvatettiin, mikä näkyy HTML 3.2:ssa.

HTML 3.2:ssa kaikki attribuutit liitettiin aikaisempien versioiden tapaan elementtien sisään ja siten myös osaksi asiakirjan runkoa (BODY). Sisältö, rakenne ja esittäminen ovat yleensä samassa dokumentissa lukuun ottamatta linkitettyjä kuvia ja ns. upotettuja (embed) elementtejä (kuten esim. ns. Java-kielellä tehtyjä pienoissovelluksia (applets), joita en käsittele näillä sivulla lainkaan). Tällaisen HTML asiakirjan luominen on erittäin helppoa. Ongelmana on muotoilun staattisuus - kerran tehtyjä muotoiluja voi olla hidasta muuttaa jälkikäteen varsinkin, jos esitysasua kuvaavia elementtejä ja attribuutteja on paljon!

CSS1 on rajoitettu mekanismi käyttää erilaisia tyylejä Web-asiakirjoissa ja se on siten rajoittunut muotoilukieli (formatting language). CSS1:tä ei voi pitää varsinaisena sivuntaittokielenä.

Sen sijaan CSS2 on jo lähes täysipainoinen sivuntaittokieli, sillä sen avulla pystyy luomaan suurimman osan Web-dokumenttien tarvitsemista muotoiluista ja sivujen tarvitsemista kontrolleista. Tosin eräitä puutteita siinäkin on. Nämä puutteet pyritään korjaamaan CSS3:ssa. Muotoilu merkitsee ensisijaisesti visuaalista muotoilua (visual formatting). CSS on kuitenkin monessa muussakin mielessä muotoilukieli.

Jos selain toteuttaisi täysin CSS2:n, kielellä voisi teoriassa määritellä useimpien HTML:n rakenneosien eli elementtien muotoilupiirteet kokonaan uudestaan. CSS käyttäisi tällöin HTML-elementtejä lähinnä vain merkkauskoodeina. HTML itsessään ei toimisi juuri lainkaan muotoilukielenä. Elementtien todellista järjestystä CSS:llä ei tosin pysty muuttamaan (kylläkin poistamaan elementtejä näytöltä tai sijoittamaan ne toisiin paikkoihin - miten se tapahtuu selviää myöhemmin).

CSS mahdollistaa palaamisen HTML:n alkuperäiseen ideaan eli paluu juurille! äärimmilleen vietynä HTML 4.0 asiakirja ei itsessään sisällä ainuttakaan esitysasua kuvaavaa attribuuttia, vaan lähinnä rakenne- ja linkityselementtejä ja -attribuutteja. Sellaisia elementtejä ja attribuutteja, jotka koskevat puhtaasti tekstin esittämistyyliä (kuten esim. elementtejä FONT, B, I, U ja attribuutteja align, bgcolor) ei käytetä. Osa em. elementeistä ovat sinänsä sallittuja, mutta ne ovat joka tapauksessa ei-suositeltavia, sillä elementtien ensisijaisena tarkoituksena on ilmaista dokumenttien rakenne ja semantiikka, ei sen esitystapa. Tämä sivu ei käytä edes sallittuja esitysasullisia elementtejä.

Muotoilut linkitetään useimmiten pääosin erillistiedostoon käyttäen muotoa <LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css"> kuten tässä esimerkissä ():

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<TITLE>Asiakirjan otsikko</TITLE>
</HEAD>
<BODY>
<H2>Otsikkoteksti</H2>
<P>Kappale</P>
<P>Toinen kappale. <A href="html_asiakirja.html">Linkki</A >. Ainoat välttämättä tarvittavat attribuutit ovat linkit sekä mahdolliset linkitettävät objektit kuten kuvat.</P>
</BODY>
</HTML>


Tiedostossa tyylisivutiedosto.css kuvataan, miten esim. elementti H2 näytetään tietokoneruudulla. Sama koskee tätä dokumenttia. CSS mahdollistaa korvata HTML 3.2 tyyliset dokumentin esitysasua koskevat attribuuttimäärittelyt paljon rikkaammalla tavalla esittää asiakirjan ulkoasu.

Lopputuloksena voi olla äärimmäisen pelkistetty, vähän koodia sisältävä ja nopeasti latautuva asiakirja, joka on kaikesta huolimatta hyvin näyttävä selaimelle, joka ymmärtää CSS:ää - mutta samalla äärimmäisen karu selaimelle, joka ei sitä ymmärrä. Todellisuudessa esim. Netscape 3.x pudotetaan ulkonäön esittämisen suhteen lähes alkuajan selainten tasolle. Tätä on HTML 4.0 Strict (strict= ankara, tinkimätön)!

Vaikka rakenne on pääosin itse asiakirjassa, siihen voidaan periaatteessa joiltakin osin vaikuttaa myös CSS:n avulla. Koska elementtien ulkoasun määrittelyt ovat erillistiedostossa, sivuston ulkoasun ja eräiden rakenteiden muuttaminen on äärimmäisen helppoa! Sivun tekijän (author) ei tarvitse uudestaan koodata yksittäisiä elementtejä. Minimitapauksessa riittää, että muutat vain muutaman kirjainmerkin ja tuhansien sivujen ulkoasu muuttuu kerralla!

On mahdollista luoda myös löysiä (loose), HTML 4.0 Transitional asiakirjoja. Transitional tarkoittaa "murrosvaiheen" dokumenttityyppimäärittelyä. Asiakirja sisältää muotoiluja, jotka HTML 4.0:ssa strict ei tarvita ja jotka siinä voidaan korvata CSS:llä. Tällaiset määrittelyt katsotaan vähitellen poistuviksi ja korvautuviksi. Paremman yhteensopivuuden vuoksi niitä käytetään vanhempia selaimia varten. Tosin poistuvuuden suhteen olen hieman eri mieltä kuin jyrkimmät CSS:n käyttäjät. Monin paikoin on joustavampaa käyttää HTML 3.2 attribuutteja kuin CSS:ää.

Tämä dokumentti on lähes strict-kriteerit täyttävä. Olen käyttänyt dokumentin varsinaisessa asiaosassa lähes yksinomaan sellaisia elementtejä ja attribuutteja, jotka on mainittu HTML 4.0 strict.dtd asiakirjassa (sen sijaan yksittäisissä linkkeissä ja linkkikokonaisuuksissa on strict-dokumenttityyppiin kuulumattomia elementtejä ja attribuutteja, joihin kuuluu elementille A annettu attribuutti target; lue viimeksi mainittuun attribuuttiin liittyvä Alaviite 2). Tämän dokumentin näyttäminen riippuu vanhoilla selaimilla niiden oletusasetuksista ja käyttäjän niihin tekemistä mahdollisista muutoksista. Testaa ero! Vertaa tiedostoa tyylisivun kanssa () ja ilman sitä (). Jälkimmäinen on kuin HTML 2.0 asiakirja.

Huomautus. HTML 4.01 (HTML 4.0:n korjattu versio) ja CSS2 spesifikaatiot on suunniteltu toteuttamiskelpoisiksi. Selaimen pitää toimia mahdollisimman pitkälle niin, että sen tukemat spesifikaatiot pääsevät toteutumaan. On kuitenkin muistettava se, että HTML ja CSS spesifikaatiot kehittyvät ja niiden kesken tulee olla priorisointi.

Jos eri spesifikaatioiden välillä ilmenee ristiriitoja, toimitaan selaimen tukeman uusimman spesifikaation mukaan. Vanhempia spesifikaatioita toteutetaan siinä määrin kuin niitä voidaan toteuttaa aiheuttamatta ristiriitaa uudempien kanssa.

Koska CSS:n perusideana muualta käsin (kuten erillistiedostoista) pystyä poistamaan tai muuttamaan minkä tahansa esitysasua koskevan HTML-elementin tai -attribuutin vaikutusta, CSS:lle pitää antaa suhteessa HTML:ään etusija, mikäli sekä HTML että vastaava CSS on annettu tai HTML ylipäätänsä käsittelee jollakin tavalla samoja esitysasullisia piirteitä kuin CSS.

Alaviite 1. Seuraavat spesifikaatioiden määritelmät vaativat vähän selittämistä:

Yksittäinen tyylisivu ei sisällä välttämättä useaa sääntöä eli sääntö- tai lausekokoelmaa (a collection of rules (sama kuin a rule set) tai a set of statements). Yksinkertaisimmillaan se sisältää joko yhden säännön tai se ei sisällä lainkaan varsinaista sääntöä, esim. style="color:blue". Tällaisessa tapauksessakin on kuitenkin kyse loogisesti säännöstä, sillä tyylisivuilla on aina suhteellinen painoarvo toisiin tyylisivuihin nähden. CSS2-spesifikaation määritelmä on tosi, kun a set of statements (lausejoukko) määritellään seuraavasti:
Lausejoukko = yksi tai useampi varsinainen tai looginen CSS-sääntö.

Erityisesti Microsoftin tarkoituksena on ollut luoda laajoja maailmanlaajuisia tietokantoja, joissa on mahdollista käyttää etsintäkriteereinä elementtejä ja elementtiryhmiä. Myös erilaiset tieteenalat, kuten matematikka ja kemia voisivat käyttää omia elementtejä. Koska mahdollisille elementeille ei ole mitään rajoituksia ei ole, XML kertoo jo nimenä tämän asian XML is extensible (eXtensible M arkup Language = 'laajennettavissa oleva merkkauskieli').

HTML-dokumenteissa elementeillä on esimääritellyt esitystavat. XML-elementeillä ei ole mitään oletusesitystapaa. Määrittelemätön XML-elementti ei tee yhtään mitään! Eräs tapa antaa XML-elementeille esitystapa on CSS. Jos XML-dokumentit käyttävät samoja elementtejä kuin HTML-elementit, samaa CSS-tiedostoa voidaan käyttää niin HTML- kuin XML-dokumenteillekin (tein lisäsivu:n tästä asiasta).

Toinen keino on XSL (eXtensible Stylesheet Language), jossa on enemmän mahdollisuuksia vaikuttaa XML-dokumenttien rakenteeseen. Microsoft suosii sitä. Se antaa enemmän mahdollisuuksia asettaa elementit toiseen järjestykseen kuin CSS. On kuitenkin huomattava, XSL:n suosiminen johtuu osittain siitä, että Microsoft Internet Explorer:n CSS-tuki ei ole valmis. Puuttuvat piirteet olisivat XML-dokumenttien suhteen tärkeitä. CSS:llä ei voi saada MS IE -selaimille kunnon esitysasua.

Jos toteutus olisi parempi tilanne voisi olla toinen. Lyhyesti sanottuna MS IE ei CSS-tuen osalta täytä XML-vaatimuksia. Esim. Netscape 6.x+ ja Opera 4.x+ -selaimille on XML-dokumenteille luotavissa kunnollinen esitysasu. Käsittelen MS IE 5.5+n ongelmia eräällä lisäsivu:lla).

XML-dokumenttien yhteensopivuus (compatibility) HTML 3.2 -tasoon kykenevien selainten kanssa riippuu XML-sivujen tekijästä. Pahimmassa tapauksessa XML-dokumentit ovat vanhoille selaimille toisiinsa liittynyttä tiivistä tekstiä ja erityiskoodeja (lue alaviite 1, jos tahdot tietää mitä tarkoitan erityiskoodeilla) - käytännössä mahdotonta tai erittäin vaikea lukea. Itse asiassa sivujen tekijä voi luoda oman HTML:ää muistuttavat kielen - XML on ihanne kieli "tee se itse" -ihmisille! XML-dokumentit voidaan kuitenkin laatia sangen luettaviksi myös vanhoille selaimille, jollin kaikki tai useimmat elementit ovat samoja kuin HTML-dokumenteissa (elementtien ei kuitenkaan tarvitse käyttäytyä samalla lailla kuin XML:ää osaavilla selaimilla).

XHTML

Mitä XHTML (eXtensible Hyper Text M arkup Language) dokumentteihin tulee kyse on erityisistä XML-dokumenteista, jotka käyttävät pääosin täysin samoja elementtejä kuin HTML-dokumentit. Ne voidaan ilmoittaa joko HTML tai XML dokumentteina. XHTML-dokumentit pitää aina tehdä XML-sääntöjen mukaan, jotka ovat paljon tiukemmat kuin HTML-dokumenteilta edellytettävät vaatimukset. Ensinnäkin kaikki dokumentit täytyy olla hyvin muotoiltua (well-formed) - enää ei ole sallittua tehdä niin paljon virheitä kuin aiemmin! HTML-dokumenttien ja XHTML-dokumenttien välillä on esim. seuraavia eroja:

Alla on esimerkki hyvin yksinkertaisesta XHTML-dokumentista ():

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>Esimerkki XHTML-dokumentista</title>
   </head>

   <body>
      <h1>Pääotsikko</h1>
      <br />
      <p>Tekstiä.</p>
      <p>Tekstiä.</p>
      <blockquote>Tekstiä lohkositaatin sisällä.</blockquote>
      <ol>
         <li>Tekstiä listan sisällä.</li>
         <li>Tekstiä listan sisällä.</li>
      </ol>
</body>
</html>

CSS-oppaan sivut ovat nykyisin XHTML 1.0 dokumentteja mallisivuja lukuun ottamatta. HTML-tiedostoja on helppo kääntää XHTML:ksi käyttämällä ilmaisen HTML-Kit-editorin HTML Tidy-toimintoa. Jos haluat käyttää samaa CSS-tiedostoa HTML, XHTML ja XML-dokumenteille, on järkevää kirjoittaa elementtien nimet aina pienillä kirjaimilla. Olen pyrkinyt tekemään esimerkkini siten, että niitä voi käyttää myös XHTML-dokumenteissa. Skriptien käyttö on kuitenkin ongelmallista, mutta olen käyttänyt niitä HTML-dokumenttien tapaan.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML.
Other sites: HTML-Kit Home Page.

Seuraava sivu käsittele perus menetelmiä, joilla CSS liitetään Web-sivuille.