HTML Academy · Lekcja

Walidator znaczników W3C

Znajdowanie i naprawianie błędów HTML za pomocą W3C Markup Validation Service

Walidator znaczników W3C to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co sprawdza walidator

W3C Markup Validator (validator.w3.org) analizuje HTML względem oficjalnej specyfikacji i zgłasza każde naruszenie specyfikacji: niezamknięte znaczniki, nieprawidłowe zagnieżdżenie (element <p> wewnątrz innego <p>), brak wymaganych atrybutów (img bez alt), nierozpoznane elementy i wiele innych.

Dlaczego walidacja ma znaczenie

Nieprawidłowy HTML może dziś renderować się w każdej przeglądarce, ale każda z nich może samodzielnie naprawiać błędy w inny sposób — to, co wygląda poprawnie w Chrome, może nie działać w Firefoxie. Prawidłowy HTML zapewnia przewidywalne, spójne renderowanie i pozwala uniknąć zaskakującego zachowania czytników ekranu, robotów wyszukiwarek i klientów poczty e-mail.

Trzy sposoby przesłania

Walidację można przeprowadzić na podstawie adresu URL (wklejając adres strony), przez przesłanie pliku albo przez bezpośrednie wprowadzenie danych (wklejając HTML). Adres URL najlepiej sprawdza się w przypadku stron produkcyjnych, a bezpośrednie wprowadzenie jest przydatne podczas tworzenia, gdy plik nie jest jeszcze nigdzie dostępny online.

Odczytywanie wyników

Błędy zawierają numer wiersza, fragment problematycznych znaczników i wyjaśnienie. Należy poprawiać je od góry do dołu, ponieważ wiele błędów jest kaskadową konsekwencją jednego wcześniejszego problemu. Po naprawieniu kilku pierwszych błędów warto uruchomić walidację ponownie, aby sprawdzić, ile ostrzeżeń pozostało i które z nich są uzasadnione.

Ostrzeżenia a błędy

Błędy są naruszeniami specyfikacji, które mogą zakłócać renderowanie. Ostrzeżenia dotyczą podejrzanych wzorców, które są technicznie prawidłowe, ale prawdopodobnie niezamierzone (nazwy atrybutów wyglądające na literówki, wskazówki dotyczące dostępności). Błędy trzeba naprawić, a ostrzeżenia warto zbadać.

Częste błędy

Brak atrybutu alt w img. Niezamknięty samozamykający znacznik (<br> zamiast starszej wersji <br/>, która również jest poprawna). Powielony atrybut id na stronie. Etykieta formularza bez atrybutu for odpowiadającego identyfikatorowi id elementu input. Zagnieżdżone elementy interaktywne (button wewnątrz a). Te pięć problemów odpowiada za większość komunikatów walidatora.

Walidacja szablonów

Jeśli kod HTML jest generowany przez szablony, należy walidować wynik końcowy (wyrenderowaną stronę), a nie źródło szablonu. Symbol zastępczy {{ }} nie jest poprawnym kodem HTML — znaczenie ma wyłącznie to, co generuje silnik. Walidator należy uruchamiać w CI dla wyrenderowanych stron z kompilacji testowej.

html-validate CLI

Do integracji z CI należy użyć pakietu npm html-validate: npx html-validate "public/**/*.html" sprawdza każdą stronę w kompilacji. Reguły należy konfigurować w pliku .htmlvalidate.json. Dzięki temu można przerywać kompilacje w przypadku regresji walidacji.

Stylelint i lintowanie u źródła

Lintowanie w momencie zapisu (stylelint dla CSS, eslint-plugin-jsx-a11y dla React) wykrywa wiele problemów, zanim trafią one do walidatora. Należy połączyć je z walidacją end-to-end w CI, tworząc wielowarstwową ochronę — większość problemów zostanie wykryta wcześnie, a pozostałe przed wdrożeniem.

Czego walidacja NIE wykrywa

Walidacja sprawdza poprawność znaczników, a nie semantykę. Strona, na której każdy nagłówek jest oznaczony jako <h6>, zawiera poprawny kod HTML, ale ma nieprawidłową semantykę. Audyty dostępności Lighthouse i przegląd ręczny wykrywają problemy semantyczne, których walidator nie wykrywa.

Ostrzeżenie dotyczące trybu Quirks

Brak <!doctype html> uruchamia tryb Quirks — przeglądarki używają starszej warstwy zgodności, która powoduje nieprawidłowe działanie nowoczesnego CSS. Walidator zgłasza brak deklaracji doctype jako pierwszy błąd; nigdy nie należy wdrażać strony bez tej deklaracji.

Ciągła walidacja

Walidację należy uruchamiać dla każdego PR-a za pomocą GitHub Actions: zainstalować html-validate, uruchomić je dla zbudowanej witryny i oznaczyć PR jako nieudany, jeśli występują błędy. Nowe błędy zostaną wykryte podczas przeglądu zamiast gromadzić się przez wiele miesięcy i stawać się później przytłaczająco trudne do naprawienia.

Sprawdzenie wiedzy

Dlaczego brak deklaracji <!doctype html> ma tak duże znaczenie dla walidatora W3C?

Podsumowanie

W3C Markup Validator analizuje kod HTML zgodnie ze specyfikacją i zgłasza niepoprawne znaczniki. Do jednorazowych kontroli należy używać interfejsu internetowego, a do ciągłego sprawdzania w CI — html-validate CLI. Częste problemy to brak alt, powielone identyfikatory id, brak deklaracji doctype i zagnieżdżone elementy interaktywne. Walidacja wykrywa błędy znaczników; w celu zapewnienia jakości semantycznej i dostępności należy połączyć ją z Lighthouse oraz przeglądem ręcznym.

Często zadawane pytania

Czy lekcja „Walidator znaczników W3C” jest bezpłatna?

Tak — pełny tekst „Walidator znaczników W3C” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Walidator znaczników W3C”?

Znajdowanie i naprawianie błędów HTML za pomocą W3C Markup Validation Service Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Walidator znaczników W3C”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy