A W3C HTML-validáció az a vizsgálat, amely megnézi, hogy az oldal HTML-kódja megfelel-e a szabvány formai szabályainak: minden tag zárva van-e, az attribútumok léteznek-e, és a struktúra logikus-e. A hivatalos ellenőrzőeszköz a W3C Markup Validation Service, ami hibákat (error) és figyelmeztetéseket (warning) ad vissza.
Hogyan működik
A validátor letölti az oldal HTML-forrását, és összeveti a HTML Living Standard szabályaival. Nem futtat JavaScriptet, tehát a nyers, szerver által küldött kódot nézi. Ezért egy React- vagy Vue-oldal validációs eredménye gyakran félrevezető: a kliensen generált markup nem kerül bele.
Tipikus hibák: lezáratlan <div>, duplikált id, kötelező alt hiánya, érvénytelen attribútum-érték, rossz egymásba ágyazás. A doctype és charset hiánya szintén azonnal hibát dob, mert a validátor ilyenkor nem tudja, milyen szabályrendszert alkalmazzon.
Mit kezdenek vele a böngészők és a keresők
A böngészők hibatűrők. A HTML-parser szabványosan definiált hibajavítási logikát követ, ezért egy lezáratlan tag általában nem töri szét az oldalt. A Google ugyanazt a Chromium-alapú parsert használja rendereléshez, tehát a validációs hibák túlnyomó része rangsorolási szempontból közömbös.
Ami viszont számít: az olyan szerkezeti hiba, ami elmozgatja a DOM-ot a szándékolt formától. Ha egy rosszul zárt <div> miatt a fő tartalom beleszalad a láblécbe, akkor a fő tartalom aránya és a szövegkivonat is romlik.
Miért más a generatív keresőknek
Az AI-crawlerek jó része nem futtat JavaScriptet, és egyszerűbb HTML-feldolgozót használ, mint egy böngésző. Ezek az eszközök érzékenyebbek a rontott struktúrára. A riportokban azt látjuk, hogy a súlyosan kevert markup miatt a szövegkinyerés összefolyik, és a címhierarchia eltűnik.
A tiszta HTML tehát nem önmagáért érték. Azért érdekes, mert a gépi olvasat pontossága múlik rajta.
Röviden: a validációs hiba önmagában ritkán baj, de a szerkezetet elrontó hiba a gépi szövegkinyerést is elrontja.
Technikai példa
Tipikus hibák és a javított változat:
<!-- Hibás: lezáratlan div, duplikált id, elavult tag -->
<div class="card">
<h2 id="cim">Szolgáltatásaink</h2>
<p>Weboldal-fejlesztés és karbantartás.
<div class="card">
<h2 id="cim">Referenciák</h2>
<center>Több mint 200 projekt</center>
</div>
<!-- Javított -->
<div class="card">
<h2 id="szolgaltatasok">Szolgáltatásaink</h2>
<p>Weboldal-fejlesztés és karbantartás.</p>
</div>
<div class="card">
<h2 id="referenciak">Referenciák</h2>
<p class="center">Több mint 200 projekt</p>
</div>
A <center> helyett CSS-osztály megy, az id értékek egyediek lettek, és minden konténer zárva van.
Parancssorból is futtathatod a validátort, JSON-válasszal:
curl -s "https://validator.w3.org/nu/?doc=https%3A%2F%2Fpelda.hu%2F&out=json" \
| jq '[.messages[] | select(.type=="error")] | length'
Ez visszaadja a hibák darabszámát. Több URL-re futtatva gyorsan látod, melyik oldaltípus a legrosszabb.
Saját HTML-fájl ellenőrzése feltöltés nélkül:
curl -s -H "Content-Type: text/html; charset=utf-8" \
--data-binary @index.html \
"https://validator.w3.org/nu/?out=json"
Gyakori kérdések
Rontja a Google-helyezésemet, ha sok validációs hiba van?
Közvetlenül nem. A Google ugyanazt a hibatűrő HTML-parsert használja, mint a Chrome, ezért a hibák nagy részét automatikusan javítja renderelés közben. Közvetve akkor árt, ha a hiba elrontja a DOM-szerkezetet, és a tartalom rossz helyre kerül. Ilyenkor a kivonatolás és a címhierarchia is sérül.
Miért nem tudom lenullázni a hibákat?
Mert a hibák egy része nem a te kódodból jön. A beágyazott chat-widgetek, térképek, fizetési modulok és hirdetési szkriptek saját markupot injektálnak. Ezekhez nincs hozzáférésed. A reális cél az, hogy a saját sablonjaid hibamentesek legyenek.
Melyik oldalakat érdemes validálni?
Oldaltípusonként egyet-egyet. Egy kezdőlapot, egy szolgáltatás- vagy termékoldalt, egy blogbejegyzést és egy listaoldalt. A sablonalapú rendszerekben a hiba oldaltípusonként ismétlődik, tehát négy mérésből látod a teljes képet.
Mi a különbség a validátor hibája és figyelmeztetése között?
A hiba (Error) szabályszegés: valami olyan van a kódban, amit a szabvány tilt. A figyelmeztetés (Warning) inkább javaslat, például felesleges attribútum vagy szokatlan, de megengedett szerkezet. Javításkor a hibákkal kezdj, a figyelmeztetések általában ráérnek.
Érdemes a validációt automatizálni?
Ha van build-folyamatod, igen. Az npm-es html-validate csomag lokálisan fut, és beköthető a CI-be. Állíts be egy küszöböt a jelenlegi hibaszámra, és ne engedd, hogy nőjön. A meglévő hibákat így fokozatosan tudod ledolgozni.
