Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > D Mikä on (X)HTML-elementtien semantiikka

D Mikä on (X)HTML-elementtien semantiikka

Aiheet

• Yleistä
• Tämän sivuston semantiikka
  • Rivinsisäiselementit
  • Lohkoelementit
• Muut elementit
• Semantiikan tärkeys kuulotyylisivuille

Yleistä

HTML-elementtejä pitäisi käyttää niiden alkuperäisen käyttötarkoituksen mukaan. Esitysasuun vaikuttavien elementtien sijaan pitäisi käyttää elementtejä, joilla on selvä semanttinen merkitys. Tosin jos halutaan tukea Netscape 4.x -sarjan selaimia esitysullisten elementtien käyttö on mielekästä tilanteissa, joissa annettu CSS ei jostakin syystä toimi (olen joutunut käyttämään niitä eräissä navigaatioelementeissä).

Englanninkielisissä teksteissä semanttisista niistä käytetään nimitystä phrasal (phrasal element = fraasielementti, fraasimainen elementti).

Mikä sitten on fraasielementti? Seuraava lohko antaa vastauksen:

Fraasielementti on sellainen tekstielementti, jolla on mahdollisimman mediariippumaton semantiikka. Olennaista elementillä on se, että se kuvaa vakiintunutta ilmaisutapaa eli fraasia. Elementin nimi on sisällöllisesti määritelty eli sisältöriippuvainen (ja sitä tulisi käyttää vain asianmukaisissa sisältöriippuvaisissa tilanteissa). Esimerkkinä tämä lohkositaatti (elementti BLOCKQUOTE), jossa ikään kuin siteeraan itseäni.

Ilmaisun fraasielementti ohella kirjoitan lauseke-elementeistä (phrase =lauseke), sillä elementtien perusolemus on tekstuaalinen, vaikka niiden sisään voidaan sijoittaa tekstin ohella myös grafiikkaa.

Lohkolauseke-elementeillä on aina enemmän tai vähemmän rakenteellinen merkitys, mitä rivinsisäiselementeillä ei ole. Semantiikan tärkeys koskee siten erityisesti rivinsisäiselementtejä. Käytän lähes yksinomaan Inline Phrasal eli rivinsisäisiä fraasielementtejä ja ilmaisen esitysasun CSS:llä ja CSS:n käyttöön liittyvällä elementillä SPAN.

HTML 4.01 ja XHTML 1.0 dokumenteissa jaksoissa, jotka tarvitsevat vain esitysasullisia ohjeita, tulisi käyttää DIV (division > div = jaos; lohkotaso) ja rivinsisäiselementtinä SPAN (span = säätöalue; rivinsisäistaso) elementtejä. Ne ovat yleiselementtejä, jotka on erityisesti suunniteltu esitysasun määrittämiseen CSS:n avulla (niillä on myös eräitä muita yleiskäyttöjä kuten kieliohitukset). Jos jotkin mediatyypit eivät tarvitse niitä, ne voidaan hypätä yli aiheuttamatta mitään harmia dokumenttien semantiikalle. Em. elementtejä voi käyttää mihin tahansa, sillä ne ovat yleiselementtejä, joilla ei ole tarkasti määriteltyä semantiikkaa (CSS:n ohella niitä voi käyttää mm. kieliohituksiin).

Tämän sivuston semantiikka

Koska HTML ei pysty kuvaamaan kaikkea semantiikka, olen käyttänyt lähinnä sopivia elementtejä. Tämän sivuston (sekä vastaavan englanninkielisen sivuston ja niiden Oppaan lisäsivujen) semanttisesti käytettyjen elementtien merkitykset ovat seuraavanlaisia:

Rivinsisäiselementit

