Se for deg en bok uten kapitteloverskrifter, bare tekst fra perm til perm, ingen inndeling, ingen mulighet til å bla deg fram til riktig avsnitt. Du måtte lese fra side én hver eneste gang du lette etter noe bestemt. Slik ville de fleste nettsider vært uten overskrifter, en uendelig strøm av tekst uten et eneste holdepunkt å navigere etter.
Et hierarki, ikke bare store bokstaver
Overskriftene H1 til H6 gir en nettside akkurat den samme strukturen som kapitler og underkapitler gir en bok. H1 er hovedtittelen, den viktigste overskriften på siden, og bør helst bare brukes én gang per side. H2 er de store underoverskriftene, H3 er underoverskrifter av dem igjen, og så videre nedover til H6. Det er altså et hierarki, ikke bare et sett med ulike tekststørrelser å velge mellom etter smak.
Tenk på en bok med et hovedtittelblad, deretter kapitler, deretter underkapitler inni hvert kapittel, og kanskje enda mindre avsnittsoverskrifter inni de igjen. Ingen forfatter velger tilfeldig hvilken skriftstørrelse et kapittel skal ha basert på hvor pent det ser ut på siden. Nivået bestemmes av hvor i den logiske strukturen kapittelet befinner seg, og nøyaktig samme prinsipp gjelder for overskriftene på en nettside.
De aller fleste sider trenger aldri å bruke alle seks nivåene. En enkel artikkel klarer seg som regel fint med bare H1 for tittelen og H2 for de store seksjonene, kanskje med et og annet H3 der et tema trenger å deles opp ytterligere. H5 og H6 dukker sjelden opp utenom svært lange, komplekse dokumenter med mange nivåer av underinndeling, som tekniske håndbøker eller juridiske dokumenter fulle av paragrafer og underpunkter.
Hvorfor rekkefølgen betyr noe
En vanlig feil er å velge overskriftsnivå basert på hvor stor eller liten teksten skal se ut, i stedet for hva den faktisk betyr strukturelt. Hopper man for eksempel fra en H2 rett til en H4 fordi H4 tilfeldigvis ser passe stor ut, mister både skjermlesere og søkemotorer den logiske sammenhengen mellom avsnittene, selv om det visuelt ser helt greit ut for en seende leser.
Det ligner på en bok der kapittel to plutselig hopper rett til et underkapittel av kapittel fire, uten at kapittel tre noensinne dukker opp i innholdsfortegnelsen. En seende leser som blar gjennom hele boken merker kanskje ikke noe rart, men noen som bare navigerer via innholdsfortegnelsen ville blitt fullstendig forvirret av det manglende hoppet i strukturen.
Navigasjon for skjermleserbrukere
Dette handler ikke bare om at store overskrifter ser fine ut, det forteller også skjermlesere og søkemotorer hvordan innholdet er organisert. En skjermleserbruker kan faktisk hoppe direkte mellom overskriftene for å navigere siden, litt som å bla gjennom en innholdsfortegnelse i stedet for å lese hele boken fra start. Mange skjermleserbrukere navigerer nesten utelukkende på denne måten på lange sider.
Trykker en skjermleserbruker på en snarveitast for «neste overskrift», hopper de rett fra én H2 til den neste, uten å måtte lytte gjennom alt innholdet mellom dem først. Er overskriftene brukt riktig, kan de på denne måten skumme gjennom en hel side på sekunder, akkurat som en seende person raskt kan skumme en side visuelt ved å se etter de store, fete overskriftene. Er overskriftene derimot brukt feil, eller mangler helt, mister skjermleserbrukeren denne muligheten fullstendig, og må i stedet lytte seg gjennom alt innhold i rekkefølge for å finne det de leter etter.
Mange skjermlesere tilbyr faktisk en egen liste over alle overskriftene på siden, presentert akkurat som en innholdsfortegnelse. Brukeren kan bla gjennom denne listen først, bestemme seg for hvilket avsnitt som er relevant, og hoppe direkte dit uten omveier. Er hovedoverskriften merket H4 av rent visuelle grunner, eller mangler en logisk H2 midt i strukturen, blir denne listen forvirrende og lite til hjelp, selv om resten av innholdet i seg selv er velskrevet og nyttig.
Overskrifter og søkemotorer
Søkemotorer som Google bruker også overskriftsstrukturen til å forstå hva en side faktisk handler om og hvilke deltemaer den dekker. En godt strukturert side med tydelige H2- og H3-overskrifter er derfor lettere å rangere riktig i søk enn en side med rotete eller manglende overskriftshierarki.
Det ligner på en bibliotekar som skal plassere en bok riktig i hylla. Har boken en tydelig innholdsfortegnelse som viser at den handler om hagestell, fordelt på kapitler om jord, vanning og beskjæring, er det lett å plassere den riktig og anbefale den til noen som spør om nettopp hagestell. Mangler boken enhver form for struktur, blir det langt vanskeligere å vite nøyaktig hva den handler om, selv om innholdet i seg selv kanskje er utmerket.
En vanlig misforståelse
Mange forveksler overskriftsnivå med visuell størrelse, og bruker CSS til å gjøre en H4 stor og en H2 liten fordi det passer bedre inn i designet visuelt. Teknisk sett er det fullt mulig, men det bryter selve poenget med hierarkiet. Utseendet og den strukturelle betydningen er to separate ting, og det er fullt mulig, og faktisk anbefalt, å style en H3 til å se mindre ut enn en H2 visuelt, samtidig som den strukturelt fortsatt korrekt er underordnet H2 i koden.
Det ligner på at kapitteloverskriften i en bok ikke nødvendigvis trenger å være den største teksten på siden for å fortsatt fungere som kapitteloverskrift. Det er den logiske plasseringen i strukturen som avgjør rollen, ikke bokstavstørrelsen alene. En designer kan derfor fritt bestemme at H3-overskrifter skal se relativt diskrete ut visuelt, samtidig som de fortsatt gjør akkurat den jobben de skal strukturelt, usett, men til stor nytte for alle som navigerer siden på andre måter enn med øynene.
Hvorfor er dette nyttig å vite
Ryddige overskrifter gjør en side lettere å skumme for alle, ikke bare de som bruker hjelpemidler. En besøkende som bare leter etter én bestemt del av informasjonen din, kan raskt skanne gjennom overskriftene og hoppe rett til riktig avsnitt, i stedet for å måtte lese alt fra start.
Neste gang du skriver noe selv, tenk på overskriftene som en innholdsfortegnelse i sanntid, ikke bare som en visuell finpuss du legger på til slutt. Spør deg selv om dette faktisk er et nytt hovedtema som fortjener sin egen overskrift, eller bare en setning du ønsket skulle se litt større ut på siden.
Denne vanen er faktisk nyttig langt utover nettsider også. Skriver du et Word-dokument, en rapport, eller til og med et langt notat, gir samme type strukturerte overskrifter leseren de samme fordelene: en rask oversikt, mulighet til å hoppe direkte til riktig del, og en følelse av at innholdet faktisk henger sammen i en logisk helhet, ikke bare er en lang strøm av tanker uten tydelig retning.