Du leverte et prosjekt, åpnet det i en nettleser, og layouten raste sammen. Du sjekket på et nettbrett, og menyen var skjev. Kunden skriver: «alt er grått i Safarien min.» Høres det kjent ut?

Roten til problemet er ugyldig kode. Én ulukket tag, et manglende semikolon i CSS, eller en syntaksfeil i JavaScript, og nettleseren «gjetter» for deg. Hver nettleser gjetter forskjellig. Resultatet er kaos.

Heldigvis er det enklere enn noen gang å sjekke kodevaliditet i 2026. Nettbaserte tjenester, nettleserutvidelser og innebygde DevTools finner feil på sekunder, ikke en kveld med feilsøking. Nedenfor er verktøyene vi bruker i praksis.

💡 Rask oversikt:

• Åpne validator.w3.org og sjekk sidens HTML: det tar 10 sekunder
• For CSS, bruk jigsaw.w3.org/css-validator: den viser advarsler om inkompatibilitet med spesifikke nettlesere
• Sjekk JavaScript via ESLint eller den innebygde nettleserkonsollen: syntaksfeil utheves umiddelbart
• Installer Web Developer-utvidelsen for Chrome: den gir ettklikks tilgang til W3C-validatorene
• For batch-sjekk av dusinvis av sider, bruk Total Validator: den sjekker HTML, CSS, lenker og staving i én gjennomkjøring

Sammenligningstabell

1. W3Cs nettbaserte validatorer

Validator.w3.org

W3C Markup Validation Service er den offisielle validatoren fra konsortiet som utvikler webstandarder. Siden 2025 kjører den på Nu Html Checker-motoren, som er mer moderne og nøyaktig enn den gamle SGML-parseren.

Du kan sjekke en side på tre måter: via URL, ved å laste opp en HTML-fil, eller ved å lime inn kode direkte. Rapporten viser feil med linjenumre og spesifikke anbefalinger for retting. Merk at validatoren sjekker samsvar med standarden, ikke «om nettstedet fungerer». Et grønt W3C-merke garanterer ikke at siden ser lik ut i alle nettlesere.

I praksis kjører vi en sjekk gjennom validator.w3.org ved hver redesign. Den fanger opp ulukkede tagger og ikke-standard attributter som visuell inspeksjon overser.

Jigsaw.w3.org

W3C CSS Validation Service sjekker stilark for samsvar med spesifikasjonen. Du kan spesifisere CSS-profilen (2.1, 3, SVG), velge visningsmedium og angi detaljnivå for rapporten. I motsetning til HTML-validatoren er advarsler her like viktige som feil, fordi de ofte indikerer egenskaper som ikke fungerer i alle nettlesere.

En nyttig funksjon er at validatoren viser hvilke leverandørprefikser (-webkit-, -moz-) som ikke lenger er nødvendige. I 2026 støttes de fleste CSS3-egenskaper uten prefikser, og jigsaw hjelper til med å rydde opp i utdatert kode.

2. Spesialiserte nettbaserte verktøy

Validome.org

Validome er en mindre kjent, men solid validator med støtte for flere standarder: HTML (inkludert XHTML og HTML5), CSS, RSS/Atom-feeds og til og med mikrodata. Den jobber raskt, og grensesnittet er minimalistisk. Den er praktisk når du trenger en kryssjekk: kjør en side gjennom W3C, deretter gjennom Validome, og sammenlign resultater. Ulike parsere fanger noen ganger opp ulike problemer.

Varvy.com

Varvy viser et sammendrag av siden: hvor mange skript og stiler som er tilkoblet, størrelsen deres og innlastingsrekkefølge. Dette er ikke så mye en validator som et diagnoseverktøy for ytelsesrevisjon. Det er nyttig når en side er treg: Varvy viser umiddelbart hvilken ressurs som blokkerer renderingen.

3. Nettleserutvidelser for Firefox

HTML Validator

Denne utvidelsen basert på Tidy og OpenSP viser et enkelt ikon i verktøylinjen: grønt betyr at siden er gyldig, rødt betyr at det er feil. Ved å klikke åpnes en detaljert rapport med uthevede problemlinjer og forslag til retting. Den er ideell for dem som ønsker å se valideringsstatusen til hver side de besøker uten ekstra innsats.

Total Validator

