Validere koden på hjemmesiden: slik sjekker du HTML og CSS

Å validere koden på hjemmesiden betyr å sjekke at HTML-en og CSS-en din følger de offisielle web-standardene fra W3C. Når koden er korrekt skrevet, tolker de ulike nettleserne siden mer likt, feilretting blir enklere, og både skjermlesere og søkemotorer kommer lettere til innholdet. I denne guiden går vi gjennom hva validering er, hvorfor det er nyttig, hvilke gratisverktøy du faktisk skal bruke – og hvordan du retter feilene du finner.

Hva betyr det å validere koden?

Å validere kode vil si å kontrollere at markup-en din er bygget etter reglene i den standarden du bruker, for eksempel HTML Living Standard eller en gitt CSS-spesifikasjon. En validator leser dokumentet, sammenligner det med reglene og rapporterer alt som bryter med dem: elementer som ikke er lukket, attributter som ikke finnes, verdier som er feilstavet eller struktur som er ulovlig.

Det er viktig å forstå forskjellen mellom «koden virker» og «koden er gyldig». En nettside kan se helt riktig ut i din egen nettleser selv om koden inneholder feil, fordi moderne nettlesere er bygget for å være tilgivende og gjetter seg frem til hva du mente. Problemet oppstår når to nettlesere gjetter ulikt – da kan siden plutselig se forskjellig ut, eller oppføre seg uventet, hos besøkende du ikke selv har testet hos.

Validering handler altså ikke om å få en «godkjent»-stempel for sin egen del, men om å fjerne tvetydighet. Jo renere og mer forutsigbar koden er, desto mindre overlater du til nettleserens gjetting.

Hvorfor bør du validere HTML og CSS?

Den viktigste gevinsten er forutsigbarhet på tvers av enheter og nettlesere. Når koden følger standarden, slipper du at siden faller fra hverandre i en nettleser du ikke har for hånd. Det gir flere konkrete fordeler:

• Likere visning i alle nettlesere. Gyldig kode reduserer risikoen for at Chrome, Firefox, Safari og Edge tolker siden ulikt. Er du usikker på hvilke nettlesere du bør teste i, har vi en egen oversikt over hvilken nettleser som er best.
• Bedre tilgjengelighet. Korrekt struktur og riktige attributter gjør det enklere for skjermlesere og andre hjelpemidler å formidle innholdet til brukere med nedsatt funksjonsevne.
• Enklere vedlikehold. Ren, standardkonform kode er lettere å lese, feilsøke og bygge videre på – både for deg selv senere og for andre som overtar nettstedet.
• Færre skjulte feil. Validatoren fanger ofte opp små tabber, som et manglende sluttmerke, før de rekker å skape rare visningsfeil lenger ned på siden.

Betyr validert kode bedre rangering i Google?

Nei – gyldig HTML er ikke en direkte rangeringsfaktor hos Google. Både Matt Cutts og senere John Mueller fra Google har gjentatte ganger sagt at Google ikke straffer deg for ugyldig markup, og at svært mange høyt rangerte nettsteder ikke validerer feilfritt. Du skal derfor ikke validere koden utelukkende for søkemotorenes skyld.

Effekten på SEO er likevel reell, men indirekte: rendrings- og strukturfeil kan skade brukeropplevelsen, og dårlig brukeropplevelse kan påvirke hvordan siden presterer. Det Google faktisk måler og bekreftet som rangeringssignal fra 2021, er Core Web Vitals – altså hvordan siden lastes, reagerer og stabiliserer seg. Ryddig kode hjelper deg indirekte med nettopp dette.

Slik validerer du HTML med W3C

Det offisielle verktøyet heter W3C Markup Validation Service og ligger på validator.w3.org. Glem den gamle instruksjonen om å validere via w3schools.org – W3Schools er et lærenettsted med veiledninger og eksempler, ikke en validator. Selve kontrollen gjør du slik:

1. Gå til validator.w3.org i nettleseren din.
2. Velg hvordan du vil levere dokumentet. Du har tre faner: Validate by URI (lim inn adressen til en side som allerede ligger på nett), Validate by File Upload (last opp en HTML-fil fra maskinen din) eller Validate by Direct Input (lim koden rett inn i et tekstfelt).
3. Lim inn adressen, velg filen eller lim inn koden, og klikk Check.
4. Du får nå en liste over alle feil (errors) og advarsler (warnings) validatoren fant, med linjenummer og en kort forklaring på hver enkelt.
5. Rett feilene i din egen kode og kjør kontrollen på nytt. Gjenta til listen er tom – da er dokumentet gyldig etter standarden.

