Oddali Państwo projekt, otworzyli w przeglądarce, a układ się rozjechał. Sprawdzili na tablecie, menu się przekrzywiło. Klient pisze: „u mnie w Safari wszystko jest szare". Brzmi znajomo?

Źródłem problemu jest nieprawidłowy kod. Jeden niezamknięty znacznik, pominięty średnik w CSS lub błąd składni w JavaScript i przeglądarka „domyśla się" za Państwa. Każda przeglądarka domyśla się na swój sposób. Rezultat to chaos.

Na szczęście sprawdzanie poprawności kodu w 2026 roku jest prostsze niż kiedykolwiek. Serwisy online, rozszerzenia przeglądarek i wbudowane DevTools znajdują błędy w kilka sekund, a nie w ciągu całego wieczoru debugowania. Poniżej przedstawiamy sprawdzone narzędzia, których używamy w praktyce.

💡 Szybki przegląd:

• Proszę otworzyć validator.w3.org i sprawdzić HTML strony: zajmie to 10 sekund
• Do CSS proszę używać jigsaw.w3.org/css-validator: pokaże ostrzeżenia o niezgodności z konkretnymi przeglądarkami
• JavaScript proszę sprawdzać przez ESLint lub wbudowaną konsolę przeglądarki: błędy składni są podświetlane od razu
• Proszę zainstalować rozszerzenie Web Developer dla Chrome: daje dostęp do walidatorów W3C jednym kliknięciem
• Do wsadowego sprawdzania dziesiątek stron proszę wziąć Total Validator: sprawdza HTML, CSS, linki i pisownię w jednym przebiegu

Tabela porównawcza

1. Walidatory online W3C

Validator.w3.org

W3C Markup Validation Service to oficjalny walidator konsorcjum opracowującego standardy sieciowe. Od 2025 roku działa na silniku Nu Html Checker, który jest nowocześniejszy i dokładniejszy niż stary parser SGML.

Stronę można sprawdzić na trzy sposoby: przez URL, przez przesłanie pliku HTML lub przez bezpośrednie wklejenie kodu. Raport pokazuje błędy z numerami wierszy i konkretnymi zaleceniami dotyczącymi poprawek. Proszę zwrócić uwagę: walidator sprawdza zgodność ze standardem, a nie to, „czy strona działa"; zielona odznaka W3C nie gwarantuje, że strona wygląda identycznie we wszystkich przeglądarkach.

W praktyce uruchamiamy sprawdzenie przez validator.w3.org podczas każdego redesignu, wyłapuje to niezamknięte znaczniki i niestandardowe atrybuty, które umykają podczas wizualnego przeglądu.

Jigsaw.w3.org

CSS Validation Service od W3C sprawdza arkusze stylów pod kątem zgodności ze specyfikacją. Można wskazać profil CSS (2.1, 3, SVG), wybrać medium wyjściowe i poziom szczegółowości raportu. W przeciwieństwie do walidatora HTML, tutaj ostrzeżenia są nie mniej ważne niż błędy, często wskazują na właściwości, które nie działają we wszystkich przeglądarkach.

Przydatna funkcja: walidator pokazuje, które prefiksy dostawców (-webkit-, -moz-) nie są już potrzebne. W 2026 roku większość właściwości CSS3 jest obsługiwana bez prefiksów, jigsaw pomaga czyścić przestarzały kod.

2. Specjalistyczne narzędzia online

Validome.org

Validome to mniej znany, ale solidny walidator z obsługą kilku standardów: HTML (w tym XHTML i HTML5), CSS, kanałów RSS/Atom, a nawet mikrodanych. Działa szybko, interfejs jest minimalistyczny. Wygodny, gdy potrzebny jest cross-check: przepuścić stronę przez W3C, a następnie przez Validome i porównać wyniki. Różne parsery czasem wyłapują różne problemy.

Varvy.com

Varvy pokazuje podsumowanie strony: ile skryptów i stylów jest podłączonych, ich rozmiar, kolejność ładowania. To nie tyle walidator, co narzędzie diagnostyczne do audytu wydajności. Przydatne, gdy strona działa wolno: Varvy od razu pokazuje, który konkretnie zasób blokuje renderowanie.

3. Rozszerzenia przeglądarek dla Firefox

HTML Validator

Rozszerzenie oparte na Tidy i OpenSP pokazuje prostą ikonę na pasku narzędzi: zieloną, gdy strona jest poprawna, czerwoną, gdy są błędy. Po kliknięciu otwiera się szczegółowy raport z podświetlonymi problematycznymi wierszami i wskazówkami dotyczącymi poprawek. Idealne dla tych, którzy chcą widzieć status walidacji każdej odwiedzanej strony bez zbędnych ruchów.

Total Validator

Total Validator, kombajn wśród walidatorów. W jednym przebiegu sprawdza: HTML pod kątem zgodności z kilkoma wersjami standardu, CSS, uszkodzone linki, dostępność (accessibility) oraz ortografię. Ma funkcję wykonywania zrzutów ekranu strony w różnych przeglądarkach, wygodną do szybkiego porównania wizualnego.

