Yleisimpiä elementtejä

XHTML:n kielen elementit voidaan jakaa kahteen luokkaan: kappaletason ja merkkitason elementteihin.

  • Kappaletason (block) elementit alkavat aina uudelta riviltä. Näitä ovat mm. otsikot, listakohdat ja tavalliset tekstikappaleet.
  • Merkkitason (inline) elementit tulevat aina jonkin kappaletason elementin sisään. Tällaisia ovat mm. erilaiset korostukset ja linkit. Myös viittaukset kuviin tulee laittaa jonkin kappaletason elementin sisään.

Jotkin kappaletason elementit voivat olla sisäkkäisiä, esimerkiksi lista voi sisältää sekä yksittäisiä listakohtia että toisia listoja – jopa tekstikappaleita. Sen sijaan kappaletason elementit eivät saa koskaan olla merkkitason elementtien sisällä.

Kappaletason elementtejä

Otsikot

Otsikkotasoja on olemassa kuutta eri tasoa: h1 tarkoittaa ensimmäisen, h2 toisen, h3 kolmannen tason otsikkoa jne. Otsikkotasot h1-h3 ovat useimmiten käytettyjä otsikkotasoja. Seuraavat esimerkit ilmaisevat, miltä kukin otsikkotasoista h1, h2 ja h3 näyttää:

Merkkaustapa
Näkymä selaimessa
<h1>Sivun pääotsikko</h1>

Sivun pääotsikko

<h2>Toisen tason otsikko</h2>

Toisen tason otsikko

<h3>Kolmannen tason otsikko</h3>

Kolmannen tason otsikko

Huomaa, että otsikkotasojen ulkoasut määräytyvät käytetyn CSS-tyylin mukaisesti: käytä siis otsikkotasoja ensin tekstin jäsentämisessä ja keskity otsikoiden ulkoasuun vasta sitten, kun olet saanut tekstin otsikoineen valmiiksi.

Kappale

Suurin osa dokumentin tekstistä tulee yleensä kappale-elementtien sisään. Kappaleen tunniste on p. Kappaleet tulee muistaa sulkea lopputunnisteella.

<p> ... </p>

Listat

XHTML sisältää kolmenlaisia listoja: järjestämättömiä (ul = unordered list), järjestettyjä (ol = ordered list) ja määrittelylistoja (dl = definition list). Kahdessa ensimmäisessä yksittäiset listakohdat merkataan li-elementillä. Määrittelylistoissa käsitteet merkataan dt-elementillä (dt = definition term) ja niiden kuvaukset perään dd:lla (dd = definition description). Alla näet esimerkin kunkin listatyypin käytöstä:

Merkkaustapa Näkymä selaimessa
 <ul>
   <li>kissa</li>
   <li>koira</li>
   <li>kameli</li>
 </ul>
  • kissa
  • koira
  • kameli
 <ol>
   <li>Mausta kala tuoreella inkiväärillä</li>
   <li>Lisää paprika, chili ja kookosmaito</li>
   <li>Hauduta uunissa sopivan pitkään</li>
   <li>Tarjoa kasvisten kera</li>
 </ol>
  1. Mausta kala tuoreella inkiväärillä
  2. Lisää paprika, chili ja kookosmaito
  3. Hauduta uunissa sopivan pitkään
  4. Tarjoa kasvisten kera
 <dl>
   <dt>Kissa</dt>
     <dd>Naukuva kotieläin</dd>
   <dt>Koira</dt>
     <dd>Haukkuva kotieläin</dd>
   <dt>Kameli</dt>
     <dd>Laaman sukulainen</dd>
 </dl>
Kissa
Naukuva kotieläin
Koira
Haukkuva kotieläin
Kameli
Laaman sukulainen

Järjestämätön lista (ul) on helposti vaihdettavissa järjestetyksi (ol) – ja päinvastoin – vain ympäröivää listaelementtiä vaihtamalla.

Geneerinen kappaletason elementti div