Et lite tips: skal du sjekke en side som ennå ikke er publisert, bruk «Direct Input» eller «File Upload». «Validate by URI» krever at siden allerede er tilgjengelig på en offentlig adresse. Vil du heller se på selve kildekoden til en ferdig side før du validerer, har vi forklart hvordan du ser HTML-kilden til en side.

Nu Html Checker – den moderne HTML-validatoren

Når du validerer moderne HTML, bruker W3C i praksis en nyere motor som heter Nu Html Checker (også kjent som v.Nu). Den ligger på validator.w3.org/nu og er den anbefalte kontrolløren for dagens HTML. Den samme motoren driver også tjenestene checker.html5.org og html5.validator.nu, så du møter den uansett hvilken av disse inngangene du bruker.

Nu Html Checker er fri programvare, utviklet med Mozilla Foundation involvert og tilgjengelig som åpen kildekode under MIT-lisens. Den kan brukes rett i nettleseren, men også kjøres lokalt fra kommandolinjen eller som en tjeneste på din egen server – nyttig hvis du vil validere mange sider automatisk.

En viktig nyanse: utviklerne understreker selv at verktøyet ikke er ment som en «bestått/ikke bestått»-sertifisering. Nye kontroller legges til over tid, så et dokument som er feilfritt i dag, kan få en advarsel senere når sjekkene blir strengere. Bruk resultatet som en veileder til bedre kode, ikke som et endelig kvalitetsstempel.

Slik validerer du CSS

CSS valideres med et eget verktøy: W3C CSS Validation Service, som ligger på jigsaw.w3.org/css-validator. Fremgangsmåten speiler HTML-validatoren – du kan oppgi en nettadresse, laste opp en stilarkfil eller lime inn CSS-koden direkte. Tjenesten er gratis programvare laget av W3C spesielt for å hjelpe deg med å kontrollere Cascading Style Sheets.

Når du leser CSS-resultatet, vær oppmerksom på skillet mellom feil og advarsler. En reell feil er for eksempel en egenskap som er feilstavet eller en verdi som ikke finnes. Advarsler handler oftere om valg som er tillatt, men som validatoren vil gjøre deg oppmerksom på – for eksempel at du har satt en tekstfarge uten også å sette en bakgrunnsfarge. Vil du friske opp CSS-grunnlaget først, forklarer vi hva CSS er i en egen artikkel.

Valideringsverktøy sammenlignet

Det finnes flere offisielle og uavhengige verktøy, og de dekker ulike behov. Tabellen under viser de mest aktuelle gratistjenestene, hva de kontrollerer og når du bør bruke dem.

Slik tolker og retter du feilmeldingene

En feilmelding fra validatoren er alltid knyttet til et linjenummer og en kort beskrivelse, og det er her de fleste nybegynnere gir opp for tidlig. Nøkkelen er å lese meldingen bokstavelig og rette én feil av gangen ovenfra og ned. Svært ofte henger flere meldinger sammen: ett manglende sluttmerke kan utløse en hel kaskade av følgefeil lenger ned, som forsvinner av seg selv så snart du retter den første.

Her er noen av de vanligste meldingene og hva de egentlig betyr:

• «End tag … seen, but there were open elements» / «Unclosed element». Et element er ikke lukket riktig. Finn taggen det gjelder og legg til sluttmerket, eller sjekk at elementene lukkes i riktig rekkefølge.
• «Attribute … not allowed on element … at this point». Du har brukt en attributt som ikke hører hjemme på det elementet, eller stavet den feil. Fjern den eller flytt den dit den hører hjemme.
• «Duplicate ID». Samme id er brukt to ganger. En id må være unik på hele siden – gi det ene elementet en ny verdi.
• «No p element in scope but a p end tag seen». Et avsnitt er avsluttet uten å være åpnet, ofte fordi et blokk-element er feilplassert inni et annet.
• «Element … is missing required attribute». Et element mangler noe obligatorisk, for eksempel alt på et bilde. Fyll inn den manglende informasjonen.

Ta deg tid til å forstå hver melding i stedet for å gjette. Når du har rettet en håndfull, vil du raskt kjenne igjen mønsteret. Vil du øve på selve byggesteinene, har vi guider til hvordan du lager en HTML-lenke og de minste, mest brukte HTML-elementene.

Vanlige feil folk gjør ved validering

De fleste problemene med validering skyldes ikke selve koden, men hvordan folk bruker verktøyet. Her er tabbene som går igjen:

