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.
HTML:ssä otsikot esitetään h1
-, h2
-,
h3
- ja h4
-elementeillä. Mitä pienempi numero,
sitä ylemmän tason otsikosta on kyse:
h1
-elementti on pääotsikko, koko sivun otsikko
h2
-elementit ovat alaotsikoita, jotka jakavat
sivun osiin, joilla on omat otsikot
h3
-elementit ovat alemman tason alaotsikoita, jotka
jakavat osat pienempiin osiin.
>
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.
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 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ä:
Kyllä, tässä puhun minä, kuvitteellinen henkilö, joka saattaisi jonain päivänä törmätä Web-sivuillesi. Paitsi että en ole kuvitteellinen. En ole vain todellinen, olen kärsimätön, olen lopen väsynyt, ja ikävystyn, ennen kuin useimmat sivut latautuvat. Joten mitä aiot tehdä asialle? Häh?
Kerronpa sinulle, mitä voit tehdä. Pane minut välittämään. Pakota minut välittämään. Älä jätä minulle mitään valinnanvaraa. Sinulla on kymmenen sekuntia aikaa.
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.)
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>