[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > D Mikä on (X)HTML-elementtien semantiikka

D Mikä on (X)HTML-elementtien semantiikka

Aiheet

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[S] 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

Lohkoelementit

W3C: Modularization of XHTML™: Block Phrasal, Block Structural, Inline Phrasal, Inline Presentational.
[Alku]

Muut elementit

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

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:

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).

W3C: Access for People with Disabilities; Modularization XHTML™: Legacy Module.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004