Du skickade in ett projekt, öppnade det i en webbläsare och layouten rasade ihop. Du kollade på en surfplatta och menyn var helt skev. Kunden skriver: "allt är grått i min Safari." Låter det bekant?

Roten till problemet är ogiltig kod. En oavslutad tagg, ett saknat semikolon i CSS eller ett syntaxfel i JavaScript, och webbläsaren "gissar" åt dig. Varje webbläsare gissar olika. Resultatet är kaos.

Som tur är har det aldrig varit enklare att kontrollera kodens giltighet än 2026. Onlinetjänster, webbläsartillägg och inbyggda DevTools hittar fel på sekunder, inte en hel kvälls felsökning. Här nedan är de fungerande verktyg vi använder i praktiken.

💡 Snabb överblick:

• Öppna validator.w3.org och kontrollera din sidas HTML: det tar 10 sekunder
• För CSS, använd jigsaw.w3.org/css-validator: den visar varningar om inkompatibilitet med specifika webbläsare
• Kontrollera JavaScript via ESLint eller den inbyggda webbläsarkonsolen: syntaxfel markeras omedelbart
• Installera tillägget Web Developer för Chrome: det ger tillgång till W3C:s validerare med ett klick
• För batchkontroll av dussintals sidor, använd Total Validator: den kontrollerar HTML, CSS, länkar och stavning i en enda körning

Jämförelsetabell

1. W3C:s onlinevaliderare

Validator.w3.org

W3C Markup Validation Service är den officiella valideraren från konsortiet som utvecklar webbstandarder. Sedan 2025 körs den på motorn Nu Html Checker, som är modernare och mer exakt än den gamla SGML-parsern.

Du kan kontrollera en sida på tre sätt: via URL, genom att ladda upp en HTML-fil eller genom att klistra in kod direkt. Rapporten visar fel med radnummer och specifika åtgärdsförslag. Observera att valideraren kontrollerar överensstämmelse med standarden, inte "om sajten fungerar". Ett grönt W3C-märke garanterar inte att sidan ser likadan ut i alla webbläsare.

I praktiken kör vi en kontroll via validator.w3.org vid varje redesign. Den fångar oavslutade taggar och icke-standardiserade attribut som en visuell inspektion missar.

Jigsaw.w3.org

W3C CSS Validation Service kontrollerar stilmallar för överensstämmelse med specifikationen. Du kan ange CSS-profil (2.1, 3, SVG), välja visningsmedium och ställa in rapportens detaljnivå. Till skillnad från HTML-valideraren är varningar här lika viktiga som fel eftersom de ofta indikerar egenskaper som inte fungerar i alla webbläsare.

En användbar funktion är att valideraren visar vilka leverantörsprefix (-webkit-, -moz-) som inte längre behövs. År 2026 stöds de flesta CSS3-egenskaper utan prefix, och jigsaw hjälper till att rensa bort föråldrad kod.

2. Specialiserade onlineverktyg

Validome.org

Validome är en mindre känd men solid validerare med stöd för flera standarder: HTML (inklusive XHTML och HTML5), CSS, RSS/Atom-flöden och till och med mikrodata. Den arbetar snabbt och gränssnittet är minimalistiskt. Det är praktiskt när du behöver en dubbelkontroll: kör en sida genom W3C, sedan genom Validome och jämför resultaten. Olika parsers fångar ibland olika problem.

Varvy.com

Varvy visar en sammanfattning av sidan: hur många skript och stilmallar som är inkopplade, deras storlek och laddningsordning. Detta är inte så mycket en validerare som ett diagnostiskt verktyg för prestandagranskning. Det är användbart när en sida är långsam: Varvy visar omedelbart vilken resurs som blockerar renderingen.

3. Webbläsartillägg för Firefox

HTML Validator

Detta tillägg baserat på Tidy och OpenSP visar en enkel ikon i verktygsfältet: grön betyder att sidan är giltig, röd betyder att det finns fel. Ett klick öppnar en detaljerad rapport med markerade problemrader och åtgärdsförslag. Det är idealiskt för den som vill se valideringsstatusen för varje sida de besöker utan extra ansträngning.

Total Validator