Total Validator er skurtreskeren blant validatorer. I én gjennomkjøring sjekker den: HTML mot flere standardversjoner, CSS, ødelagte lenker, universell utforming og staving. Den har en skjermdumpfunksjon for å fange opp sider i ulike nettlesere, noe som er praktisk for rask visuell sammenligning.

I praksis er Total Validator uvurderlig ved overtakelse av nettsteder: du kjører en sjekk på hele domenet og får én samlet rapport over alle problemsider.

• Fordeler: alt i ett verktøy, skjermdumper, lenkesjekk, jevnlig oppdatert
• Ulemper: grensesnittet ser gammeldags ut, sjekk av et stort nettsted tar minutter
• Pris: Gratis

Validaty

En lettvektsutvidelse som legger til en knapp i Firefox-verktøylinjen. Ett klikk, så ser du en fargeindikasjon på gjeldende sides gyldighet. Minimalistisk: ingen detaljerte rapporter, bare «bestått / ikke bestått». For raske sjekker underveis i arbeidsflyten er den perfekt.

4. Chrome-utvidelser

Web Developer

Web Developer-utvidelsen er sveitserkniven for webutviklere. I tillegg til validering (HTML via URL og direkte innliming av kode, CSS, feeds, universell utforming) kan den: deaktivere JavaScript, administrere informasjonskapsler, redigere CSS direkte, vise bilders alt-tekster og se etter ødelagte lenker.

Validering er her ikke hovedfunksjonen, men en del av den samlede verktøykassen. Det er fint at alle verktøy er samlet i ett panel, slik at du slipper å hoppe mellom faner.

• Fordeler: rikt sett med verktøy, integrasjon med W3C-validatorer, aktivt brukermiljø
• Ulemper: bruker en ekstern validator (ingen innebygd motor), kan ikke tilpasses til din egen instans
• Pris: Gratis

Validity

Validity-utvidelsen sender HTML-sjekkresultater direkte til JavaScript-konsollen, slik at du slipper å åpne en ny fane. Du kan konfigurere den til å bruke din egen validatorinstans og aktivere automatisk sjekking på bestemte verter.

• Fordeler: tilpasning, automatisk sjekking på utvalgte nettsteder
• Ulemper: utdataene blandes med JS-logger, noe som gjør dem upraktiske å lese; viser bare feillinjen uten et kodeutdrag
• Pris: Gratis

HTML Validation Bookmarklet

Acid.JS Validator er en bokmerkebok som bruker W3C SGML API-et til å sjekke markup. Den krever ingen installasjon av utvidelse: bare dra lenken til bokmerkelinjen og start den på hvilken som helst side med ett klikk. Den fungerer i alle nettlesere. Et godt reservealternativ når utvidelser blokkeres av bedriftens retningslinjer.

5. Innebygde utviklerverktøy

Firebug gikk inn i historien tilbake i 2017, men arven lever videre i alle moderne nettlesere. Firefox, Chrome og Edge har alle innebygde DevTools (F12) som vokste direkte ut av Firebug.

Hva DevTools kan gjøre for validering:

• Console-fanen viser JavaScript-feil med linjenumre og stack traces. Syntaksfeil utheves i rødt umiddelbart når siden lastes.
• Elements-fanen viser ugyldig HTML visuelt: tagger som nettleseren «fikset» automatisk, vises annerledes enn i kildekoden.
• Issues-fanen (Chrome) / Console-panelet (Firefox) viser advarsler om utdaterte API-er, blandet innhold (HTTP/HTTPS) og CSP-problemer.

Den største fordelen med DevTools er umiddelbarheten. Du er allerede i nettleseren, du ser allerede på siden, bare trykk F12. Ingen installasjon nødvendig.

6. JavaScript-validatorer

For seriøst arbeid med JavaScript er en nettbasert validator ikke nok. I praksis bruker vi to kontrollnivåer:

Først, ESLint. En statisk analysator som ikke bare finner syntaksfeil, men også potensielle problemer: ubrukte variabler, usikre konstruksjoner og avvik fra kodestil. Den integreres med VS Code, WebStorm og CI/CD-pipelines. Konfigurasjonen eslint:recommended dekker de fleste behov i et typisk prosjekt.

Deretter, TypeScript. Streng typing fanger hele klasser av feil allerede mens du skriver kode. Hvis prosjektet er i ren JS, legg i det minste til JSDoc-annoteringer: TypeScript sjekker .js-filer med annoteringer uten at du trenger å bytte til .ts.

