Esitasid projekti, avasid selle brauseris ja küljendus lagunes. Kontrollisid tahvelarvutis ja menüü oli viltu. Klient kirjutab: „minu Safaris on kõik hall." Kõlab tuttavalt?

Probleemi juur on vigane kood. Üks sulgemata silt, puuduv semikoolon CSS-is või süntaksiviga JavaScriptis ja brauser hakkab sinu eest „arvama". Iga brauser arvab erinevalt. Tulemuseks on kaos.

Õnneks on koodi valiidsuse kontrollimine 2026. aastal lihtsam kui kunagi varem. Veebiteenused, brauserilaiendid ja sisseehitatud arendajatööriistad leiavad vead sekunditega, mitte terve õhtu kestva silumise käigus. Allpool on töötavad tööriistad, mida me praktikas kasutame.

💡 Kiirülevaade:

• Ava validator.w3.org ja kontrolli oma lehe HTML-i: see võtab 10 sekundit
• CSS-i jaoks kasuta jigsaw.w3.org/css-validator: see näitab hoiatusi ühildumatuse kohta konkreetsete brauseritega
• Kontrolli JavaScripti ESLint'i või sisseehitatud brauseri konsooli kaudu: süntaksivead tõstetakse kohe esile
• Paigalda Chrome'i jaoks Web Developer laiendus: see annab ühe klõpsuga juurdepääsu W3C validaatoritele
• Kümnete lehtede pakettkontrolliks kasuta Total Validatorit: see kontrollib HTML-i, CSS-i, linke ja õigekirja ühe käiguga

Võrdlustabel

1. W3C veebipõhised validaatorid

Validator.w3.org

W3C Markup Validation Service on ametlik validaator veebistandardeid arendavalt konsortsiumilt. Alates 2025. aastast töötab see Nu Html Checker mootoril, mis on vanast SGML parserist moodsam ja täpsem.

Lehte saab kontrollida kolmel viisil: URL-i järgi, HTML-faili üles laadides või koodi otse kleepides. Raport näitab vigu koos reanumbrite ja konkreetsete parandussoovitustega. Pane tähele, et validaator kontrollib vastavust standardile, mitte seda, „kas sait töötab". Roheline W3C märk ei garanteeri, et leht näeb kõigis brauserites ühtemoodi välja.

Praktikas teeme iga kujundusuuenduse käigus kontrolli läbi validator.w3.org. See püüab kinni sulgemata sildid ja mittestandardsed atribuudid, mis visuaalsel vaatlusel märkamata jäävad.

Jigsaw.w3.org

W3C CSS Validation Service kontrollib stiililehtede vastavust spetsifikatsioonile. Saad määrata CSS-i profiili (2.1, 3, SVG), valida kuvamismeedia ja seada raporti detailsuse taseme. Erinevalt HTML-i validaatorist on siin hoiatused sama olulised kui vead, sest need viitavad sageli atribuutidele, mis ei tööta kõigis brauserites.

Kasulik omadus on see, et validaator näitab, milliseid tootjaprefikseid (-webkit-, -moz-) enam vaja ei ole. 2026. aastal toetatakse enamikku CSS3 atribuute ilma prefiksiteta ja jigsaw aitab aegunud koodi puhastada.

2. Spetsialiseeritud veebipõhised tööriistad

Validome.org

Validome on vähem tuntud, kuid kindel validaator, mis toetab mitmeid standardeid: HTML (sh XHTML ja HTML5), CSS, RSS/Atom vood ja isegi mikroandmeid. See töötab kiiresti ja liides on minimalistlik. See on mugav, kui on vaja ristkontrolli: käivita leht läbi W3C, seejärel läbi Validome'i ja võrdle tulemusi. Erinevad parserid tuvastavad mõnikord erinevaid probleeme.

Varvy.com

Varvy näitab lehe kokkuvõtet: kui palju skripte ja stiile on ühendatud, nende suurust ja laadimisjärjekorda. See pole niivõrd validaator, kuivõrd diagnostikavahend jõudluse auditeerimiseks. See on kasulik, kui leht on aeglane: Varvy näitab kohe, milline ressurss blokeerib renderdamist.

3. Brauserilaiendid Firefoxile

HTML Validator

See Tidy'l ja OpenSP-l põhinev laiendus näitab tööriistaribal lihtsat ikooni: roheline tähendab, et leht on valiidne, punane tähendab vigu. Klõpsamine avab üksikasjaliku raporti koos esile tõstetud probleemsete ridade ja parandusettepanekutega. See on ideaalne neile, kes soovivad näha iga külastatava lehe valideerimisstaatust ilma lisapingutuseta.

Total Validator

Total Validator on kombain validaatorite seas. Ühe läbimisega kontrollib see: HTML-i mitme standardversiooni suhtes, CSS-i, katkiseid linke, ligipääsetavust ja õigekirja. Sellel on ekraanipildifunktsioon lehtede jäädvustamiseks erinevates brauserites, mis on mugav kiireks visuaalseks võrdluseks.