W praktyce Total Validator jest niezastąpiony podczas odbioru strony: uruchamiają Państwo sprawdzenie całej domeny i otrzymują jeden raport dla wszystkich problematycznych stron.

• Plusy: wszystko w jednym narzędziu, zrzuty ekranu, sprawdzanie linków, regularnie aktualizowane
• Minusy: interfejs wygląda na przestarzały, dla dużej witryny sprawdzanie trwa kilka minut
• Cena: Free

Validaty

Lekkie rozszerzenie, które dodaje przycisk na pasku Firefoksa. Jedno kliknięcie i widzą Państwo kolorową indykację poprawności bieżącej strony. Minimalistycznie: nie ma szczegółowych raportów, tylko „poprawna / niepoprawna". Do szybkiego sprawdzenia w toku pracy, w sam raz.

4. Rozszerzenia Chrome

Web Developer

Rozszerzenie Web Developer, szwajcarski scyzoryk webdevelopera. Oprócz walidacji (HTML przez URL i bezpośrednie wklejenie kodu, CSS, kanały, accessibility), potrafi: wyłączać JavaScript, zarządzać cookie, edytować CSS na żywo, pokazywać teksty alt obrazków i sprawdzać uszkodzone linki.

Walidacja nie jest tu główną funkcją, lecz częścią ogólnego zestawu. To przyjemne, że wszystkie narzędzia zebrano w jednym panelu, nie trzeba przeskakiwać między kartami.

• Plusy: bogaty zestaw narzędzi, integracja z walidatorami W3C, aktywna społeczność
• Minusy: korzysta z zewnętrznego walidatora (nie ma własnego silnika), nie można dostosować do własnej instancji
• Cena: Free

Validity

Rozszerzenie Validity wyświetla wyniki sprawdzenia HTML bezpośrednio w konsoli JavaScript, nie trzeba otwierać nowej karty. Można je skonfigurować na własną instancję walidatora i włączyć automatyczne sprawdzanie na określonych hostach.

• Plusy: personalizacja, autosprawdzanie na wybranych stronach
• Minusy: dane wyjściowe mieszają się z logami JS, czyta się niewygodnie; pokazuje tylko wiersz błędu bez fragmentu kodu
• Cena: Free

HTML Validation Bookmarklet

Acid.JS Validator, skryptozakładka wykorzystująca W3C SGML API do sprawdzania znaczników. Nie wymaga instalowania rozszerzenia: wystarczy przeciągnąć link na pasek zakładek i uruchamiać na dowolnej stronie jednym kliknięciem. Działa w każdej przeglądarce. Dobra opcja zapasowa, gdy rozszerzenia są blokowane przez politykę korporacyjną.

5. Wbudowane narzędzia deweloperskie

Firebug przeszedł do historii już w 2017 roku, ale jego dziedzictwo żyje w każdej nowoczesnej przeglądarce. Zarówno Firefox, jak i Chrome oraz Edge mają wbudowane DevTools (F12), które wyrosły właśnie z Firebuga.

Co potrafią DevTools w zakresie walidacji:

• Karta Console, błędy JavaScript z numerami wierszy i śledzeniem stosu. Błędy składniowe są podświetlane na czerwono natychmiast podczas ładowania strony.
• Karta Elements, niepoprawny HTML widać wizualnie: znaczniki, które przeglądarka „naprawiła" automatycznie, są wyświetlane inaczej niż w kodzie źródłowym.
• Karta Issues (Chrome) / panel Console (Firefox), ostrzeżenia o przestarzałych API, mieszanej treści (HTTP/HTTPS) i problemach z CSP.

Główna zaleta DevTools to natychmiastowość. Są już Państwo w przeglądarce, już patrzą na stronę, wystarczy nacisnąć F12. Niczego nie trzeba instalować.

6. Walidatory JavaScript

Do poważnej pracy z JavaScript walidator online nie wystarcza. W praktyce stosujemy dwa poziomy sprawdzania:

Pierwszy, ESLint. Analizator statyczny, który znajduje nie tylko błędy składniowe, ale też potencjalne problemy: nieużywane zmienne, niebezpieczne konstrukcje, odstępstwa od stylu kodu. Integruje się z VS Code, WebStorm i pipeline'ami CI/CD. Konfiguracja eslint:recommended pokrywa większość potrzeb typowego projektu.

Drugi, TypeScript. Ścisłe typowanie wyłapuje całe klasy błędów już na etapie pisania kodu. Jeśli projekt jest w czystym JS, proszę przynajmniej podłączyć adnotacje JSDoc: TypeScript sprawdza pliki .js z adnotacjami bez przechodzenia na .ts.

Walidatory online (javascript-validator.com i podobne) nadają się do szybkiego sprawdzenia niewielkiego snippetu, ale nie do systematycznej pracy z kodem.

