The first design (Icicle Outback) can be found here.

Oh, and please excuse me my bad english .

Sen sijaan SWFFix project pyrkii korvaamaan SWFObjectin embed-standardina. Adobe ei ollut kovin innostunut projektin nimestä, koska se antaa ymmärtää, että SWF-formaatti on jotenkin rikki . No nimihän päätettiin sitten vaihtaa uuteen ja tämän kuun alusta se ristittiin omaperäisesti nimellä SWFObject.

SWFFix on julkaissut SWFObjectista uuden version 2.0 beta 1 ja sen voi ladata täältä.

• Laajemmat ohjeet (suomeksi)

Express Install

SWFObject sisältää täyden tuen Adoben Flash Player Express Install- ominaisuudelle. Tämä tarkoittaa käytännössä sitä, että sivulla kävijän ei tarvitse poistua sivulta voidakseen päivittää Flash Playerin.

Käyttääksesi Express Install-ominaisuutta, sinun tulee ladata expressinstall.swf (tiedosto mukana .zipissä) palvelimellesi ja käyttää useExpressInstall-metodia määrittääksesi oikean tiedostopolun. Jos polkua ei määritellä, SWFObject etsii tiedostoa samasta kansiosta, jossa itse HTML-tiedosto sijaitsee.

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");
</script>

Jos haluat testata ExpressInstall:n toimintaa, asenna koneellesi FP7 (tai 6.0.65) ja vieraile täällä.

Jos haluat muokata Express Installin toimintaa, lähdekoodi (FLA) on sisällytetty mukaan pakettiin.
Jos Flash esityksesi aukeaa popupiin, tai haluat ohjata käyttäjän eri osoitteeseen Express Install- päivityksen jälkeen, voit käyttää xiRedirectUrl attribuuttia.

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
so.write("flashcontent");
</script>

Hi there. It’s been a while since I wrote here. But now it is definitely a good day to start again. I received this email from Dave yesterday:

Hi,

First off, thank you so much for your patience in waiting for a Zen Garden update. The past year has been such that other priorities have kept me away from any major updates. It’s just life, but I feel rather bad about making you wait this long for an answer. Sorry about all that.

Thanks for your submission to the css Zen Garden. I’m happy to inform you that “Icicle Outback” has been added as an official design.

Please be sure to take a look and make sure everything got published as you’d expect; if not, reply to this email with an explanation and any missing/supplementary files, and we’ll fix ‘er up.

Thanks for your great work, and feel free to submit again any time!

- Dave

Boy is this an honor. Thanks Dave.
You can find the design here: #200 – Icicle Outback

Add comments here

Mukana on muutamia hankalempiakin kysymyksiä, mutta osaavalle designerille ei suurta onglemaa pitäisi syntyä. Oma tulokseni on 17/20 ja 647 pistettä. Ja sitten visailemaan.

Web Standards Quiz [en]

Eli, jos suunnittelet naulitsevasi elementin sivulle käyttäen fixed:ä, tarvitset avuksi jotain kättä pidempää. Tässä tapauksessa “kättä pidempää” tarjoaa Andrew Clover (doxdesk [en]).

Tarvittavan javascriptin voit ladata doxdeskin sivulta:

fixed.js

Lataat vain skriptin palvelimelle ja lisäät linkin sivulle.

<script type="text/javascript" src="fixed.js"></script>

Näyttävän menun, tekemiseen hover-efekteineen, ei tarvita välttämättä ollenkaan javaScriptiä. Molemmissa on hyvät ja huonot puolensa, mutta molempia yhdistää ainakin se, että kumman tahansa voi tehdä hyvin tai huonosti. Ja luonnollisesti huono toteutus onnistuu meiltä kaikilta käden käänteessä. Hyvään lopputulokseen pääseminen ei toki ole vaikeaa. Se vain vaatii hieman enemmän asiaan paneutumista ja ehkä jonkin verran suunnittelua. Toisaalta, kun ajattelu ja suunnittelu on kerran tehty ja omaksuttu, ei tulevaisuudessa tarvitse enää keksiä pyörää uudelleen. Vanhaa CSS:n ja menun XHTML:n voi helposti liittää suoraan uusiin projekteihin ja muokata sitä tarpeen mukaan.

En käy tässä esimerkissä läpi pudotusvalikoita, vaan tarkoitus on lähinnä näyttää miten yksinkertaisen CSS-menun rakentaminen käy.