• Å tro at W3Schools er en validator. Dette er den vanligste misforståelsen. W3Schools lærer deg HTML og CSS, men validerer ikke koden din. Bruk validator.w3.org for HTML og jigsaw.w3.org/css-validator for CSS.
• Å jage null feil for enhver pris. Mange advarsler er harmløse, og noen feil skyldes tredjeparts-kode du ikke kontrollerer, som innebygde kart eller annonser. Prioriter de feilene som faktisk påvirker struktur og visning.
• Å validere feil versjon av siden. Hvis du validerer en adresse mens du retter i et utkast lokalt, sjekker du gammel kode. Pass på at du validerer nøyaktig den koden du nettopp endret.
• Å rette nedenfra og opp. Følgefeil forsvinner ofte når du retter den første, egentlige feilen. Jobb ovenfra og ned, og revalider ofte.
• Å overse advarsler helt. Advarsler er ikke feil, men de peker gjerne på svakheter i tilgjengelighet eller tegnsett som er verdt å fikse.
• Å glemme CSS og lenker. Gyldig HTML sier ingenting om stilarket ditt eller om lenkene fungerer. Kjør CSS-validatoren og en lenkesjekk i tillegg.

Validering er ikke alt: tilgjengelighet, lenker og hastighet

Kodevalidering er ett ledd i kvalitetssikring, men det er verdt å huske at gyldig kode ikke garanterer at siden fungerer godt. W3C sier det selv: valid HTML betyr ikke automatisk at siden ser riktig ut i alle nettlesere. Et par verktøy utfyller validatoren godt:

• Lenkekontroll. W3C Link Checker (validator.w3.org/checklink) går gjennom siden og sjekker at alle lenker faktisk fungerer, varsler om videresendinger og kan følge et helt nettsted. Døde lenker er en vanlig kilde til dårlig brukeropplevelse.
• Tilgjengelighet. Verktøy som WAVE fra WebAIM viser hvordan siden oppleves med hjelpemidler, og fanger opp ting en ren markup-validator ikke sjekker, som fargekontrast og manglende ledetekster.
• Hastighet. Rask lasting er et bekreftet rangeringssignal. Les mer om hva sidehastighet er og hvorfor det betyr noe for både besøkende og søkemotorer.

Til sammen gir disse kontrollene et langt mer komplett bilde enn validering alene.

Hvem bør validere koden?

Alle som eier eller bygger et nettsted har nytte av å validere, men behovet varierer. Lager du en side fra bunnen med egen HTML og CSS, er validering nesten uunnværlig – det er den raskeste måten å fange opp strukturfeil på. Bruker du et byggesystem eller en CMS-plattform som WordPress, skrives mye av koden for deg, men temaer og tilleggskode kan likevel introdusere feil som er verdt å sjekke.

For rene nybegynnere er validatoren dessuten et utmerket læreverktøy: feilmeldingene lærer deg hvordan korrekt HTML og CSS skal se ut. Vil du komme i gang med verktøyene som gjør kodingen enklere, har vi samlet en oversikt over gratis HTML- og CSS-editorer som flagger mange feil allerede mens du skriver.

Vanlige spørsmål (FAQ)

Er W3Schools en kodevalidator?

Nei. W3Schools er et lærenettsted med veiledninger og eksempler på HTML, CSS og andre webteknologier. For å validere koden bruker du W3C sine offisielle tjenester: Markup Validation Service for HTML og CSS Validation Service for stilark.

Må koden min være helt feilfri for å rangere i Google?

Nei. Gyldig HTML er ikke en direkte rangeringsfaktor, og Google har bekreftet at de ikke straffer ugyldig kode. Fordelene er indirekte: ryddig kode gir bedre visning, tilgjengelighet og vedlikehold, som igjen kan styrke brukeropplevelsen.

Hva er forskjellen på en feil og en advarsel i validatoren?

En feil (error) betyr at koden bryter med standarden og bør rettes, for eksempel et element som ikke er lukket. En advarsel (warning) peker på noe som er tillatt, men som kan være uheldig, for eksempel manglende bakgrunnsfarge eller uklart tegnsett.

Kan jeg validere en side som ikke er publisert ennå?

Ja. Bruk «Validate by File Upload» for å laste opp en fil, eller «Validate by Direct Input» for å lime inn koden rett i validatoren. «Validate by URI» krever derimot at siden allerede ligger på en offentlig nettadresse.

Validerer jeg HTML og CSS med samme verktøy?

Nei, de har hver sin tjeneste. HTML sjekkes på validator.w3.org (med Nu Html Checker på validator.w3.org/nu), mens CSS sjekkes på jigsaw.w3.org/css-validator. Kjør begge for å dekke hele siden.