Web-julkaisemisen opas, luku 1 Jambalaya: Miten teen Web-sivun:

Tekstiä monenlaista - tekstitason korostus- ja muut elementit

Kaikki teksti ei ole samanlaista. Hyvin kirjoitetussa jutussa korostetaan tärkeitä asioita. Tämä on Webissä vielä tärkeämpää kuin esimerkiksi kirjoissa. Kuvaruudulta luetaan silmäillen, etsien tärkeitä kohtia, jotka houkuttelisivat lukemaan leipätekstiäkin.

Eräs menettely onkin, että liki joka kappaleessa vahvasti korostaa muutamia avainsanoja. Kappale on silloin ikäänkuin pienoisluku, jolle ei käytännön syistä ole kirjoitettu erillistä otsikkoa, vaan avainsanojen korostus on ikäänkuin otsikoinnin tilalla. Menettelyn haittana on, että tekstistä tulee helposti levottoman näköistä, ja on vaikea kirjoittaa niin, että avainsanat sekä sopivat lauseyhteyteensä että antavat erilleen otettuina kuvaa tekstin sisällöstä. Niinpä parempi vaihtoehto voikin olla käyttää runsaasti väliotsikoita.

Lisäksi tekstissä voi esiintyä normaalikielestä poikkeavia ilmaisuja, esimerkiksi ohjelmointikielen lauseita kuten a[i++] = 0 tai tieteellisiä lajinimiä kuten Homo sapiens taikka fysiikan kaavoja kuten F = ma. On eduksi, jos tällaisissa asioissa käytetään näkyvän ulkoasun vaihtelua eli typografisia keinoja - mutta liika on aina liikaa: kovin monien eri kirjasinlajien käyttö tekee tekstistä sotkuisemman, ei selkeämpää. Charles Kelly mainitsee eräässä dokumentissaan, että monet Web-sivut palauttavat mieleen sen ajan, kun Mac-tietokoneet olivat tulleet käyttöön ja hän sai ihmisiltä kirjeitä, joissa oli käytetty noin 25:tä eri fonttia.

Web-dokumentin tekijä ei kuitenkaan voi tietää, mitä typografisia keinoja kussakin katselutilanteessa on käytettävissä. Hän ei voi tietää edes sitä, onko hänen juttunsa käsittely jotain ihan muuta kuin näkyvässä muodossa näyttämistä. Juttua voi käsitellä esimerkiksi puhesyntetisaattori tai hakupalvelimen indeksointirobotti.

Ratkaisuna on loogisten elementtien käyttö. Esimerkiksi strong-elementti merkitsee, että sen sisältämä teksti on voimakkaasti korostettua. Korostuksen toteutus riippuu selaimesta. Toteutus voi perustua esimerkiksi tekstin lihavointiin, alleviivaukseen, tekstin värin muuttamiseen tai äänen volyymin nostamiseen.