Sisältö

• Valmistelut
• XHTML
• CSS
• Lopuksi

Valmistelut

Aloitetaan siis luomalla menun grafiikat. Käytän menussani seuraavanlaisia:

button_normal.gif (w=200px, h=40px)

button_hover.gif (w=200px, h=40px)

XHTML

HTML-sivulle kirjoitetaan seuraava:

<ul id="menu">
   <li><a href="javascript:;">Main 1</a></li>
   <li><a href="javascript:;">Main 2</a></li>
   <li><a href="javascript:;">Main 3</a></li>
</ul>

Listan muotoon rakennettu menu on hyvä ratkaisu sen rakenteen takia. Sitä on helppo päivittää, koska valikon hierarkia on selkeästi hahmotettavissa. Ratkaisu on hyvä myös saavutettavuuden kannalta, koska myös ruudunlukija (Screen reader [en]) osaa kertoa käyttäjälleen menussa olevien elementtien (linkkien) suhteet.

CSS

Menu ei näytä kovin kummoiselta ilman CSS-muotoilua (menu ilman muotoilua), joten katsotaan seuraavaksi mitä asialle voidaan tehdä.

Aloitetaan määrittelemällä itse menun tyylit (fonttiperhe, koko ja tyyli):

ul#menu{
   display:block;
   font-family:Arial, Helvetica, sans-serif;
   font-size:1.1em;
   font-style:normal;
   }

Oletuksena selaimet lisäävät listaelementtien alkuun mustan pallon. Tämä on poistettava.

ul#menu li{
   list-style:none;
   }

Seuraavaksi muotoillaan itse linkit.

ul#menu li a{
   display:block;
   background:#6FB200 url(button_normal.gif) no-repeat top left;
   padding:10px 0 0 10px;
   text-decoration:none;
   width:190px;
   height:30px;
   }

Anchor- tagi <a> on määriteltävä block level- elementiksti, jotta sille voidaan määrittää taustakuva, padding, korkeus ja leveys. Muutoin edellä mainituilla ominaisuuksilla olisi vaikutusta.

Lopuksi määriteellän vielä menun interaktiivinen osuus.

ul#menu li a:link, ul#menu li a:visited{
   color:#165800;
}
 
ul#menu li a:hover, ul#menu li a:active{
   background:#6FB200 url(button_hover.gif) no-repeat top left;
   color:#fff;
}

Ensin siis määritellään linkin “normaalin” ja “käytetyn” tekstin linkin väri ja sen jälkeen linkin hover sekä aktiivinen tila.

Lopuksi

Saata miettiä, että menusta ei ole paljon hyötyä, koska sivustosi vaati vaakatasossa olevan menun. Not to worry… menusta saadaan käden käänteessä tehtyä vaakaversio. Lisätään vain linkin määrittelyyn float-ominaisuus:

float:left;

Selkeyden vuoksi lisäsin vielä tummat reunat linkkiboxien vasempaan reunaan. Näin linkit on helpompi erottaa toisistaan.

CSS- muotoiltu vaakamenu

Pystymenun CSS | Vaakamenun CSS

Kuten huomaat, CSS:n avulla sivun elementtien muotoilu käy todella helposti. Muutos tehdään CSS-tiedostoon ja muutos päivittyy koko sivustolle. Helppoa ja yksinkertaista.

position:absolute;
left:50%;

Sen jälkeen asetetaan elementille negatiivinen vasen marginaali, joka on puolet elementin leveydestä (oletetaan, että leveys on 400px).

margin-left:-200px;

Eli lopputulos voisi näyttää tältä:

#element{
	position:absolute;
	left:50%;
	width:400px;
	margin-left:-200px;
	}

Ennen kuin tutustumme tarkemmin itse syntaksiin, on hyvä tuntea XML:n perusteet, sen rooli ja miten XML:ää käytetään informaation varastointiin ja välitykseen.

XML- terminologian ymmärtäminen on tärkeää, mutta vähintään yhtä tärkeää on rakenteen huolellinen koostaminen. XML “yhdistää” dataa ja järjestelee sen hierarkiseksi kokonaisuudeksi, joten hierarkisesta ajattelutavasta on apua.

Sisältö

• Perusteet
• Määrittely (XML declaration)
• Elementit
• Juurielementti (root element)
• Alielementit (subelements)
• Hierarkia
• Tyhjät elementit
• Attribuutit
• CDATA
• Kommentointi
• Whitespace