XHTML sisältää ns. geneerisen kappaletason elementin eli div-elementin. Kyseisen elementin avulla tekstiä ja muita elementtejä voidaan jaotella itse määriteltäviin rakenteellisiin kokonaisuuksiin. Kun olet jaotellut sivulla olevan tiedon järkeviin kokonaisuuksiin (alla  olevassa esimerkissä div-elementillä on määritelty yksinkertainen tietoiskulaatikko), voit muokata mm. kokonaisuuksien (esimerkissämme tietoiskulaatikon) ulkoasua hyvin yksinkertaisesti ja nopeasti tyylien avulla.

<div class="infoboksi" id="bernerslee">
<h3>Tiesitkö?</h3>
<p>HTML:n ja WWW:n keksi ja kehitti Tim Berners Lee
Cernissä 1990-luvun puolivälissä.</p>
</div>

Huomaa, että div-elementille annetaan yleensä nk. class– ja / tai id-attribuutti. Näitä kahta attribuuttia voidaan käyttää myös missä tahansa muussa elementissä ja niille voidaan antaa mikä tahansa itse valittu arvo. Attribuuttien käyttö on hyödyllistä mm. seuraavista syistä:

  • class: kun määrität elementille class-attribuutin, voit määrittää käyttämällesi elementille mm. ulkoasun erillistä CSS-tyylitiedostoa käyttämällä. Koska div-elementillä ei ole oletusulkoasua, div-elementin käyttö ei myöskään vaikuta sivun ulkoasuun. CSS-tyylitiedostoa hyödyntämällä ja käyttämällä class-attribuuttia elementin määrittelyn yhteydessä, voit kuitenkin helposti “hakea” elementille CSS-tyylitiedostossa määritetyn ulkoasun (aiheesta lisää Tyylitiedostojen käyttö – CSS -sivulla).
  • id: kun määrität elementille id-attribuutin, voit mm. viitata kyseisellä id:llä määritettyyn elementtiin helposti toisista verkkosivuista käsin.

Class-attribuutilla kuvaillaan siis elementin tyyppiä, kun taas id toimii elementin yksilöivänä tunnistimena. Kahdella elementillä samalla sivulla ei siten saa olla samanarvoista id:tä.

Muita kappaletason elementtejä

Muita kappaletason elementtejä ovat mm. blockquote (kappaletason lainaus), table (taulukko) sekä välilyönnit, rivinvaihdot ja sisennykset sellaisenaan esittävä pre (pre = preformatted). Näiden ja monien muiden elementtien merkkaustavat  käyvät ilmi mm. HTML Dog:in ohjesivuilta.

Merkkitason elementtejä

Korostukset

XHTML-sisältää kaksi erilaista korostusta. Elementti em (em = emphasis) on tarkoitettu kevyeen korostamiseen: selaimet esittävät em-korostuksen yleensä kursivoituna. Astetta voimakkaampi strong esitetään yleensä lihavoituna.

<p>
XHTML:ssa tekstiä voi korostaa <em>kevyesti</em> tai
<strong>painokkaasti</strong>.
</p>

Vanhempi HTML sisältää myös lihavoinnin (b) ja kursivoinnin (i). Nämä on kuitenkin ulkoasua kuvaavina elementteinä poistettu XHTML:n uudemmista versioista.

Hyperlinkki

Aiemmilla sivuilla tutustuit jo hyperlinkkiin eli viittaukseen, joka kohdistuu toiseen verkkosivuun, tiedostoon tai verkko-osoitteeseen. Hyperlinkkinä toimiva teksti merkataan a-elementillä ja linkin kohde kerrotaan href-attribuurilla. Attribuutti voi saada arvokseen tiedostonimen tai verkko-osoitteen eli URL:n:

<p>
Tämä kappale sisältää
<a href="http://www.helsinki.fi">Helsinki.fi-osoitteeseen</a>
johtavan linkin.
</p>

Huomaa, että voit käyttää pelkkää tiedostonimeä, jos viittauksen kohde sijaitsee samassa hakemistossa viittaavan XHTML-sivun kanssa – muussa tapauksessa sinun tulee ilmoittaa href-attribuutin avulla myös tiedoston polku. Alla olevat esimerkit selventävät asiaa: ensimmäinen linkki osoittaa samassa kansiossa olevaan koirat.htm-sivuun, toinen puolestaan valokuvat-alihakemistossa olevaan leirikuvat.htm-sivuun:

<a href="koirat.htm">Elämäni koirat</a>
<a href="valokuvat/leirikuvat.htm">Leirikuvia 2006</a>

