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

Otsikoilla ojennukseen

Sisällys

Otsikoinnin tarkoitus

Otsikointi mahdollistaa sen, että lukija silmäilee jutun nopeasti saadakseen yleiskuvan sen sisällöstä. Jos hän päättää lukea koko jutun, otsikot näkyvät muistutuksena siitä, missä nyt ollaan menossa, ja ne jäsentävät jutun osiin. Jos juttu muodostuu niin tärkeäksi lukijalle, että hän palaa siihen, niin otsikot auttavat löytämään sen kohdan, josta hän kulloinkin on kiinnostunut. Otsikkoa voidaan myös käyttää viitattaessa juttuun, sen yksilöimiseksi, mihin erityiseen kohtaan viitata. Viittaamisen helpottamiseksi Web-sivuilla on hyvä tehdä juttuun a name -elementtejä, mutta nekin toimivat parhaiten, kun ne ovat otsikoiden sisällä; ks. kohtaa Ole linkitettävissä!.

Otsikoilla on erittäin suuri merkitys jutun luettavuuden kannalta. Esimerkiksi lehtiuutisessa otsikot ovat tärkeämpiä kuin mikään muu, mahdollista kuvitusta ehkä lukuun ottamatta. Hyvä otsikointi edellyttää pohjakseen selkeän jäsennyksen. Sitä käsittelee oppaani Kirjoita asiaa luku Kirjoituksen rakentaminen.

Otsikoiden luonne vaihtelee suuresti. Varsinkin lehtijuttutyyppisessä tekstissä otsikot ovat lyhyitä ja iskeviä, lukemaan houkuttelevia. Raportissa tai tutkielmassa otsikot taas usein vain kuvaavat loogista jäsennystä: ne yksilöivät, mitä asiaa käsitellään, eivät niinkään tiivistä sitä, mitä asiasta sanotaan.

Otsikkoelementit HTML:ssä

HTML:ssä otsikot esitetään h1-, h2-, h3- ja h4-elementeillä. Mitä pienempi numero, sitä ylemmän tason otsikosta on kyse:

> HTML-kielessä on periaatteessa käytettävissä kuusi eritasoista otsikkoelementtiä h1:stä h6:een. Niistä kuitenkaan kahta viimeistä ei pidä juuri koskaan käyttää. Jos dokumentti vaatisi viidennen tai kuudennen tason otsikoita, se on yleensä joko väärin jäsennetty taikka niin laaja, että se on syytä jakaa useaksi Web-sivuksi. Lisäksi suositut selaimet näyttävät h5- ja h6-elementit usein ihan päin mäntyä: pienempänä kuin normaaliteksti. Tämä ongelma on kyllä pääosin hoidettavissa tyyliohjeen avulla.

Aiemmin valittiin usein sivun pääotsikon otsikkotaso sen mukaan, miten isokokoisena sen haluttiin näkyvän. (Tällaista ehdotettiin tämän oppaankin vanhoissa versioissa.) Esimerkiksi pienelle sivulle, jolla on vain vähän asiaa eikä lainkaan alaotsikoita, saatettiin pääotsikko merkata h3-elementiksi. Ajateltiin, että kun pääotsikon ei tarvitse olla isommalla kuin alaotsikot, sen fonttikoko voi olla aika pienikin. Vaikka tällaista ajattelua edelleen harrastetaan, se on varsin vanhentunutta. Otsikoiden kokoon voi vaikutta tyyliohjeilla (tyylisäännöstöillä, CSS:llä) esimerkiksi seuraavasti:

<style type="text/css">
h1 { font-size: 170%; }
h2 { font-size: 145%; }
h3 { font-size: 125%; }
</style>

Edellä olevassa CSS-esimerkissä asetetaan otsikoiden fonttikokoja suhteellisesti, suhteessa sivun perusfonttikokoon eli leipätekstin kokoon.

HTML:ssä ei varsinaisesti ole elementtejä sivun jakamiseksi osiin. Haluttaessa voidaan kuitenkin osiin jakautuminen erikseen merkata div-elementeillä seuraavaan tapaan:

<style type="text/css"><h1>Pääotsikko</h1>
<div class="osa">
<h2>Alaotsikko A</h2>
<p>Kappale.</p>
<p>Kappale.</p>
</div>
<div class="osa">
<h2>Alaotsikko B</h2>
<p>Kappale.</p>
<p>Kappale.</p>
</div>...<style>

Tällainen osiin jakaminen ei sinänsä vaikuta mitään sivun ulkoasuun, ei myöskään hakukoneisiin tms. Se voidaan ymmärtää selityksen (kommentin) luonteiseksi. Sitä voidaan kuitenkin myös hyödyntää sivun ulkoasun muotoilussa, sillä se mahdollistaa osiin viittaamisen tyyliohjeissa.

Otsikoiden tekeminen jäsentelyvaiheessa