Praktikas on Total Validator asendamatu saidi vastuvõtmisel: käivitad kontrolli kogu domeeni peale ja saad ühe aruande kõigi probleemsete lehtede kohta.

• Plussid: kõik ühes tööriistas, ekraanipildid, linkide kontroll, regulaarselt uuendatav
• Miinused: liides näeb aegunud välja, suure saidi kontrollimine võtab minuteid
• Hind: tasuta

Validaty

Kerge laiendus, mis lisab Firefoxi tööriistaribale nupu. Üks klikk ja näed praeguse lehe valiidsuse värvilist indikatsiooni. Minimalistlik: ei mingeid üksikasjalikke aruandeid, ainult „korras / mitte korras". Töövoo ajal kiireks kontrolliks on see ideaalne.

4. Chrome'i laiendused

Web Developer

Web Developeri laiendus on Šveitsi armee nuga veebiarendajatele. Lisaks valideerimisele (HTML URL-i ja otse koodi kleepimise kaudu, CSS, vood, ligipääsetavus) suudab see: keelata JavaScripti, hallata küpsiseid, redigeerida CSS-i lennult, kuvada piltide alt-tekste ja kontrollida katkiseid linke.

Valideerimine ei ole siin põhifunktsioon, vaid osa üldisest tööriistakomplektist. Tore on see, et kõik tööriistad on koondatud ühte paneeli, nii et ei pea vahekaartide vahel hüppama.

• Plussid: rikkalik tööriistade komplekt, integreeritus W3C validaatoritega, aktiivne kogukond
• Miinused: kasutab välist validaatorit (pole sisseehitatud mootorit), ei saa kohandada oma instantsile
• Hind: tasuta

Validity

Validity laiendus väljastab HTML-i kontrolli tulemused otse JavaScripti konsooli, nii et ei pea uut vahekaarti avama. Saad seadistada selle kasutama oma validaatori instantsi ja lubada automaatse kontrolli kindlatel hostidel.

• Plussid: kohandatavus, automaatne kontroll valitud saitidel
• Miinused: väljund seguneb JS-i logidega, muutes selle lugemise ebamugavaks; näitab ainult vea rida ilma koodilõiguta
• Hind: tasuta

HTML Validation Bookmarklet

Acid.JS Validator on järjehoidja, mis kasutab märgendi kontrollimiseks W3C SGML API-t. See ei nõua laienduse installimist: lihtsalt lohista link järjehoidjaribale ja käivita see ühe klikiga mis tahes lehel. Töötab igas brauseris. Hea varuvariant, kui ettevõtte reeglid blokeerivad laiendused.

5. Sisseehitatud arendajatööriistad

Firebug läks ajalukku juba 2017. aastal, kuid selle pärand elab edasi igas kaasaegses brauseris. Firefoxil, Chrome'il ja Edge'il on kõigil sisseehitatud DevTools (F12), mis kasvasid otseselt välja Firebugist.

Mida DevTools saab valideerimise heaks teha:

• Console'i vahekaart näitab JavaScripti vigu koos reanumbrite ja pinu jälgedega. Süntaksivead tõstetakse lehe laadimisel kohe punaselt esile.
• Elements'i vahekaart näitab vigast HTML-i visuaalselt: sildid, mida brauser automaatselt „parandas", kuvatakse lähtekoodist erinevalt.
• Issues'i vahekaart (Chrome) / Console'i paneel (Firefox) näitab hoiatusi aegunud API-de, segasisu (HTTP/HTTPS) ja CSP probleemide kohta.

DevToolsi peamine eelis on vahetus. Oled juba brauseris, vaatad juba lehte, vajuta lihtsalt F12. Installimist pole vaja.

6. JavaScripti validaatorid

Tõsisemaks JavaScriptiga tööks ei piisa veebipõhisest validaatorist. Praktikas kasutame kahte kontrollitaset:

Esiteks, ESLint. Staatiline analüsaator, mis leiab lisaks süntaksivigadele ka potentsiaalsed probleemid: kasutamata muutujad, ebaturvalised konstruktsioonid ja kõrvalekalded koodistiilist. See integreerub VS Code, WebStormi ja CI/CD torustikega. eslint:recommended konfiguratsioon katab enamiku tüüpilise projekti vajadustest.

Teiseks, TypeScript. Range tüüpimine püüab terved veaklassid kinni juba koodi kirjutamise etapis. Kui projekt on puhtas JS-is, lisa vähemalt JSDoc annotatsioonid: TypeScript kontrollib annotatsioonidega .js faile ilma .ts-ile üle minemata.

Veebipõhised validaatorid (javascript-validator.com ja sarnased) sobivad väikese koodijupi kiireks kontrolliks, kuid mitte süstemaatiliseks kooditööks.

