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>
Sivun kieli voidaan määrittää lisäämällä html-tagiin attribuutit lang ja xml:lang. Lang on oikeastaan periytynyt HTML:stä eikä kuulu enää esimerkiksi XHTML 1.1:een, mutta XHTML 1.0:n kanssa on suositeltavaa molempia kieliattribuutteja. Kieli merkitään lyhenteillä, joista fi on suomi ja en englanti.
<!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" lang="fi" xml:lang="fi">
</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" lang="fi" xml:lang="fi">
<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" lang="fi" xml:lang="fi">
<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" />
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" />
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" />
Joitain metatageja näkee kyllä käytettävän, mutta niillä ei välttämättä ole mitään käytännön merkitystä. Toiset ovat hyvin harvinaisia tai poistuneet käytöstä kokonaan.
Määrittää sivulle avainsanoja, joiden on tarkoitus vaikuttaa hakukoneiden hakutuloksiin. Nykyään suurimmat hakukoneet, kuten Google, eivät noteeraa avainsanoja lainkaan. Jotkin pienemmät sen sijaan saattavat käyttää niitä hyväkseen.
Vaikka avainsanoista on hyvin vähän mitään käytännön hyötyä, niitä näkee yhä paljon käytössä.
<meta name="keywords" content="kultakala, kalanruoka, villen kotisivut, kalastus" />
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" />
Kertoo, mikä on sivun kohderyhmä. Global tarkoittaa kaikkia, local paikallisia ja IU sisäistä käyttöä.
<meta name="distribution" content="local" />
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"> /*<![CDATA[*/ 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" lang="fi" xml:lang="fi">
<head>
<title>Otsikko</title>
</head>
<body>
SIVUN SISÄLTÖ
</body>
</html>
Alla olevassa suomenkielisen sivun 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" lang="fi" xml:lang="fi"> <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>