Pakotettu rivinvaihto

Rivinvaihtoelementin br avulla voi halutessasi katkaista otsikon tai kappaleen tekstin alkamaan uudelta riviltä. Kyseinen elementti soveltuu mm. osoitetietojen rivittämiseen:

<p>
Raimo Keski-Vääntö <br />
Leskirouva Freytagin kuja 59 B 66 <br />
00790 HELSINKI
</p>

Huomaa, että pakotettuja rivinvaihtoja tulisi yleensä välttää: niitä ei tule käyttää kappalejaon tekemiseen!

Rivinvaihto on tyhjä elementti, eli sillä ei ole tekstisisältöä, jota voisi ympäröidä alku- ja lopputunnisteella. Tyhjä elementti ei tarvitse erillistä lopputunnistetta, joten elementin loppua merkkaava kauttaviiva voidaan laittaa alkutunnisteen sisään:

<br />

Kuva

Valokuvien ym. kuvien asettaminen verkkosivulle onnistuu img-elementin avulla. Kyseinen elementti on merkkitason elementti, joten se on siis aina laitettava jonkin kappaletason elementin sisään:

<p>
<img src="dromedaari.jpg" alt="Yksikyttyräinen kameli" />
</p>

Esitettävän kuvan tiedostonimi tai verkko-osoite kerrotaan src-attribuurilla. Kuvalla on myös  oltava alt-attribuutilla kerrottava vaihtoehtoinen kuvaus. Vaihtoehtoinen kuvaus esitetään, jos selain ei pysty esittämään kuvia tai kuvan lataus epäonnistuu.

Kuva- eli img-elementti on rivinvaihdon tavoin tyhjä elementti: sillä ei siis ole tekstisisältöä. Niinpä myös img-elementin osalta elementin loppua merkkaava /-merkki tulee laittaa alkutunnisteen sisään.

Geneerinen merkkitason elementti span

Kappaletason elementin div vastine merkkitasolla on span. Sen avulla tekstistä voidaan merkata esim. henkilöitä tai käsitteitä, joille ei ole omaa elementtiä. Myös span-elementin kanssa käytetään yleensä class- tai id-attribuuttia:

<p>
Sivujen <span class="toiminto">tekeminen</span> on hauskaa!
</p>

Tiettyjen sanojen tai lauseiden ympäröiminen span-elementin avulla on järkevää mm. silloin, kun haluat antaa sivusi koodissa oleville lauseille semanttisia merkityksiä. Seuraava esimerkki havainnollistaa asiaa:

<p>
Orava, tuo söpö ja pieni eläin on monien pihojen vakioasukas.
Suomessa yleisen oravan <span class="tieteellinennimi">Sciurus
vulgaris</span> kanssa kannattaa kuitenkin olla varovainen,
jotta se ei ryhdy kotisi sisätilojenkin asukkaaksi!
</p>

Perehdyttyään semanttisen verkon saloihin Raimo osallistuu eräässä Suomen luontoa käsittelevässä Wikissä sivuston ylläpitoon. Ensitöikseen Raimo lisää kyseisessä wikissä eläinten tieteellisten nimien ympärille <span class=tieteellinennimi>-elementin. Tämän jälkeen Raimo lisää wikin eräälle sivulle hakutoiminnon, jolle hän antaa nimeksi “Etsi wikissä mainittuja eläimiä latinankielisen nimen perusteella”. Niinpä sivuston käyttäjät voivat hakea tietoa wikisivuilta erittäin helposti ja nopeasti monella eri tavalla.

Muita merkkitason elementtejä

Muita hyödyllisiä elementtejä ovat esimerkiksi ins ja del (lisätty ja poistettu teksti), cite (lainaus), code (koodi) sekä acronym (lyhenne) ja abbr (kirjainsana). Lisää merkkitason elementtejä löydät mm. jo aiemmin mainitusta HTML Dog:ista.

Kommentit

XHTML-koodin sisälle on mahdollista kirjoittaa myös kommentteja, jotka eivät näy itse verkkosivulla. Kommenttien avulla voit mm. selventää koodia sen käytön osalta. Alla esimerkki:

<!-- Tähän kohtaan tulee asettaa 300x200-kokoinen kuva -->