Elementit, tunnisteet ja attribuutit

Elementit ja tunnisteet

XHTML-merkkauskielen elementit ovat verkkosivulla käytettäviä “rakennuspalikoita”, jotka koostuvat tunnisteista (tag). Elementtiin kuuluu sekä alkutunniste että lopputunniste sekä tunnisteiden ympäröimä sisältö, esimerkiksi otsikko tai tekstikappale. Seuraavassa elementtiesimerkissä <h1> on alkutunniste, “My Photo Gallery” tekstisisältö ja </h1>-lopputunniste:

    <h1>My Photo Gallery</h1>

Esimerkin <h1>-tunnistetta käytetään otsikkojen merkitsemiseen. Huomaa, että elementit voivat olla myös sisäkkäisiä eli sisältää myös toisia elementtejä. Esimerkki:

<h1> <a href="gallery.htm"> My Photo Gallery </a> </h1>

Attribuutit

Elementeillä voi olla attribuutteja, jotka antavat mm. verkkoselaimille lisätietoa käytetystä elementistä. Attribuutit merkitään elementin alkutunnisteen sisään ja ne saavat aina jonkin arvon, joka määritetään lainausmerkkien sisällä. Eri elementeillä on omia, vain ko. elementtityypille ominaisia attribuutteja. Tiettyjä attribuutteja taas voidaan antaa mille tahansa elementille. Seuraavassa esimerkissä verkkosivulle sijoittavalla kuvaelementillä on attribuuttina kuvan tiedostonimi:

    <img src="koira.jpg" />

Huomaa, että edellisessä elementissä elementin aloitus- ja lopetustunniste on merkitty yhteen ja samaan kokonaisuuteen käyttämällä /-merkkiä tunnisteen lopussa.

XHTML-sivun katselu selaimella

Seuraava XHTML-esimerkki sisältää h1-elementillä merkittävän pääotsikon, p-elementillä merkityn tekstikappaleen ja a-elementillä merkityn linkin. Huomaa esimerkistä seuraavat, yleisesti XHTML:ää koskevat seikat:

  • Elementtien alkua ja loppua kuvaavat tunnisteet kirjoitetaan kulmasulkujen eli < ja > -merkkien sisään.
  • Alku- ja lopputunnisteet ovat muuten samanlaiset, mutta lopputunniste sisältää lisäksi /- eli kauttaviivan ennen tunnisteen nimen alkua.
  • Elementeille voidaan antaa lisätietoja erilaisilla attribuuteilla. Esimerkiksi a-elementin linkkikohde on ilmaistu href-attribuutilla, joka saa arvokseen linkin kohteena olevan www-osoitteen.
<h1>Hei maailma!</h1>
<p>
Tämä on yksinkertainen tekstikappale, joka sisältää
<a href="http://www.helsinki.fi">linkin</a>.
</p>

Edellinen XHTML-merkintä näkyy selaimessa seuraavalla tavalla:

Laatikkometafora

Voit helpottaa XHTML-merkkauskielen rakenteen hahmottamista ajattelemalla elementtiä laatikkona ja tekstiä tms. sivun sisältöä laatikkoon pakattuna sisältönä. Tällöin:

  • Elementit järjestävät verkkosivun sisältöjä “laatikkoina” toisistaan erillisiksi kokonaisuuksiksi
  • Erinimiset elementit ovat erityyppisiä laatikoita ja sisältävät erityyppistä tietoa
  • Laatikot voivat olla sisäkkäisiä, mutta eivät koskaan limittäisiä
  • Attribuutit ovat laatikkoon liimattuja lappuja, jotka sisältävät laatikon käsittelyohjeita.