Nettbaserte validatorer (javascript-validator.com og lignende) egner seg for rask sjekk av en liten kodesnutt, men ikke for systematisk arbeid med kode.

7. Responsivitetstesting

QuirkTools viser hvordan et nettsted ser ut ved ulike skjermoppløsninger, fra smarttelefon til bred skjerm. Det er nyttig for raske sjekker av responsivt layout uten å måtte teste fysisk på ulike enheter.

I 2026 fungerer innebygde DevTools som et alternativ: Chrome og Firefox har enhetsemuleringsmodus (Device Toolbar), som mer nøyaktig gjengir mobile oppløsninger. Men QuirkTools er praktisk for å demonstrere for kunder: ett skjermbilde med alle brytepunkter viser resultatet tydelig.

Video: slik sjekker du HTML-gyldighet på 5 minutter

Hvis du aldri har kjørt en W3C-validator, start med denne korte veiledningen. Forfatteren demonstrerer alle tre måtene å sjekke på: via URL, via filopplasting og via direkte innliming av kode.

⁉️🤔 Ofte stilte spørsmål

Hvorfor bry seg med å sjekke HTML-gyldighet i 2026 når nettlesere fikser alt uansett?

Nettlesere fikser feil forskjellig. Chrome kan lukke en ulukket tag på én måte, Safari på en annen. Resultatet: siden ser annerledes ut. I tillegg ødelegger ugyldig HTML for SEO fordi søkeroboter er mindre tolerante for markup-feil enn nettlesere. W3C-validering er en forsikring mot kryssnettleserfeil og indekseringsproblemer.

Hva er viktigst å sjekke: HTML eller CSS?

HTML er viktigst. En HTML-feil bryter dokumentstrukturen, noe som fører til at skjermlesere og søkemotorer mister innhold. En CSS-feil påvirker vanligvis bare det visuelle for et spesifikt element. I praksis: valider først HTML (validator.w3.org), deretter CSS (jigsaw.w3.org), så JS (ESLint eller konsoll).

Kan validering automatiseres i utviklingsprosessen?

Ja, og dette er den beste tilnærmingen. ESLint for JS, Stylelint for CSS og html-validate for HTML integreres i pre-commit hooks (Husky + lint-staged). Ved push til repository sjekkes kode automatisk, og feil når ikke produksjon. For WordPress-prosjekter, legg til sjekking i CI via GitHub Actions: kjør alle tema-maler gjennom validatoren ved hver PR.

Validator.w3.org viser dusinvis av feil på et fungerende nettsted. Er dette en katastrofe?

Ikke alltid. Noen «feil» fra W3C-validatoren er ikke-standard attributter lagt til av plugins eller rammeverk. For eksempel Alpine.js-attributter (x-data, x-show) eller data-attributter for analyse. Se selektivt på feil: ulukkede tagger, feil nesting og dupliserte ID-er er reelle feil. Ikke-standard data-attributter er akseptabel støy.

Hvilken validator bør jeg velge for et WordPress-nettsted?

Start med validator.w3.org for engangssjekker av nøkkelsider. Installer Total Validator som en Firefox-utvidelse for periodiske revisjoner. Legg til ESLint og Stylelint i temautviklingsprosessen din. For ødelagte lenker, bruk den innebygde revisjonen i Total Validator eller den spesialiserte Dr. Link Check.

Oppsummering: hva du skal kjøre og når

Kodevalidering er ikke en engangshandling før prosjektleveranse, men en vane. Her er vår arbeidssjekkliste:

• Når du bygger en ny blokk: kjør HTML gjennom validator.w3.org (direkte innliming av kode), CSS gjennom jigsaw.w3.org.
• Når du installerer en ny plugin på WordPress: åpne siden med pluginen i nettleseren, trykk F12 → Console, se etter røde JS-feil.
• Kvartalsvis: kjør Total Validator på hele nettstedet, se etter ødelagte lenker og helhetsbildet.
• Før lansering: DevTools → Device Toolbar → gå gjennom alle brytepunkter og se etter visuelle feil.

Du trenger ikke sjekke hver side hver dag. Det er nok å integrere validering i kritiske punkter i arbeidsflyten, så vil antallet «uventede» feil i produksjon reduseres dramatisk.

Hvis du akkurat har begynt, installer HTML Validator-utvidelsen for Firefox eller Web Developer for Chrome. Ikonet i verktøylinjen vil minne deg på å sjekke hver gang du åpner nettstedet. Dette er den enkleste måten å gjøre validering til en vane.