Dokumenttityyppi on kaikilla sivuilla aina pakollinen.
XHTML:stä on eri versioita. Selaimet tulkkaavat eri versioita eri tavoin, joten on oleellista kertoa sivun alussa dokumenttityyppimäärittelyn avulla, mitä versiota se käyttää. Muuten sivu voi näkyä vierailijoille väärin.
XHTML 1.0:sta on kolme erilaista muunnosta sen mukaan, mihin tarkoitukseen sivua käytetään ja millaista koodia sillä on. Nämä muunnokset ovat seuraavat:
| Muunnos | |
|---|---|
| strict | Tiukka muunnos, joka vaatii, että kielioppia noudatetaan. Epäsuositeltavia elementtejä, kuten HTML:n <font>-tageja, ei hyväksytä. |
| transitional | Strictiä höllempi muunnos, joka sallii myös epäsuositeltavia elementtejä. Ei ole yhtä tarkka kieliopin suhteen. |
| frameset | Kehyksille tarkoitettu dokumenttityyppi. Ei saa käyttää "normaaleilla" sivuilla. |
Sivun dokumenttityyppi määritellään lähdekoodin ensimmäisellä rivillä seuraavasti:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [muunnos]//EN" "[osoite]">
Jossa
Html-tagit ovat kaikilla XHTML-sivuilla pakollisia. Ne sijoitetaan lähdekoodiin dokumenttityypin jälkeen. Dokumenttityypin lisäksi vain kommentti saa olla html-tagien ulkopuolella, kaikki muu koodi ja sivun sisältö tulee sijoittaa html-tagien sisälle.
XHTML:ssä html-tagiin lisätään pakollisena attribuutti xmlns.
<!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">
</html>
Head-tagien välissä ei sijaitse sivun varsinaista sisältöä (esimerkiksi artikkeleita tai kuvia). Sen sijaan se on paikka, jonne sijoitetaan link-, meta-, script-, style- ja title-tagit. Nämä tagit tyypillisesti liittävät sivuun erilaisia tietoja, esimerkiksi ulkoisen CSS-tiedoston tai tiedot sivun tekijästä. Lueteltujen elementtien lisäksi ainoastaan kommentti on sallittu head-tagien sisällä.
Head-elementti sijoitetaan html-tagien sisälle, tyypillisesti ennen bodya.
<!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">
<head>
</head>
</html>
Näitä elementtejä ei saa käyttää muualla kuin head-tagien välissä.
Title on head-tagien sisälle sijoitettava elementti, joka ilmoittaa sivun otsikon. Otsikko näkyy tyypillisesti mm. selaimen yläpalkissa osoiterivin yläpuolella. Mikäli title-elementtiä ei ole tai se on tyhjä, otsikkona näkyy sivun osoite.
<!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">
<head>
<title>Otsikko</title>
</head>
</html>
Meta-tagien avulla voidaan merkitä sivulle erilaisia piilotettuja tietoja, esimerkiksi sivun merkistö, tekijä, viimeisin päivitysaika ja niin edelleen. Meta-tagien avulla voidaan myös antaa ohjeita hakukoneille (lisäävätkö ne sivut hakemistoihinsa vai eivät) ja siirtää vierailija toiseen osoitteeseen.
Periaatteessa meta-tagien avulla voi ilmaista minkälaisia tietoja tahansa. Tiedon nimi ilmaistaan yleensä name-attribuutilla ja itse tieto content-attribuutilla:
<meta name="tiedon nimi" content="itse tieto" />
Content ja name eivät kuitenkaan ole ainoita attribuutteja, joilla meta-tagien käyttöä säädellään. Toinen yleinen tapaus on sivun tyyppiä määrittelevä http-equiv-attribuutti ja sen kaverina content:
<meta http-equiv="tyyppi" content="itse tieto" />
Näiden lisäksi yleisessä käytössä on vielä scheme-attribuutti, joka tarkentaa, missä muodossa metan tiedot esiintyvät.
Alla on eräitä yleisimmin käytettyjä meta-elementin muotoja.
Määrittää sivulle kuvauksen, jota jotkin hakukoneet käyttävät näyttäessään hakutuloksia.
<meta name="abstract" content="Villen kultakalasivusto, jolta löytyy laaja valikoima kalanruokia." />
Ilmoittaa sivun tekijän nimen.
<meta name="author" content="Matti Meikäläinen" />
Ilmoittaa sivun kielen (fi = suomi, en = englanti).
<meta http-equiv="content-language" content="fi" />
Määrittää sivun sisällön tyypin ja merkistön. Nämä kaksi erotetaan toisistaan puolipisteellä ja välilyönnillä.
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Kertoo, kuka omistaa sivun tekijänoikeudet.
<meta name="copyright" content="Anda 2002-2007" />
Määrittää sivulle kuvauksen, jota useat hakukoneet käyttävät näyttäessään hakutuloksia.
<meta name="description" content="Villen kultakalasivusto, jolta löytyy laaja valikoima kalanruokia." />
Kertoo, kuka on sivun suunnittelija.
<meta name="designer" content="Matti Meikäläinen" />
Kertoo, mikä on sivun kohderyhmä. Global tarkoittaa kaikkia, local paikallisia ja IU sisäistä käyttöä.
<meta name="distribution" content="local" />
Kertoo sivun sisällön soveltuvuuden eri ikäryhmille. Luokat ovat safe for kids, 14 years, general, restricted ja mature.
<meta name="document-rating" content="safe for kids" />
Ilmoittaa päivän, jolloin sivun tiedot vanhenevat. Päivämäärä esitetään englanninkielisessä muodossa, esimerkiksi Mon, 01 Jan 2011 01:00:00 GMT.
<meta http-equiv="expires" content="Wed, 01 Jan 2011 01:00:00 GMT" />
Ilmoittaa sivun luoneen generaattorin nimen.
<meta name="generator" content="Wordpress" />
Määrittää sivulla avainsanoja, jotka mm. monet hakukoneet ottavat huomioon näyttäessään hakutuloksia.
<meta name="keywords" content="kultakala, kalanruoka, villen kotisivut, kalastus" />
Kertoo, kuka sivun on julkaissut.
<meta name="publisher" content="Matin makkara oy" />
Päivittää sivun tietyn ajan välein. Aika ilmoitetaan sekunteina. Mikäli ajaksi ilmoitetaan 0, viivettä ei ole. Ajan perään voi myös kirjoittaa puolipisteen sekä sivun osoitteen muodossa url=osoite, jolloin vierailija ohjataan halutulle sivulle seuraavan päivityksen yhteydessä.
<meta http-equiv="refresh" content="3;url=http://www.esimerkki.esim" />
<meta http-equiv="refresh" content="5" />
Kertoo hakukoneille, kuinka pian niiden olisi suotavaa vierailla sivuilla uudelleen. Useimmat robotit eivät tosin noudata tätä.
<meta name="revisit-after" content="10 days" />
Contentin arvot "index" ja "noindex" antavat hakukoneille ja muille roboteille ohjeita siitä, otetaanko sivu hakukoneiden hakemistoihin vai ei. Tavallisesti hakukoneet löytävät uusia sivuja seuraamalla muiden sivujen linkkejä. Follow- ja nofollow-määreiden avulla voidaan määrittää, saako hakukone (ja muut robotit) seurata jonkin tietyn sivun linkkejä vai ei. Index ja follow ilmaistaan samassa meta-tagissa, mutta ne erotetaan toisistaan pilkulla. Toisen voi myös halutessaan jättää pois. Arvo voi olla myös pelkkä none tai all.
<meta name="robots" content="noindex, follow" />
Ilmoittaa sivun aiheen.
<meta name="subject" content="kultakalojen hoito" />
Link-elementin avulla voidaan linkittää eri dokumentteja toisiinsa. Esimerkiksi tavalliselle XHTML-sivulle voidaan linkittää ulkoinen CSS-tiedosto tai asettaa favicon-kuva.
<link />
Href-attribuutilla määritetään linkitetyn tiedoston osoite.
<link href="ulkoinen.css" />
Type-attribuutti kertoo, mitä tyyppiä linkitetty tiedosto on. Tämän ilmaisuun käytetään mime-tyyppiä.
<link href="ulkoinen.css" type="text/css" />
Rel kertoo, mikä on linkitetyn tiedoston suhde dokumenttiin nähden. Linkitetty tiedosto voi olla esimerkiksi sivun ulkoinen CSS-tyyliarkki tai sisällysluettelo.
Rev puolestaan on relin vastakohta: se kertoo, mikä on sivun suhde linkitettyyn tiedostoon.
Rel ilmoitetaan link-elementin yhteydessä lähes aina, rev on harvemmin käytetty.
<link href="ulkoinen.css" type="text/css" rel="stylesheet" />
Media-attribuutti kertoo, mille ympäristölle linkitetty tiedosto on tarkoitettu. Vaihtoehdot ovat seuraavat:
<link href="ulkoinen.css" type="text/css" rel="stylesheet" media="print" />
Charset-attribuutin avulla ilmoitetaan linkitetyn tiedoston käyttämä merkistö.
<link href="ulkoinen.css" type="text/css" rel="stylesheet" charset="UTF-8" />
Hreflangin avulla ilmoitetaan lyhenteenä linkitetyn tiedoston pääkieli. En tarkoittaa englantia, fi suomea.
<link href="ulkoinen.css" type="text/css" rel="stylesheet" hreflang="fi" />
Style-tagien avulla yksittäiselle sivulle voidaan liittää haluttuja CSS-muotoiluja. Style-tagilla voi olla lisäksi seuraavia attribuutteja:
Haluttu CSS sijoitetaan style-tagien sekä kommentin sisään:
<style type="text/css"> <!-- CSS TÄHÄN --> </style>
Body on se elementti, jonka sisälle sivun sisältö (tekstit, kuvat, linkit, listat...) tulee. Tyypillisesti kaikki elementit lukuun ottamatta elementtejä html, head, title, link, meta, script ja style tulee sijoittaa body-tagien väliin. Kommentit ovat sallittuja sekä bodyn ulko- että sisäpuolella.
Bodya ei saa sijoittaa head-tagien sisään.
<!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">
<head>
<title>Otsikko</title>
</head>
<body>
SIVUN SISÄLTÖ
</body>
</html>
Alla olevassa perusrungossa käytetään dokumenttityyppinä XHTML 1.0:n tiukinta muunnosta, strictiä.
<!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"> <head> <title>Otsikko</title> (Mahdolliset meta-, link- ja style-tagit tulevat tähän.) </head> <body> SIVUN SISÄLTÖ </body> </html>