Total Validator är skördetröskan bland valideringsverktyg. I en enda genomgång kontrollerar den: HTML mot flera standardversioner, CSS, trasiga länkar, tillgänglighet och stavning. Den har en skärmbildsfunktion för att fånga sidor i olika webbläsare, vilket är praktiskt för snabb visuell jämförelse.

I praktiken är Total Validator ovärderlig vid leveransgodkännande av webbplatser: du kör en kontroll på hela domänen och får en samlad rapport över alla problemsidor.

• Fördelar: allt i ett verktyg, skärmbilder, länkkontroll, regelbundet uppdaterad
• Nackdelar: gränssnittet ser daterat ut, kontroll av en stor webbplats tar minuter
• Pris: gratis

Validaty

Ett lättviktstillägg som lägger till en knapp i Firefox verktygsfält. Ett klick så ser du en färgindikering på den aktuella sidans validitet. Minimalistiskt: inga detaljerade rapporter, bara "godkänd/underkänd". Perfekt för snabba kontroller under arbetsflödet.

4. Chrome-tillägg

Web Developer

Web Developer-tillägget är schweiziska armékniven för webbutvecklare. Förutom validering (HTML via URL och direkt inklistring av kod, CSS, flöden, tillgänglighet) kan det: inaktivera JavaScript, hantera cookies, redigera CSS i realtid, visa bilders alt-texter och kontrollera trasiga länkar.

Validering är här inte huvudfunktionen utan en del av den samlade verktygslådan. Det är trevligt att alla verktyg är samlade i en panel, så att du slipper hoppa mellan flikar.

• Fördelar: rik uppsättning verktyg, integration med W3C:s validerare, aktiv community
• Nackdelar: använder en extern validerare (ingen inbyggd motor), kan inte anpassas till din egen instans
• Pris: gratis

Validity

Validity-tillägget skickar HTML-kontrollresultat direkt till JavaScript-konsolen, så att du slipper öppna en ny flik. Du kan konfigurera det att använda din egen valideringsinstans och aktivera automatisk kontroll på specifika värdar.

• Fördelar: anpassningsbar, automatisk kontroll på utvalda webbplatser
• Nackdelar: utdatan blandas med JS-loggar, vilket gör den obekväm att läsa; visar bara felraden utan kodsnutt
• Pris: gratis

HTML Validation Bookmarklet

Acid.JS Validator är ett bokmärke som använder W3C:s SGML-API för att kontrollera märkspråk. Det kräver ingen installation av tillägg: dra bara länken till bokmärkesfältet och starta det på valfri sida med ett klick. Det fungerar i alla webbläsare. Ett bra reservalternativ när tillägg blockeras av företagets policy.

5. Inbyggda utvecklarverktyg

Firebug gick i graven redan 2017, men dess arv lever vidare i varje modern webbläsare. Firefox, Chrome och Edge har alla inbyggda DevTools (F12) som växte fram direkt ur Firebug.

Vad DevTools kan göra för validering:

• Console-fliken visar JavaScript-fel med radnummer och stackspår. Syntaxfel markeras i rött direkt när sidan laddas.
• Elements-fliken visar ogiltig HTML visuellt: taggar som webbläsaren "fixade" automatiskt visas annorlunda än i källkoden.
• Issues-fliken (Chrome) / Console-panelen (Firefox) visar varningar om föråldrade API:er, blandat innehåll (HTTP/HTTPS) och CSP-problem.

Den främsta fördelen med DevTools är omedelbarheten. Du är redan i webbläsaren, du tittar redan på sidan, tryck bara på F12. Ingen installation behövs.

6. JavaScript-validatorer

För seriöst arbete med JavaScript räcker inte en online-validator. I praktiken använder vi två kontrollnivåer:

Först, ESLint. En statisk analysator som hittar inte bara syntaxfel utan även potentiella problem: oanvända variabler, osäkra konstruktioner och avvikelser från kodstil. Den integreras med VS Code, WebStorm och CI/CD-pipelines. Konfigurationen eslint:recommended täcker de flesta behov i ett typiskt projekt.

Sedan, TypeScript. Strikt typning fångar hela klasser av fel redan när koden skrivs. Om projektet är i ren JS, lägg åtminstone till JSDoc-annoteringar: TypeScript kontrollerar .js-filer med annoteringar utan att du behöver byta till .ts.

Online-validatorer (javascript-validator.com och liknande) passar för snabb kontroll av ett litet kodsnutt men inte för systematiskt kodarbete.