Tekstitason korostus- yms. elementit
elementti merkitys huomautuksia
Korostukset
em korostus (emphasis) sopii "paikalliseen" korostukseen; tyypillinen esitysmuoto: kursivointi
strong voimakas korostus sopii tekstin "nostamiseen esiin" dokumentista; tyypillinen esitysmuoto: lihavointi
dfn määrittelyesiintymä sopii käytettäväksi, kun sana tai muu ilmaisu esiintyy yhteydessä, jossa sille annetaan määritelmä; tyypillinen esitysmuoto: normaaliteksti (!) tai kursivointi
Muut ns. fraasielementit
abbr lyhenne tarkempi merkitys ja suhde acronym-elementtiin epäselvä; selaimet eivät juuri tue nykyisin
acronym lyhenne tarkempi merkitys ja suhde abbr-elementtiin epäselvä
cite kirjan tai artikkelin nimi tms. ei tarkoita sitaattia (vrt. q-elementtiin) vaan pikemminkin viittausta lähteisiin; tyypillinen esitysmuoto: kursivointi
code (tietokone)koodi esim. ohjelmakoodi, käyttöjärjestelmäkomento; tyypillinen esitysmuoto: tasalevyinen fontti
kbd näppäimistöltä (keyboard) kirjoitettava teksti soveltuu tietokoneoohjelmien käyttöohjeisiin yms.; tyypillinen esitysmuoto: tasalevyinen fontti
q lainaus (quotation) ei kannata käyttää, koska selaintuki on liian suppea; käytä lainausmerkkejä tai kursivointia (i-elementtiä) taikka isoille lainauksille lohkotason elementtiä blockquote
samp esimerkkituloste (sample output) soveltuu tietokoneohjelmien käyttöohjeisiin yms.; tyypillinen esitysmuoto: tasalevyinen fontti
var muuttuja (variable) soveltuu sellaisiin yhteyksiin kuin "tiedosto hävitetään komennolla rm tiedostonnimi", ilmaisemaan että jotain osaa (kuten tiedostonnimi) ei pidä kirjoittaa sellaisenaan vaan se on vain osoittamassa, minkätyyppinen ilmaisu kohtaan pitää kirjoittaa; tyypillinen esitysmuoto: tavallinen teksti (!) tai kursiivi tai tasalevyinen fontti (!); ei sopine fysiikan tai matematiikan muuttujille, joille sopii paremmin i-merkkaus
Muutosten merkintä
ins lisätty (inserted) teksti Selainten tuki näille elementeille on suppeahko. Jotkin selaimet voivat näyttää del-elementin tekstin yliviivattuna - mutta muissa selaimissa "poistettu" teksti näkyy normaalina tekstinä!
del poistettu (deleted) teksti
"Merkityksetön" yleiselementti
span (ei merkitystä) käytetään erottamaan osa tekstistä kokonaisuudeksi, johon voidaan liittää esim. tyyliehdotus
Fonttitason elementit (vältä!)
b lihavointi (bolding) esim. fysiikassa vektorien merkitsemiseen; voimakkaaseen korostamiseen kannattaa käyttää tämän asemesta strong-elementtiä
big iso fontti käytä mieluummin esim. otsikkoelementtiä, jos kyse on otsikosta
font fontin koko, väri, muoto lähes aina haitallinen elementti, jolle on erittäin vähän jos ollenkaan järkevää käyttöä
i kursivointi (italics) esim. tieteellisissä nimissä ja sitaattilainoissa sekä muissa ilmaisuissa, jotka vakiintuneen tavan mukaan pyritään esittämään kursiivilla, esim. suureiden symbolit kuten T 'lämpötila' fysiikassa; korostamiseen kannattaa käyttää tämän asemesta em-elementtiä
small pieni fontti yleensä tekstin merkitsemiseen vähemmän tärkeäksi
strike yliviivaus yleensä poiston merkitsemiseen, vrt. del-elementtiin
sub tason pudotus (subscript) ei kaikissa esitystilanteissa mahdollinen; sub sopii esim. alaindeksien esittämiseen (x1, H2O) silloin, kun esitys normaalitekstinäkin (x1, H2O) on hyväksyttävä
sup tason korotus (superscript) ei kaikissa esitystilanteissa mahdollinen, eikä sup siksi yleensä sovi ; sen sijaan esim. ilmaisuihin 1st (=first), Mlle (mademoiselle)
tt tasalevyinen (monospace) fontti nimi johtuu sanasta teletype, joka tarkoittaa vanhanaikaista laitetta, jolla merkistö on aina tasalevyinen, t.s. kaikki kirjaimet ja muut merkit ovat keskenään samanlevyisiä (esim. i vie yhtä ison tilan vaakasuunnassa kuin m)
u alleviivaus (underline) vältettävä, koska sekaantuu linkkien tavalliseen esitysmuotoon

Edellä kuvatut elementit ovat tekstitason elementtejä, englanniksi text level element tai inline element. Tämä sisältää sen, että niiden sisällä saa olla tekstiä ja muita tekstitason elementtejä, mutta ei esimerkiksi kappaleita.

Kokonaisten kappaleiden korostamiseen ei HTML:ssä ole hyvää keinoa keinoa. Koko kappaleen tekstin kirjoittaminen esim. em-elementin sisään (<p><em>Tekstikappale</em></p>) on mahdollista, mutta tulos ei ole kovin mukavan näköinen. Rakenne <p><big>teksti</big></p> myös yksi vaihtoehto, mutta teksti voi silloin tuntua lukijasta aivan liian isolta. Tyylisäännöstöillä voidaan asia tehdä paljon tyylikkäämmin, mutta tämä merkitsee, että kappale näkyy aivan normaalin näköisenä silloin, kun selain ei sovella kyseistä tyylisäännöstöä.

Valitettavasti tekstitason elementtien valikoima ei ole kovinkaan huolellisesti suunniteltu, eikä sitä myöskään ole kovin hyvin toteutettu selaimissa. Monet selaimet esimerkiksi käyttävät kursiivia kovin moniin tarkoituksiin (esim. em-, cite- ja var-elementtien sekä tietysti myös i-elementtien esittämiseen), joten HTML-dokumentissa huolella tehdyt erot eivät näykään lukijalle.

Looginen elementtien käyttö on silti järkevää. On parempi tehdä sivuja niin, että ne toimivat jotenkuten nykyisillä selaimilla ja hyvin tulevilla kuin välittää vain siitä, miltä asiat nyt näyttävät (tai olla välittämättä siitäkään). Ja jo nykyisin voidaan aika paljon saada aikaan käyttämällä tyylisäännöstöjä yhdessä elementtien loogisen käytön kanssa. Vaikka esimerkiksi code-, samp- ja kbd-elementit kaikki näkyvät samanlaisella fontilla, kun tyypillistä selainta käytetään oletusasetuksin, niin tyylisäännöstöillä voidaan kullekin ehdottaa omaa esitystapaa. Tästä on hyviä esimerkkejä mm. WDG:n CSS Quick Tutorial -aineistossa, jonka oma ulkoasu pyrkii hyödyntämään CSS:ää.

Tekstitason korostus- yms. elementtien käytössä voi soveltaa Jambalaya-periaatetta: lisukkeita voi panna mukaan maun ja inspiraation mukaan ja miten tilanteeseen sopii. "Perusmausteita" em ja strong voi käyttää olennaisten sanojen korostamiseen, jos väliotsikot eivät tunnu paremmalta vaihtoehdolta. Muutoin kyse on paljolti siitä, miten paljon haluat nähdä vaivaa tulevaisuutta varten.