7. Responsiivsuse testimine

QuirkTools näitab, kuidas sait erinevatel ekraaniresolutsioonidel välja näeb, nutitelefonist laia monitorini. See on kasulik kiireks responsiivse kujunduse kontrolliks ilma seadmeid füüsiliselt läbi vahetamata.

1. aastal on alternatiiviks sisseehitatud DevTools: Chrome'il ja Firefoxil on seadme emuleerimise režiim (Device Toolbar), mis kuvab mobiilseid resolutsioone täpsemalt. Kuid QuirkTools on mugav klientidele demonstreerimiseks: üks ekraanipilt kõigi murdepunktidega näitab tulemust selgelt.

Video: kuidas kontrollida HTML-i valiidsust 5 minutiga

Kui sa pole kunagi W3C validaatorit käivitanud, alusta sellest lühikesest õpetusest. Autor demonstreerib kõiki kolme kontrollimise viisi: URL-i järgi, faili üleslaadimisega ja otse koodi kleepimisega.

⁉️🤔 Korduma kippuvad küsimused

Miks üldse HTML-i valiidsust 2026. aastal kontrollida, kui brauserid niikuinii kõik ära parandavad?

Brauserid parandavad vigu erinevalt. Chrome võib sulgemata sildi ühtemoodi sulgeda, Safari teisiti. Tulemus: leht näeb välja erinev. Lisaks rikub vigane HTML SEO-d, sest otsingurobotid on märgendusvigade suhtes vähem tolerantsed kui brauserid. W3C valideerimine on kindlustus brauseritevaheliste vigade ja indekseerimisprobleemide vastu.

Mida on olulisem kontrollida: HTML-i või CSS-i?

HTML on olulisem. HTML-i viga lõhub dokumendi struktuuri, mistõttu ekraanilugejad ja otsingumootorid kaotavad sisu. CSS-i viga mõjutab tavaliselt ainult konkreetse elemendi visuaali. Praktikas: kõigepealt valideeri HTML (validator.w3.org), seejärel CSS (jigsaw.w3.org), seejärel JS (ESLint või konsool).

Kas valideerimist saab arendusprotsessis automatiseerida?

Jah, ja see on parim lähenemine. JS-i jaoks ESLint, CSS-i jaoks Stylelint ja HTML-i jaoks html-validate integreeritakse pre-commit konksudesse (Husky + lint-staged). Repositooriumisse push'imisel kontrollitakse kood automaatselt ja vead ei jõua toodangusse. WordPressi projektide puhul lisa kontrollimine CI-sse GitHub Actionsi kaudu: käivita kõik teema mallid iga PR-i puhul validaatorist läbi.

Validator.w3.org näitab töötaval saidil kümneid vigu. Kas see on katastroof?

Mitte alati. Mõned W3C validaatori „vead" on pluginatest või raamistikest lisatud mittestandardsed atribuudid. Näiteks Alpine.js atribuudid (x-data, x-show) või analüütika data-atribuudid. Vaata vigu valikuliselt: sulgemata sildid, vale pesitsus ja korduvad ID-d on tõelised vead. Mittestandardsed data-atribuudid on aktsepteeritav müra.

Millise validaatori peaksin WordPressi saidi jaoks valima?

Alusta validator.w3.org-ist võtmelehtede ühekordseks kontrolliks. Paigalda Total Validator Firefoxi laiendusena perioodilisteks audititeks. Lisa ESLint ja Stylelint oma teema arendusprotsessi. Katkiste linkide jaoks kasuta Total Validatori sisseehitatud auditit või spetsiaalset Dr. Link Checki.

Kokkuvõte: mida ja millal käivitada

Koodi valideerimine ei ole ühekordne tegevus enne projekti üleandmist, vaid harjumus. Siin on meie töötav kontrollnimekiri:

• Uue ploki ehitamisel: käivita HTML läbi validator.w3.org (otse koodi kleepimine), CSS läbi jigsaw.w3.org.
• Uue plugina paigaldamisel WordPressi saidile: ava pluginaga leht brauseris, vajuta F12 → Console, kontrolli punaseid JS-i vigu.
• Kord kvartalis: käivita Total Validator tervel saidil, kontrolli katkisi linke ja üldpilti.
• Enne väljalaset: DevTools → Device Toolbar → käivita läbi kõik murdepunktid, otsides visuaalseid vigu.

Sa ei pea iga lehte iga päev kontrollima. Piisab, kui integreerida valideerimine töövoo kriitilistesse punktidesse ja toodangus esinevate „ootamatute" vigade arv väheneb drastiliselt.

Kui sa alles alustad, paigalda HTML Validatori laiendus Firefoxile või Web Developer Chrome'ile. Tööriistaribal olev ikoon tuletab sulle meelde kontrollida iga kord, kui saidi avad. See on lihtsaim viis muuta valideerimine harjumuseks.