Kun olet miettinyt jutullesi hyvän jäsennyksen, voit sen pohjalta jo kirjoittaa alustavan rungon: joukon otsikkoelementtejä, jotka vastaavat jäsennystä. Vaikkapa näin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Jäsennysesimerkki</title>
<h2>Kertomus matkastani Brutopiaan</h2>
<h3>Tiivistelmä</h3>
<h3>Johdanto: miksi lähdin matkalle</h3>
<h3>Havaintoja Brutopian talouselämästä</h3>
<h4>Maatalous</h4>
<h4>Teollisuus</h4>
<h4>Palveluelinkeinot</h4>
<h4>Salakuljetus</h4>
<h3>Brutopian luonnosta</h3>
<h3>Liitteet</h3>
<h4>Matkan järjestelyt</h4>
<h4>Hyödyllisiä osoitteita</h4>
<h4>Tietoisku Brutopiasta (mm. kartta)</h4>

Dokumentin, joka sisältää vain tämän rungon voit vaikkapa tulostaa itsellesi paperille, jotta voit paremmin pitää mielessäsi kokonaissuunnitelmasi. Siitä voit myöhemmin tehdä myös hypertekstisisällysluettelon.

Tiivistelmän tekeminen

Tiivistelmän tekeminen ei teknisesti liity otsikoihin mutta palvelee samanlaisia tarkoituksia. Se käsitellään tässä yhteydessä myös siksi, ettei syntyisi väärinkäsitystä, että otsikoiden kirjoittaminen ja tiivistelmän tekeminen olisivat vaihtoehtoja. Yleensä molemmat tarvitaan. Otsikot kokonaisuutena toimivat kyllä eräänlaisena tiivistelmänä, etenkin jos niiden tekstit on koottu hypertekstisisällysluetteloksi sivun alkupuolelle. Mutta se on luetelma jutun aiheista, ei normaalia tekstiä, joka on kudottu normaaleiksi, yhteen liittyviksi virkkeiksi. Hyvä nyrkkisääntö on, että varsinaisen tiivistelmän pitää olla olla sujuvasti luettavissa ääneen niin, että se kuulostaa normaalilta puheelta.

Jutun alkuun, heti pääotsikon jälkeen, on useimmiten syytä kirjoittaa kappaleen tai parin mittainen tiivistelmä. Tähän on useitakin syitä:

Tiivistelmä voidaan jättää ilman omaa otsikkoa tai sille voidaan antaa jokin havainnollisempi otsikko kuin "Tiivistelmä". Tiivistelmän otsikko saattaa toimia jutun pääotsikon alaotsikkonakin. Tyylisäännöstöillä voit ehdottaa, että selain esittää tiivistelmän jollakin normaalitekstistä poikkeavalla tavalla sen korostamiseksi, esimerkiksi isommalla tai muuten poikkeavalla kirjasinlajilla tai "laatikkona". (Tällaiseen tarkoitukseen, kappaleen tai muun laajemman kokonaisuuden korostamiseen, ei HTML:ssä valitettavasti ole rakenteellisempia keinoja.)

Otsikoinnin tekniikkaa
kuten vähän aliotsikoista

Otsikoissa ei kannata HUUTAA. Isojen kirjainten (oikeastaan: suuraakkosten) käyttö otsikoissa on perua vanhojen kirjoituskoneiden ja alkeellisten tietokonenäyttöjen ajoilta, jolloin ei juuri mitään muuta korostuskeinoa ollut. Käytä siis isoja ja pieniä kirjaimia ihan normaalisti. Luota siihen, että kukin selain esittää esimerkiksi h2-elementin tavalla, joka sopii otsikolle. Jokin selain ei ehkä pysty - käytettävän laitteen rajoitusten takia - erottamaan otsikkoa muusta tekstistä millään kehittyneemmällä tavalla kuin isokirjaimisuudella. Olkoon silloin sen asia muuntaa kirjoittamasi otsikkoteksti isokirjaimeksi. Useimmat selaimet pystyvät käyttämään esim. isompaa kirjasinlajia tai värejä, ja silloin ISOKIRJAIMISUUS on vain haitaksi. Joissakin tapauksissa voi seurata suoranaisia väärinkäsityksiä, koska isoja kirjaimia käytetään muissakin tarkoituksessa kuin korostamiseen. Kokonaan isokirjaimisessa tekstissä ei voida tehdä normaaliin tapaan eroa yleisnimen (esim. karhu) ja erisnimen (esim. Karhu tuotemerkkinä tai ihmisen nimenä) välillä.

Usein olisi kiva kirjoittaa alaotsikko, joka täydentää varsinaista otsikkoa, siten, että alaotsikko on vähemmän korostettu kuin varsinainen otsikko. Yksi tapa on kirjoittaa esimerkiksi h1-otsikon perään h2-otsikko, mutta tämä on hiukan epäloogista, koska muut h2-otsikot toimivat otsikkoina jutun osille, eivät alaotsikkona koko jutulle. Lisäksi kahden otsikkoelementin väliin jää selaimien yleensä käyttämässä esitystavassa aika lailla tyhjää tilaa. Niinpä parasta onkin ehkä kirjoittaa sekä pää- että alaotsikko yhden elementin sisään mutta erottaa ne toisistaan rivinvaihdolla (<br>) sekä siten, että alaotsikko on small-elementin sisällä, tähän tapaan:

<h2><a name="ots-tekn">Otsikoinnin tekniikkaa</a><br>
<small>kuten vähän aliotsikoista</small></h2>