• ACRONYM (= akronyymi, kirjainsana): jos jollakin termillä on lyhenne, käytän tätä elementtiä käsitellessäni lyhenteen merkitystä. CSS toimii ainakin MS IE 5.x+, Opera 4.x+ ja Mozilla Gecko (esim. Netscape 6.x+) -selaimissa ja ainakin Opera 5.x+, MS IE 5.5+ ja Netscape 6.x+ -selaimet pystyvät näyttämään elementtiin liitetyn title attribuutin, kun hiiri menee tekstin päälle. Opera 7.x laittaa border-bottom: 1px dotted, jos em. elementille on määritelty title attribuutti (sama koskee elementtiä ABBR). Esimerkki.
• DFN (definition > dfn = määritelmä): käytän tätä lyhennyksen määrittelyssä elementin ACRONYM yhteydessä.
• CODE (= koodi): ilmaisen tällä merkintäkoodeja (lähinnä elementtejä ja attribuutteja) kuten tässäkin listakohdassa.
• SAMP (sample > samp = (koodi)näyte): käytän tätä kaikentyyppisten kommenttien esittämiseen (esim. /* tämä on CSS-kommentti */), sillä ne ovat eräänlaisia (ainakin sivun laatijalle) kirjaimellisesti luettavaa koodausta.
• VAR (variable > var = muuttuja): käytän tätä ns. scripting language -koodauksen eli skriptien esittämiseen. Skriptithän perustuvat muuttujien (variables) käyttämiseen ja tämä elementti symbolisoi minulle koko kieltä (esim. getDocumentElement()).
• CITE (= lainaus): elementin BLOCKQUOTE sisällä käytän sitä sitaattina. Normaalitekstin sisällä käytän sitä myös ikään kuin termin, organisaation, henkilön, jakson or web-osoitteen nimen sitaattina. CITE on lähin käytettävissä oleva elementti ja sopii esim. Inline Phrasal kuvaamiseen varsinkin jos siinä käytetään isoja alkukirjaimia eikä vain pieniä kirjaimia. Käyttö on puhtaasti teknistä, ei esitysasullista.
• EM (emphasized > em = painotteinen): käytän tätä lähinnä osoittamaan korostetun termisitaatin, kun mainitsen tärkeän termin ensimmäistä kertaa (esim. structure).
• Q (quote > q = siteerata): tarkoitettu lyhyisiin sitaatteihin lohkojen sisällä, jolloin käytettäisiin maakohtaisia lainausmerkkejä (selaimen tulisi tehdä tekstin ympärille edes jonkinlaiset lainausmerkit). MS IE 5.x+ tunnistaa elementin, mutta ei lisää lainausmerkkejä. Elementti toimii Opera 4.x+ ja Mozilla Gecko -selaimissa suunnitellulla tavalla. Käytän tätä sanojen merkityksen selittämisessä sekä koodiesimerkkien kommenttiosissa.
  Testi - tämän tekstin tulisi olla punainen ja sen pitäisi olla lainausmerkkien sisällä ja sillä tulisi näkyä opasteksti.
• STRONG (= vahva (ilmaus)): sellainen korostettu teksti, joka ei ole termi.
  Huomautus. Rajanveto sen välillä, mikä on virallinen termi ja mikä termin selitys on suomen kielen kohdalla vaikeaa, sillä yhteisesti sovittua suomenkielistä ATK-sanastoa ei ole olemassa (sellaisia on kyllä tekeillä). Olen korostanut eri lailla selkeästi omat käsitteeni ja suhteellisen viralliset termit. Vastaava englanninkielinen sivusto on tältä osin selkeämpi.
• SUB and SUP (subscript > sub, supscript > sup = alaindeksi ja yläindeksi): käytän niitä vain semanttisesti kuten rivisisäisiä fraasielementtejä (Inline Phrasal), sillä se on niiden alkuperäinen käyttö (katso nootit elementille ABOVE jne.), vaikka Modularization of XHTML™ -dokumentaatiossa ne on luokiteltu Inline Presentational elementteihin. Elementtien luokittelu on ongelmallista, sillä ne ovat jotain esitysasullisten ja lauseke-elementtien väliltä. Niiden sijasta voitaisiin tosin käyttää rivinsisäisiä fraasielementtejä joidenkin semanttisten luokkien kanssa (esim. <var class="superscript">).

Lohkoelementit

• ADDRESS (= osoite): käytän alkuperäistarkoituksessa sivun lopussa oleviin yhteystietojen esittämiseen. Ilmaisen tällä elementillä myös asiakokonaisuuteen liittyvän web-osoite joukon eli tavallaan kyse on muille sivustoille johtavista yhteystiedoista. Esimerkki.
• BLOCKQUOTE (= lohkositaatti): käytän alkuperäistarkoituksessa, kun siteeraan jonkun henkilön tekstiä. Lisäksi näiden sisällä on useimmat pidemmät koodiesimerkit ikään kuin koodisitaatteina (elementti PRE ei aina sovellu niiden esittämiseen).
• PRE (preformatted > pre = esimuotoiltu). Esitän sillä joitakin koodiesimerkkejä tilanteissa, joissa se toimii paremmin kuin elementti BLOCKQUOTE. Elementin semanttinen merkitys on siinä, että koodin väliin jäävällä valkotilalla (white space) on merkitystä (teksti esimuotoillaan kooditasolla ja nimi PRE kuvaa elementin jäsentelyohjetta - se ei täytä fraasielementin ihanteita eikä se siten kuuluisi niiden joukkoon vaan se vaatisi oman luokituksen, mitä W3C ei ole katsonut aiheelliseksi tehdä).
• H1-H5 (heading > h) = otsikko. Sen sijaan että luodaa otsikoita sisäkkäsillä elementeillä (esim. <P><BIG><BIG>...) on paljon järkevämpää käyttää otsikkoelementtejä. Olen käyttänyt niitä systemaattisesti viidellä tasolla (alin taso on H6, jota en ole käyttänyt).
• DL (definition list > dl = määrittelylista). Elementillä DL sekä sen lapsielementeillä (DT ja DD) on vahva sementtinen käyttötarkoitus ja ne muistuttavat täten lohkofraasielementtejä BLOCKQUOTE ja ADDRESS. Käytän niitä joissakin sitaateissa. Käytän myös muita listaelementtejä useimmiten semanttisista syistä.
• P (paragraph > p = kappale). Vaikka elementti P on luokiteltu Modularization of XHTML dokumentaatiossa Block structural, käytän sitä vain tekstikappaleiden esittämiseen. Mielestäni sitä voi verrata elementtiin ADDRESS - sekä elementillä P että ADDRESS on vahva semanttinen merkitys ja molemmat ovat heikkoja rakenne-elementtejä. Kappale on perusfraasi ja BLOCKQUOTE jne. ovat erikoisfraaseja. Käytän CSS-sivuillani elementtiä DIV ensisijaisena rakenne-elementtinä. Suosittelen yleisestikin tätä käytäntöä.

Muut elementit

Joitakin teoriassa mahdollisia semanttisia rivinsisäiselementtejä en ole käyttänyt:

• ABBR (abbreviation > abbr = lyhenne): toimii testaamissani selaimissa vain Opera 4.x:ssä ja Mozilla Gecko -selaimissa (ei toimi edes MS IE 6.0 Windows -selaimessa). Elementin merkitys on suurin piirtein sama kuin ACRONYM.
  Testi - tämän tekstin tulisi olla punainen ja sillä tulisi näkyä opasteksti.
• KBD (keyboard data > kbd = näppäimistödata). Edustaa näppäimistödataa. Pitkään spesifikaatioissa ollut elementti, jolla ei ole minulle kuitenkaan mitään mielekästä käyttökohdetta.

Tarvitsisin lisäelementtejä (esim. NAME tai TERM) edustamaan virallisia nimiä ja termejä. Tiedän, että XML on suunniteltu tuomaan enemmän semantiikkaa Internetiin, sillä HTML ei voi koskaan täyttää kaikkia semanttisia vaatimuksia. HTML-elementtejä täytyy aina käyttää hieman alkuperäistä käyttötarkoitusta laajemmin. Kirjoittaisin mielelläni <term>Inline Phrasal</term>, mutta selainten tulisi käsitellä XHTML:ää kuten XML:ää ja liittää siihen CSS - ehkä tulevaisuudessa on näin mahdollista.

Semantiikkaa voisi ilmaista myös class attribuutilla, mutta se on tarkoitettu ensisijaisesti esitysasun kuvaamiseen. Tämän attribuutin käyttäminen semanttiseen tarkoitukseen ei ole kovin hyvä idea. HTML voisi toimia paremmin seuraavalla tavalla:

• Dokumenttien rakenne ilmaistaaan tietyillä lohkoelementeillä (DIV, TABLE ja listaelementit, esim. OL).
• Lomakkeet ovat suhteellisen yksinkertaisia.
• Kaikkien elementtien esitysasu kuvataan vain CSS:llä.
• Semantiikka ilmaistaan standardeilla lohko- ja rivinsisäisillä fraasielementeillä sekä omilla rivinsisäiselementeillä (omien lohkoelementtien käyttäminen toisi rakenteellisia ongelmia selaimissa, jotka eivät ymmärrä CSS:ää).

Semantiikan tärkeys kuulotyylisivuille

Jotta saat sekä hyvin toimivat visuaaliset että kuuloon perustuvat sivut, on tärkeää, että et käytä väärin elementtejä ja luo keinotekoisia turhan monikerroksisia monimutkaisia rakennelmia, joilla ei ole mielekästä semantiikkaa.

Jotkut suunnittelijat kehottavat käyttämään tyhjiä kappaleita, mikäli on tarvetta lisätä tyhjää tilaa. Minusta tämä käytäntö johtaa huonoon semantiikkaan, sillä tyhjä kappale ei ole semanttisessa mielessä todellinen kappale. Sen sijaan elementti BR merkitsee aina ylimääräistä rivikatkoa. Suosittelen sen tai CSS:n käyttämistä tilanteissa, joissa tarvitaan tyhjää tilaa. On tosin myös huonoa käytäntöä luoda kappaleita käyttämällä peräkkäin kahta BR elementtiä!

Kun puhtaasti visuaalisia esitysasullisia elementtejä (kuten B ja I) ei käytetä, rakenne on selkeä ja sisältö on helppopääsyinen. Olen pyrkinyt käyttämään elementtejä semanttisessa mielessä myös mahdollisia kuulotyylisivuja ajatellen. Olen käyttänyt myös attribuutteja title ja summary antaakseni lyhyen selityksen joistakin linkeistä, kuvista ja taulukoista (summary koskee vain kuuloon perustuvia selaimia, mutta title toimii myös useissa visuaalisissa selaimissa).

Sellaisia perinteellisiä HTML 3.2 elementtejä, joita ei suositella käytettäväksi HTML 4.0 dokumenteissa kutsutaan nimityksellä legacy (legacy = erityisjälkisäädös), esim. elementti FONT ja attribuutti align. Niillä on yleensä vain visuaalinen merkitys ja niitä tulisi käyttää mahdollisimman vähän (Modularization of XHTML dokumentaatiossa Legacy Module sisältää myös joitakin ei-esitysasullisia attribuutteja).