Perusteet

Eli miten XML oikeastaan toimii? XML on siis tarkoitettu tiedon varastointiin. Se voi olla staattinen dokumentti, jonka luot kotikoneellasi ja siirrä siiten palvelimelle tai se voidaan luoda dynaamisesti serveripuolella käyttäjän “pyyntöihin” perustuen. Aivan kuten (x)HTML, myös XML käyttää tageja. Ero näiden merkinätkielien välille syntyy kuitenkin siitä, että HTML:ssä käytetään ennaltamääriteltyjä tageja. XML antaa sinulle vapauden luoda täysin oman merkintäkielen ja juuri tämä ominaisuus tekee XML:stä laajennettavan (extensible). Puhutaan myös metakielestä, koska XML ei vain varastoi tietoa, vaan se myös kuvaa sitä. Laatija on tietysti itse vastuussa tagien nimeämisestä ja hierarkian laatimisesta, joten monessa kohtaa voi mennä vikaan. “Huono” nimeäminen ei tarkoita sitä että XML-dokumentti olisi käyttökelvoton, näin vain yksinkertaisesti menetetään yksi XML:n hienoimmista ominaisuuksista. Seuraavassa esimerkki hyvästä ja huonosta nimeämisestä.

huono:

<elementti_0>
   <elementti_1>Guns and Roses</elementti_1>
   <elementti_2>Lies</elementti_2>
</elementti_0>

hyvä:

<cd -kokoelma>
   <esittaja>Guns and Roses</esittaja>
   <albumi>Lies</albumi>
</cd>

Mukautettujen tagien tarkoitus on siis kuvat nimenomaista datarakennetta. Jokaista tagiparia kutsutaan elementiksi.

Määrittely (XML declaration)

Ennenkuin tietoa järjestelemään XML-dokumenttiin, se pitää määritellä XML-dokumentiksi. Jos työstät XML-dokumenttia Flashia varten, tämä vaihe ei ole välttämätön. Dokumentin määrittelu on kuitenkin hyvä ottaa tavaksi, koska se on helppoa ja toisaalta usein (muut sovellukset) se on välttämätöntä.

XML Declaration

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

Ylläoleva siis määrittelee dokumentin XML versio 1.0:ksi (perustuu W3C:n spesifikaatioon) ja käytetyn merkistön enkoodauksen.

Elementit

Elementit sisältävät XML-dokumentissa olevan datan. Ne kuvaavat sekä sisältöä, että rakennetta, toisin kuten HTML:ssä käytetyt tagit, jotka vain kertovat selaimelle, miten elementin sisältämä data tulisi esittää visuaalisesti.

Jokainen XML-dokumentti sisältää vähintään yhden elementin, jota kutsutaa juurielementiksi (root element), sekä vaihtelevan lukumäärän mahdollisia alaelementtejä (subelement). Kaikki tieto sijoitetaan elementteihin. Elementtien käytöön ja nimeämiseen liittyy useita sääntöjä:

• Kaikki elementit tulee sulkea
• Elementin nimi tulee aloittaa jollakin aakkosella. Ensimmäisen kirjaimen jälkeen voidaan käyttää mitätahansa yhdistelmää muodostamalla merkkijono alfanumeerisia merkkejä, väli- ja alaviivoja sekä kaksoispisteitä käyttämällä. Välilyönnin käyttäminen elementin nimessä on kiellettyä.
• Jos haluat muodostaa elementin nimen useammasta kuin yhdestä sanasta, tulee välilyönnit korvata esimerkiksi väliviivalla tai alaviivalla.
• XML tekee eron isojen ja pienien kirjainten välillä (case-sensitive)
• Elementtien nimeämisessä kannattaa olla johdonmukainen. Jotta dokumentin lukeminen ja ylläpitäminen olisi tulevaisuudessa vaivatonta, tagit tulisi nimetä mahdollisimman hyvin sisältöä kuvaaviksi
• Vaikka aiemmin mainitsin, että elementin nimen voi aloittaa millä tahansa kirjaimella, huomaa, että et voi nimetä elementtiä aloittamalla merkkijonolla “xml” . Sääntö koskee kaikkia kirjainten “x”, “m” ja “l” eri yhdistelmiä. Tämä siksi, että W3C on varannut edellämainitut kirjaimet tulevaisuuden laajennuksia varten