7. Responsivitetstestning

QuirkTools visar hur en sajt ser ut i olika skärmupplösningar, från smartphone till bred monitor. Det är användbart för snabba kontroller av responsiv layout utan att fysiskt växla mellan enheter.

År 2026 fungerar inbyggda DevTools som ett alternativ: Chrome och Firefox har enhetsemuleringsläge (Device Toolbar), som mer exakt återger mobila upplösningar. Men QuirkTools är smidigt för att demonstrera för kunder: en skärmdump med alla brytpunkter visar tydligt resultatet.

Video: hur du kontrollerar HTML-validitet på 5 minuter

Om du aldrig har kört en W3C-validator, börja med den här korta handledningen. Skaparen demonstrerar alla tre sätten att kontrollera: via URL, via filuppladdning och via direkt inklistring av kod.

⁉️🤔 Vanliga frågor

Varför bry sig om att kontrollera HTML-validitet 2026 när webbläsare ändå fixar allt?

Webbläsare fixar fel på olika sätt. Chrome kan stänga en ostängd tagg på ett sätt, Safari på ett annat. Resultatet: sidan ser olika ut. Dessutom förstör ogiltig HTML SEO eftersom sökrobotar är mindre toleranta mot märkordsfel än webbläsare. W3C-validering är en försäkring mot webbläsaröverskridande buggar och indexeringsproblem.

Vad är viktigast att kontrollera: HTML eller CSS?

HTML är viktigare. Ett HTML-fel bryter dokumentstrukturen, vilket gör att skärmläsare och sökmotorer tappar innehåll. Ett CSS-fel påverkar oftast bara det visuella för ett specifikt element. I praktiken: validera först HTML (validator.w3.org), sedan CSS (jigsaw.w3.org), sedan JS (ESLint eller konsolen).

Kan validering automatiseras i utvecklingsprocessen?

Ja, och det är den bästa metoden. ESLint för JS, Stylelint för CSS och html-validate för HTML integreras i pre-commit hooks (Husky + lint-staged). Vid push till repositoryt kontrolleras koden automatiskt, och fel når inte produktion. För WordPress-projekt, lägg till kontroll i CI via GitHub Actions: kör alla temamallar genom validatorn vid varje PR.

Validator.w3.org visar dussintals fel på en fungerande sajt. Är det en katastrof?

Inte alltid. Vissa "fel" från W3C-validatorn är icke-standardiserade attribut som lagts till av plugins eller ramverk. Till exempel Alpine.js-attribut (x-data, x-show) eller analysdata-attribut. Titta på felen selektivt: ostängda taggar, felaktig nästling och dubblett-ID:n är riktiga buggar. Icke-standardiserade data-attribut är acceptabelt brus.

Vilken validator ska jag välja för en WordPress-sajt?

Börja med validator.w3.org för engångskontroller av nyckelsidor. Installera Total Validator som ett Firefox-tillägg för periodiska granskningar. Lägg till ESLint och Stylelint i din temautvecklingsprocess. För brutna länkar, använd den inbyggda granskningen i Total Validator eller den specialiserade Dr. Link Check.

Sammanfattning: vad du ska köra och när

Kodvalidering är inte en engångsåtgärd inför projektleverans utan en vana. Här är vår arbetschecklista:

• När du bygger ett nytt block: kör HTML genom validator.w3.org (direkt inklistring av kod), CSS genom jigsaw.w3.org.
• När du installerar ett nytt plugin på WordPress: öppna sidan med pluginet i webbläsaren, tryck F12 → Console, leta efter röda JS-fel.
• Kvartalsvis: kör Total Validator på hela sajten, kontrollera brutna länkar och helhetsbilden.
• Inför release: DevTools → Device Toolbar → gå igenom alla brytpunkter och leta efter visuella buggar.

Du behöver inte kontrollera varje sida varje dag. Det räcker att integrera validering i arbetsflödets kritiska punkter, så minskar antalet "oväntade" buggar i produktion dramatiskt.

Om du precis har börjat, installera tillägget HTML Validator för Firefox eller Web Developer för Chrome. Ikonen i verktygsfältet påminner dig om att kontrollera varje gång du öppnar sajten. Det är det enklaste sättet att göra validering till en vana.