Enhver nettside du besøker, uansett hvor enkel eller avansert, er bygget av tre lag som jobber sammen. Du ser aldri lagene hver for seg, bare sluttresultatet, litt som når du går inn i et ferdig hus og ikke tenker på bindingsverket, malingen eller strømledningene som ligger bak veggene. Men fjern ett av lagene, og hele opplevelsen endrer seg dramatisk.
Tenk på det som å bygge et hus. Det er akkurat den analogien vi skal bruke gjennom hele denne artikkelen, for prinsippet ligner overraskende mye på hvordan en nettside faktisk settes sammen.
HTML er skjelettet
HTML er husets bindingsverk, reisverket som bestemmer hvor veggene, dørene og vinduene skal stå. I en nettside bestemmer HTML at noe er en overskrift, et avsnitt, en knapp eller et bilde, uten å si noe om hvordan det faktisk ser ut. Det er ren struktur, ingen farger, ingen skrifttyper, bare hva som er hva.
Tenk deg at arkitekten tegner et hus og markerer «her skal det være en dør», «her skal det være et vindu», «dette rommet er stua». Ingen av disse markeringene forteller deg hvilken farge døren skal males i, eller hvilket materiale vinduskarmen skal ha. De forteller bare hva slags element det er, og hvor det befinner seg i forhold til resten. HTML gjør nøyaktig det samme for en nettside. En overskrift merkes som overskrift, en knapp merkes som knapp, uavhengig av hvordan de til slutt kommer til å se ut for deg som besøkende.
Denne rendyrkede strukturen har faktisk en praktisk fordel du sjelden tenker på. Skjermlesere, som blinde og svaksynte bruker for å navigere nettet, leser nettopp denne strukturen for å forstå hva som er hva. En knapp merket riktig i HTML blir lest opp som «knapp», selv om den visuelt ser ut som en fargerik firkant. Uten riktig struktur i bunn, blir siden vanskelig å forstå for alle som ikke kan se den visuelt.
CSS er malingen og møblene
CSS er alt det visuelle, malingen på veggene, tapetet, møblene og hvordan de er plassert i rommet. Det er CSS som bestemmer farger, avstander, skriftstørrelser og hvordan innholdet fordeler seg over siden. Bytt ut CSS-en, og et helt annet «hus» kan dukke opp rundt akkurat den samme strukturen.
Dette er faktisk lettere å demonstrere enn å forklare. Ta akkurat samme HTML-struktur, samme overskrifter og avsnitt på samme sted, og bytt bare ut fargevalg, skrifttyper og avstander. Resultatet kan gå fra å se ut som en seriøs nyhetsside til å ligne et lekent barneunivers, uten at et eneste ord i selve innholdet har endret seg. Strukturen, altså bindingsverket, står helt urørt gjennom hele forvandlingen.
Det er også CSS som bestemmer hvordan siden tilpasser seg forskjellige skjermstørrelser, om menyen klapper sammen til en liten hamburgerknapp på mobilen, eller om tre kolonner på en datamaskin blir til én lang kolonne på en telefon. Dette kalles responsivt design, og er litt som et hus bygget med bevegelige vegger som automatisk omorganiserer rommene avhengig av hvor mange som bor der akkurat nå.
JavaScript er elektrisiteten
JavaScript er elektrisiteten og rørleggingen, det som gjør at ting faktisk skjer. En meny som åpner seg når du trykker på den, et bilde som bytter automatisk, en handlekurv som oppdaterer seg selv når du legger til en vare, en advarsel som dukker opp fordi du glemte å fylle ut et felt i et skjema: alt dette er JavaScript i sving.
Uten elektrisitet kan et hus se helt ferdig ut utenfra, men lysbryterne gjør ingenting, ovnen slår seg ikke på, og dørklokken forblir taus uansett hvor mange ganger noen trykker på den. Nøyaktig det samme skjer med en nettside uten JavaScript. Alt kan se ferdig og pent ut, men ingenting reagerer når du klikker, skriver eller beveger musepekeren.
JavaScript er også det eneste av de tre lagene som faktisk kan endre seg mens du bruker siden, basert på hva du gjør. HTML og CSS er som regel fastsatt på forhånd, mens JavaScript kan hente ny informasjon, endre innhold, og reagere på handlingene dine i sanntid, uten at du noensinne laster siden på nytt. Det er derfor sosiale medier kan vise deg nye innlegg uten at du oppdaterer siden, og derfor et kart kan zoome og bevege seg jevnt når du drar i det med musa.
Hva som skjer uten hvert lag
Uten HTML har du ingen struktur å style i utgangspunktet, bare løs tekst uten form, litt som en haug byggematerialer kastet tilfeldig i en tomt uten noen plan for hvor noe skal stå. Uten CSS ser alt likt og kjedelig ut, som et hus uten en eneste strøk maling, bare rått, umalt bindingsverk og bare betonggulv overalt, teknisk sett funksjonelt, men lite innbydende å oppholde seg i. Uten JavaScript står huset der pent og pyntet, malt og møblert, men lysbryterne virker ikke, ingenting reagerer på det du gjør, og du kan bare se på, ikke samhandle med noe.
De fleste nettsider trenger faktisk ikke enorme mengder JavaScript for å fungere godt. En enkel informasjonsside med tekst og bilder klarer seg fint med bare HTML og litt CSS, akkurat som et koselig hus ikke nødvendigvis trenger smarte lyspærer og automatiserte gardiner for å være et godt sted å bo. Det er når siden skal gjøre noe interaktivt, som å oppdatere innhold uten å laste siden på nytt, at JavaScript virkelig kommer til sin rett.
Rekkefølgen betyr noe
Når nettleseren din bygger en side, gjøres det som regel i en bestemt rekkefølge, akkurat som en byggeplass følger en logisk fremgangsmåte. Bindingsverket reises først, deretter kommer maling og innredning, og til slutt kobles strømmen til og alt starter å virke. HTML lastes og leses først, deretter CSS, og JavaScript kjøres gjerne til slutt, eller mens resten fortsatt pågår i bakgrunnen.
Det er dette som forklarer et fenomen mange har lagt merke til uten å vite hva det het: en side som for et lite øyeblikk vises helt uten styling, ren tekst og standard skrift, før fargene og riktig utseende plutselig faller på plass. Dette skjer fordi bindingsverket ble ferdig først, mens malingen fortsatt var underveis. På en treg internettforbindelse kan dette øyeblikket vare lenge nok til at du faktisk rekker å se det med det blotte øye, litt som å gå inn i et hus midt i et malerarbeid.
Tre lag, tre forskjellige fagfolk
I praksis jobber ofte forskjellige mennesker med de tre lagene, selv om mange også kan alle tre. Det ligner på et byggeprosjekt der snekkeren reiser bindingsverket, maleren og interiørarkitekten tar seg av utseendet, og elektrikeren legger strømmen. Alle tre må samarbeide og forstå hverandres arbeid for at sluttresultatet skal bli bra, men de har hver sin spesialitet og sitt eget fagspråk.
Dette er også grunnen til at nettsider av og til kan se fine ut, men fungere dårlig, eller fungere utmerket, men se rotete ut. Et team sterkt på struktur og funksjonalitet, men svakt på visuelt design, bygger noe som ligner et solid, velfungerende hus uten en eneste innredningsdetalj. Et team sterkt på visuelt uttrykk, men svakt på struktur, bygger noe som ser fantastisk ut på bilder, men som kan være vanskelig å navigere eller forstå for en vanlig besøkende.
Hvorfor er dette nyttig å vite
Neste gang noe på en nettside oppfører seg rart, en knapp som ikke virker, en side som ser ødelagt eller feilplassert ut, eller tekst som havner feil sted, kan du fort tenke gjennom om problemet trolig ligger i strukturen, utseendet eller funksjonaliteten. Er teksten helt riktig plassert, men fargene ser feil ut eller mangler helt? Da er det trolig noe galt med CSS-en. Ser alt riktig ut, men ingenting skjer når du klikker? Da er trolig JavaScript-en problemet.
Denne tenkemåten er nyttig langt utover feilsøking også. Skal du gi tilbakemelding til noen som lager nettsider for deg, blir det langt lettere å beskrive konkret hva du mener, «kan dere endre fargen på denne knappen» handler om CSS, mens «kan denne menyen åpne seg når man trykker på den» handler om JavaScript. Å kjenne til de tre lagene gjør deg til en tydeligere og mer presis samtalepartner, selv uten å kunne skrive en eneste linje kode selv.
Neste gang du besøker en nettside du liker godt, prøv å se den for deg lagvis. Bindingsverket som holder alt oppe. Malingen og møblene som gjør stedet innbydende. Strømmen som gjør at lysbryterne faktisk virker. Tre helt forskjellige fag, tre helt forskjellige typer arbeid, men alle nødvendige for at det ferdige huset skal føles komplett når du går inn døra.