Juurielementti (root element)

Jokainen XML-dokumentti vaatii juurielementin. Tämä elementti sisältää koko dokumentin, aivan kuten HTML:ssä <html>- tagi.

< ?xml version='1.0' encoding='UTF-8'?>
<cd -kokoelma>
</cd>

Tässä siis ensimmäinen häivähdys mainitsemastani laajennettavuudesta. Voit nimetä juurielementin haluamallasi tavalla sen sijaan, että käyttäisit HTML:stä tuttua <html>- tagia. Elementti kannattaa tietysti nimetä niin, että se kuvaa mahdollisimman hyvin koko sisältämäänsä datastruktuuria.

Alielementit (subelements)

Kun juurielementti on luotu voidaan luodan alielementtejä.

< ?xml version='1.0' encoding='UTF-8'?>
<cd -kokoelma>
   <genre>rock</genre>
   <genre>punk</genre>
</cd>

Juuri luodut <genre>- elementit ovat siis juurielementin (<cd-kokoelma>) alielementtejä. Nämä elementit on sijoitettu juurielementin sisälle (nested) ja ilmaisevat näin dokumentin hierarkiaa.

XML on tarkka elementtien sulkemisesta, joten tagien sijoittelussa tulee olla huolellinen. Seuraava olisi mahdollista HTML:ssä:

<b><i>väärin</i></b>

XML:ssä tageja ei voi kuitenkaan sulkea “ristiin”.

Hierarkia

XML on rakenteeltaan samankailtainen kuin sukupuu tai vaikkapa tietokoneesi tiedostojärjestelmä. Sisältö noudattaa isäntä-lapsi-suhdetta (parent-child). Toisinsanoen, alielementti on isäntäelementin (parent) lapsielementti (child).

< ?xml version='1.0' encoding='UTF-8'?>
<cd -kokoelma>
   <genre>rock</genre>
   <genre>punk</genre>
</cd>

Edellä mainitussa XML- dokumentin rakenteessa <cd-kokoelma> on isäntäelementti ja <genre>- elementit ovat sen lapsia. Monimutkaisemmassa dokumentissa, jokainen <genre>- elementti voisi sisältää edelleen alielementtejä, jolloin <genre> olisi näiden isäntä. Juuri tämä on XML:n luonne. Koko sisältö on järjestelty hierarkiseen muotoon.

Isäntä-lapsisuhteen lisäksi XML tuntee myös sisarus-suhteet. Edellä mainitussa XML-dokumentissa <genre>- elementit siis jakavat saman sisarsuhteen, ja ovat kaikki juurielementin (<cd-kokoelma>) lapsia.

Viimekädessä, sukupuu- vertaus kuvaa varsin hyvin sisäkkäin asetellun datan luonnetta. Luodessasi lapsielementtejä, määrittelet sisältöä pidemmälle. Isäntäelementit ovat luonteeltaan aina yleiluontoisempia.

Tyhjät elementit

Elemntit voivat olla myös tyhjiä. Tyhjä elementti on tarpeen esimerkiksi, kun dokumentti vaatii elementin, mutta sille ei ole parhaillaan sisältöä (tekstiä tai alielementtiä). Tyhjät elementit voivat sisältää tietoa, mutta palataan siihen jäljelmpänä. Tyhjän elementin syntaksi on seuraava:

<esittaja></esittaja>

Edellämainittu on varmasti tuttu, mutta siitä voidaan käyttää myös lyhennettyä versiota:

<esittaja />

Vielä muutama pääsääntä oikein muodostetusta XML:stä (well-formed):

• Kaikki tagit pitää sulkea
• Dokumentissa voi olla vain yksi juurielementti
• Tageja ei voi “asetella” limittäin

Attribuutit

XML:ssä käytetyt attribuutit ovat samanlaisin kuin HTML:säkin. Ne ovat pohjimmiltaan vain elementille osoitettuja ominaisuuksia. Otetaan esimerkiksi HTML:stä <a>- tagi.

<a href="http://www.domain.com">domain</a>

Eli attribuutti on “href“. Täsmälleen samaa muotoa käytetään XML:ssä.

<genre name="punk"></genre>

Attribuutin “koteloimiseen” voi käyttää joko heittomerkkiä (‘) tai lainausmerkkiä (“).

Edellä käytimme seuraavaa esimerkkiä:

