Bak enhver overskrift, knapp eller bilde på en nettside ligger noe utviklere kaller et element. Det høres kanskje teknisk ut, kanskje til og med litt avansert, men prinsippet er faktisk enklere enn navnet antyder. Du har sannsynligvis skjønt konseptet lenge før du noensinne hørte selve ordet.
Byggeklossene i en nettside
Et element er rett og slett en avgrenset bit av HTML. En overskrift er ett element, et avsnitt er ett element, et bilde er ett element, en knapp er ett element. Tenk på dem som byggeklosser, hver kloss har sin egen form og funksjon, og en nettside er summen av hvordan disse klossene er satt sammen.
Ta en vanlig LEGO-eske som eksempel. Inni ligger det klosser i forskjellige former: noen flate, noen høye, noen med hjul under. Hver klossform har en tiltenkt bruk, men det er kombinasjonen og plasseringen av dem som til slutt lager huset, bilen eller slottet. En nettside fungerer på nøyaktig samme måte, bare at klossene heter overskrift, avsnitt, knapp og bilde i stedet for de fysiske LEGO-formene.
Elementer inni elementer
Elementene kan ligge inni hverandre, akkurat som rom inni et hus. En meny-boks kan inneholde flere lenke-elementer, som igjen inneholder tekst. Et helt avsnitt kan ligge inni en seksjon, som igjen ligger inni hele siden. Denne innkapslingen kalles ofte «DOM-treet» blant utviklere, et hierarki av elementer inni elementer, litt som mapper og undermapper på en datamaskin.
Tenk på et hus igjen. Huset inneholder etasjer. Hver etasje inneholder rom. Hvert rom inneholder møbler. Møblene inneholder kanskje skuffer, som igjen inneholder gjenstander. Du kan alltid zoome inn ett nivå dypere og finne noe mindre gjemt inni noe større. Nettsiden din er strukturert på akkurat denne måten, helt fra den ytterste rammen og helt ned til den minste bokstaven i den minste teksten.
Denne strukturen gjør det også mulig å style og styre grupper av elementer samtidig. Vil du endre bakgrunnsfargen på hele menyen, trenger du bare å style menyboksen, ikke hvert eneste lenke-element inni den for seg. Det ligner på å male hele rommet i én farge i stedet for å male hver eneste gjenstand i rommet separat.
Dette hierarkiet er også grunnen til at endringer kan forplante seg nedover automatisk. Endrer du skriftstørrelsen på selve rommet, altså en overordnet beholder, arver som regel alt inni den samme egenskapen, med mindre noe spesifikt er satt til å overstyre det. Det ligner på hvordan en generell temperaturinnstilling for hele huset påvirker alle rommene samtidig, med mindre du skrur spesifikt opp eller ned varmen i ett enkelt rom for seg selv.
Attributter: elementets egenskaper
Et element kan også ha ekstra informasjon knyttet til seg, kalt attributter. Et bilde-element har for eksempel en attributt som forteller hvor bildefilen ligger, og en annen som gir en tekstbeskrivelse av bildet. En lenke har en attributt som forteller hvor den skal føre deg. Attributtene er litt som klistrelapper på selve byggeklossen, informasjon som hører til akkurat det elementet.
Tenk deg en LEGO-kloss med en liten lapp klistret på undersiden som forteller hva klossen egentlig forestiller, eller hvilket sett den opprinnelig hørte til. Klossen ser lik ut for øyet uansett, men lappen gir ekstra kontekst som blir viktig i visse sammenhenger. Attributtene på et nettside-element fungerer akkurat slik, usynlige for det blotte øyet når du bare ser på siden, men avgjørende for hvordan nettleseren og andre systemer forstår og behandler elementet.
Hvorfor nettleseren og skjermlesere bryr seg
Denne inndelingen er grunnen til at nettlesere og skjermlesere vet hva de har med å gjøre. En overskrift skal leses annerledes enn et vanlig avsnitt, en knapp skal kunne trykkes på, en lenke skal føre deg videre. Hvis alt bare var udefinert tekst uten elementtyper, ville verken nettleseren, søkemotorer eller hjelpemiddelteknologi visst hvordan innholdet skulle behandles.
En skjermleser, som blinde og svaksynte bruker for å navigere internett med lyd i stedet for syn, leser seg gjennom nettopp denne elementstrukturen. Møter den et element merket som knapp, sier den «knapp» høyt, uavhengig av hvordan knappen faktisk ser ut visuelt. Møter den et element merket som overskrift, gjør den en pause og signaliserer at et nytt tema begynner, akkurat som du selv ville gjort en liten mental pause når du ser en stor, fet overskrift på en side du leser.
Søkemotorer gjør noe lignende. Google leser gjennom elementstrukturen på siden din for å forstå hva som er hovedoverskriften, hva som er mindre underoverskrifter, og hva som bare er vanlig brødtekst. Er strukturen rotete, blir det vanskeligere for søkemotoren å forstå hva siden faktisk handler om, omtrent som det blir vanskeligere for en gjest å finne fram i et hus der alle rommene mangler skilt og dører ser identiske ut.
Når elementer brukes feil
Det er fullt mulig å bygge noe som ser riktig ut visuelt, men bruker feil elementer under overflaten. En knapp kan for eksempel bygges som ren tekst med bare fargelegging som gir illusjonen av en knapp, uten at det faktisk er markert som et klikkbart knapp-element i koden. Visuelt ser det identisk ut for et seende øye, men for en skjermleser eller for noen som navigerer med bare tastaturet, fungerer det ikke i det hele tatt som en knapp.
Det ligner på å male en dør på en vegg i stedet for å bygge en ekte dør. Fra utsiden ser det kanskje riktig ut på et fotografi, men ingen kommer noensinne gjennom den. Riktig elementbruk handler derfor ikke bare om ryddig kode, det handler om at nettsiden faktisk fungerer som den skal for alle som bruker den, uavhengig av hvordan de navigerer.
Riktig kloss til riktig jobb
HTML har faktisk et helt sett med ferdige elementtyper laget for spesifikke formål: overskrifter i seks forskjellige størrelser, avsnitt, lister, tabeller, knapper, lenker, bilder, og mange flere. Å bruke riktig elementtype for riktig innhold kalles semantisk HTML, og betyr rett og slett at klossen du velger faktisk stemmer med det den skal forestille.
Det finnes riktignok også en slags nøytral, formløs kloss uten noen spesifikk betydning i seg selv, ofte brukt bare som en beholder for å gruppere andre elementer sammen visuelt. Den fungerer litt som en tom eske uten noen bestemt form eller merking, nyttig for oppbevaring, men uten den samme innebygde meningen som en kloss formet spesifikt som et hjul eller en dør. Bruker en nettside utelukkende slike nøytrale, formløse klosser til alt, selv til ting som egentlig burde vært overskrifter eller knapper, mister man fordelen av at nettleseren automatisk forstår hva hver del faktisk er.
Hvorfor er dette nyttig å vite
Når noen snakker om å «style et element» eller «klikke på et element», er det denne inndelingen de mener, ikke noe mystisk. Og forstår du at en nettside i bunn og grunn er strukturerte byggeklosser, blir det lettere å forstå hvorfor riktig bruk av elementer betyr så mye for både tilgjengelighet og synlighet i søk.
Neste gang du gir tilbakemelding på en nettside, kan det være nyttig å tenke i akkurat disse byggeklossene. Er dette egentlig en overskrift som ser ut som vanlig tekst? Er denne knappen faktisk en ekte knapp, eller bare noe som ligner en? Disse spørsmålene handler i bunn og grunn om elementer, og å kunne stille dem riktig gjør deg til en tydeligere samtalepartner overfor alle som bygger nettsider for deg.
Og skulle du selv en dag åpne utviklerverktøyene i nettleseren for å se hva som egentlig ligger bak en side, vil du plutselig kjenne igjen nøyaktig det samme mønsteret overalt: bokser inni bokser, klosser inni klosser, hver med sin egen lille merkelapp som forteller nøyaktig hva den er ment å være.