7. Sprawdzanie responsywności

QuirkTools pokazuje, jak strona wygląda przy różnych rozdzielczościach ekranu, od smartfona po szeroki monitor. Przydatne do szybkiego sprawdzenia responsywnego layoutu bez fizycznego przeglądania na różnych urządzeniach.

W 2026 roku alternatywą są również wbudowane DevTools: w Chrome i Firefox istnieje tryb emulacji urządzeń (Device Toolbar), który dokładniej oddaje renderowanie na rozdzielczościach mobilnych. Jednak QuirkTools jest wygodny do demonstracji dla klienta, jeden zrzut ekranu ze wszystkimi breakpointami obrazowo pokazuje rezultat.

Wideo: jak sprawdzić poprawność HTML w 5 minut

Jeśli ani razu nie uruchamiali Państwo walidatora W3C, proszę zacząć od tego krótkiego tutoriala. Autor pokazuje wszystkie trzy sposoby sprawdzania: przez URL, przez przesłanie pliku i przez bezpośrednie wklejenie kodu.

⁉️🤔 Często zadawane pytania

Po co w ogóle sprawdzać poprawność HTML w 2026 roku, skoro przeglądarki wszystko naprawiają?

Przeglądarki naprawiają błędy na różne sposoby. Chrome może zamknąć niezamknięty tag w jeden sposób, Safari w inny. Rezultat: strona wygląda inaczej. Ponadto niepoprawny HTML psuje SEO, roboty wyszukiwarek są mniej tolerancyjne na błędy znaczników niż przeglądarki. Walidacja W3C to zabezpieczenie przed błędami międzyprzeglądarkowymi i problemami z indeksowaniem.

Co ważniej sprawdzać: HTML czy CSS?

HTML jest ważniejszy. Błąd w HTML psuje strukturę dokumentu, czytniki ekranowe i wyszukiwarki tracą treść. Błąd w CSS zwykle dotyczy tylko wyglądu konkretnego elementu. W praktyce: najpierw proszę walidować HTML (validator.w3.org), potem CSS (jigsaw.w3.org), potem JS (ESLint lub konsola).

Czy można zautomatyzować walidację w procesie developmentu?

Tak, i to jest najlepsze podejście. ESLint dla JS, Stylelint dla CSS i html-validate dla HTML wbudowuje się w pre-commit hooki (Husky + lint-staged). Podczas pushu do repozytorium kod jest sprawdzany automatycznie, błąd nie trafia na produkcję. Dla projektów WordPress proszę dodać sprawdzanie w CI przez GitHub Actions: wszystkie szablony motywu są przepuszczane przez walidator podczas każdego PR.

Validator.w3.org pokazuje dziesiątki błędów na działającej stronie, czy to katastrofa?

Nie zawsze. Część „błędów" walidatora W3C to niestandardowe atrybuty dodawane przez wtyczki lub frameworki. Na przykład atrybuty Alpine.js (x-data, x-show) lub data-atrybuty analityki. Proszę patrzeć na błędy selektywnie: niezamknięte tagi, nieprawidłowe zagnieżdżenie i zduplikowane id to realne bugi. Niestandardowe data-atrybuty to dopuszczalny szum.

Jaki walidator wybrać dla strony WordPress?

Proszę zacząć od validator.w3.org do jednorazowego sprawdzenia kluczowych stron. Proszę zainstalować Total Validator jako rozszerzenie Firefox do okresowego audytu. Proszę dodać ESLint i Stylelint do procesu developmentu motywu. Do sprawdzania martwych linków proszę używać wbudowanego audytu w Total Validator lub specjalistycznego Dr. Link Check.

Podsumowanie: co i kiedy uruchamiać

Walidacja kodu to nie jednorazowa akcja przed oddaniem projektu, lecz nawyk. Oto nasza robocza checklista:

• Podczas kodowania nowego bloku: przepuścić HTML przez validator.w3.org (bezpośrednie wklejenie kodu), CSS przez jigsaw.w3.org.
• Podczas instalowania nowej wtyczki na WordPress: otworzyć stronę z wtyczką w przeglądarce, nacisnąć F12 → Console, czy nie ma czerwonych błędów JS.
• Raz na kwartał: uruchomić Total Validator na całej stronie, sprawdzić martwe linki i ogólny obraz.
• Przed releasem: DevTools → Device Toolbar → przejrzeć wszystkie breakpointy pod kątem błędów wizualnych.

Nie trzeba sprawdzać każdej strony codziennie. Wystarczy wbudować walidację w krytyczne punkty workflow, a liczba „niespodziewanych" bugów na produkcji radykalnie spadnie.

Jeśli dopiero Państwo zaczynają, proszę zainstalować rozszerzenie HTML Validator dla Firefox lub Web Developer dla Chrome. Ikona na pasku będzie przypominać o sprawdzeniu za każdym razem, gdy otwierają Państwo stronę. To najprostszy sposób, by uczynić walidację nawykiem.