< ?xml version='1.0' encoding='UTF-8'?>
<cd -kokoelma>
   <genre>rock</genre>
   <genre>punk</genre>
</cd>

Sama voitaisiin kirjoittaa käyttäen attribuutteja:

< ?xml version='1.0' encoding='UTF-8'?>
<cd -kokoelma>
   <genre name="rock" />
   <genre name="punk" />
</cd>

CDATA

CDATA tarkoittaa “character dataa“. Sen avulla voidaan elementtiin kirjoittaa merkkejä, jotka on varattu XML:n käyttöön (<, >, &, ‘, “). CDATA- osio sisältää datan, jota XML- sovellukset voivat käyttää sellaisenaan.

Hyvä esimerkki CDATA:n käytöstä on lisätä HTML:ää XML- dokumenttiin. Ilman CDATA:a, XML-jäsennin “näkisi” jokaisen HTML- tagin elementtinä, eikä sisältöä siis esitettäisikään niinkuin oli aluperin tarkoitus.

Kaikki CDATA- esiintymät alkavat seuraavasti:

< ![CDATA[

Sen jälkeen kirjoitetaan haluttu informaatio ja suljetaan CDATA:

]]>

Ja vielä koko esimerkki:

<linkki>
   < ![CDATA[<a href="http://www.domain.com">Domain]]>
</linkki>

Kommentointi

Kommentointi tapahtuu XML:ssä täysin samalla tavalla kuin HTML:ssäkin:

<!-- Tähän kommentti -->

Whitespace

Whitespace on termi jolla kuvataan välilyöntejä (SPACE), rivinvaihtoja (CARRIAGE RETURN) ja sarkainmerkkejä (TAB). Whitespace tekee dokumentista luettavan ja siksi sitä kannatta käyttää hyväksi.

• Mikä ihmeen DOCTYPE
• Mikä DOCTYPE on sinun tyyppiäsi?
• DOCTYPE:n jälkeen tulee Namespace

XHTML- dokumentit alkavat elementeillä, jotka kertovat selaimelle miten merkintää tulkitaan ja validointipalveluille miten dokumentti tulee testata. Ensimmäinen näistä on DOCTYPE (lyhennys sanoista “document type”) määrittely. Tämä tärkeä elementti kertoo validointipalvelulle mitä XHTML- tai HTML- versiota käytät dokumentissasi. Jostain tuntemattomasta syystä (,jonka vain W3C:n insinöörit tietävät) DOCTYPE kirjoitetaan kokonaan ISOILLA kirjaimilla.

Mikä ihmeen DOCTYPE

XHTML sallii suunnittelijoiden/ohjelmoijien hallita monia erityyppisiä dokumentteja, joista jokainen on sidottu noudattamaan omia sääntöjään. Jokaisen tyypin säännöt on lueteltu XHTML- spesifikaatioissa, tekstissä jota kutsutaan nimellä DTD. Dokumentin tyypin määritys kertoo validaattorille ja selaimelle mitä DTD:tä olet noudattanut tehdessäsi sivua. Toisinsanoen kerrot validaattorille ja selaimelle miten sen tulisi tulkita dokumenttiasi.

XHTML tarjoaa kolme mahdollista DOCTYPE- määrittelyä:

• Transitional
• Strict
• Frameset

Mikä DOCTYPE on sinun tyyppiäsi?

Edellämainituista XHTML 1.0 Transitional on kaikkein lähinnä perinteistä HTML:ää. Toisin sanoen, se on ainoa, joka antaa anteeksi esityksellisen merkintätavan sekä elementit ja atribuutit, joita ei enää kehoteta käyttämään lainkaan.

Target- atribuutti on yksi monista, joka on kulkenut tiensä päähän. Jos haluat linkitettyjen sivujen aukeavan uuteen ikkunaan, XHTML 1.0 Transitional on ainoa DTD, joka salli sen.

Vieraile <a href="http://www.domain.com" target="_blank">domain.com</a> uudessa ikkunassa.

Vieraile <a href="http://www.domain.com" target="pop">domain.com</a> nimetyssä ikkunassa.

Avataksesi linkin uuteen ikkunaan käyttäessäsi XHTML 1.0 Strict:ä, tulisi sinun käyttää JavaScriptiä, ja toisaalta sinun tulisi varmistua siitä, että linkit toimivat myös ympäristöissä, joissa ei ole JavaScript- tukea. XHTML 1.0 Transitional antaa anteeksi myös paljon muuta “roskamerkintää”, kuten taustavärin määrittäminen taulukolle. Toisaalta jos olisit määritellyt dokumentin tyypiksi XHTML 1.0 Strict:n ja dokumtti silti sisältäisi vanhentuneen “bgcolor”- atribuutin, validointipalvelu antaisi tästä virheilmoituksen ja moderni selain jättäisi tämän huomioimatta.

XHTML 1.0 Transitional:n määrittely:

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

Dokumenttityyppi tulee dokumenttiin ensimmäisenä. Vasta sen jälkeen tulee “perinteiset” elementit (html, head, title, meta jne.)

DOCTYPE:n jälkeen tulee Namespace

Namespace seuraa välittömästi DOCTYPE:ä. Namespace lisätään perinteiseen html- tagiin seuraavasti:

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

Namespace on kokoelma elementtityyppejä ja atribuutteja, jotka ovat yhteydessä tiettyyn DTD:hen. Kaksi viimeistä ehdollista atribuuttia kertovat, että XML:n versio, jota käytät on kirjoitettu englanniksi ja että itse dokumentti on kirjoitettu myös englanniksi.

1. XHTML on tämänhetkinen merkintästandardi, joka korvaa (tulee korvaamaan) HTML.
2. XHTML on suunniteltu toimimaan hyvin yhdessä muiden XML-pohjaisten kielien, sovellusten ja protokollien kanssa – tätä etua ei ole HTML:ssä.
3. XHTML on johdonmukaisempi kuin HTML, joten “toiminta- ja esitysongelmat” ovat epätodennäköisempiä.
4. XHTML 1.0 toimii siltana tulevaisuuden XHTML- versioihin. Vaihtaminen XHTML 2.0:aan on vaivattomampaa.
5. Vanhat selaimet tukevat yhtä hyvin XHTML:ää kuin perus- HTML:ää. Eli tässä suhteessa ei XHMTL tarjoa sen suurempaa etulyöntiasemaa, mutta siitä ei toisaalta ole myöskään haittaa.
6. Uudet selaimet rakastavat XHTML:ää (erityisesti XHTML 1.0) ja sivun hallinta sen avulla on paljon helpompaa. Uudet selaimet käsittelevät validia XHTML:ää eri tavalla kuin HTML:ää. Tämä tekee lopputuloksesta paljon odotuksenmukaisemman.
7. XHTML toimii aivan yhtä hyvin langattomissa laitteissa, näytönlukijoissa ja muissa “erikoisemmissa” internetlaitteissa kuin tavallisella desktop- selaimellakin. Useissa tapauksissa tämä tarkoittaa sitä, että saavutat suuremman lukijakunnan pienemmällä työllä ja budjetilla, koska sivusta ei tarvitse luoda monia eri versioita. (Esim. monista HTML- sivuista on olemassa “langaton” versio, teksti- versio näytönlukijoille ja tulostusystävällinen sivu, siinä missä XHTML:ää käyttävä vapautuu moisesta rasitteesta. Monissa tapauksissa yksi XHTML- dokumentti palvelee kaikkia, jos se on muotoiltu huolellisesti, ja sitä vartenhan on CSS.)
8. XHTML on yksi osa suurta “standardiperhettä” (pitää sisällään myös CSS:n ja W3C:n dokumenttioliomallin – DOM), jonka avulla voit hallita sivun toimintaa ja ulkoasua laitteesta, järjestelmästä tai selaimesta riippumatta.
9. XHTML auttaa sinua pääsemään eroon esityksellisestä merkinnästä (presentational markup), ja sitä kautta teet sivuistasi käyttäjäystävällisemmät ja sivusi toimivat luotettavammin eri selaimissa. Kirjoittamalla rakenteellista XHTML:ää ja käyttämällä CSS:ää tyylien luomiseen, sinun ei enää tarvitse olla huolissasi siitä miten MSIE ja Netscape esittävät lopullisen työsi.
10. Käyttämällä XHTML:ää merkintäkielenäsi saatat ottaa tavaksesi testata sivusi “validointipalvelussa”, mikä taas saattaa säästää aikaasi virheiden etsinnässä, ja mikä tärkeintä estää niitä edes syntymästä. Yleisimpiä virheitä on jättää alt- atribuutit pois img- tageista.