Walidatory HTML i CSS - Kontrola jakości piramidy

Faraonowie Egiptu nie budowali piramid bez planow i kontroli jakości. Każdy blok musiał być idealnie dopasowany. W web developmencie rolę "kontrolera jakości" pełnią walidatory - narzędzia sprawdzające poprawność kodu.

W3C Markup Validator

W3C Markup Validation Service (validator.w3.org) to oficjalne narzędzie organizacji W3C do sprawdzania poprawności kodu HTML. Możesz użyć go na trzy sposoby:

• Validate by URI - wpisz adres strony internetowej
• Validate by File Upload - prześlij plik HTML z dysku
• Validate by Direct Input - wklej kod HTML bezpośrednio

Typowe błędy wychwytywane przez walidator:

1<!-- BŁĄD: Brak atrybutu alt na img -->
2<img src="piramida.jpg">
3
4<!-- POPRAWNIE: -->
5<img src="piramida.jpg" alt="Wielka Piramida w Gizie">
6
7<!-- BŁĄD: Niezamkniety znacznik -->
8<p>Tekst paragrafu
9<p>Kolejny paragraf</p>
10
11<!-- POPRAWNIE: -->
12<p>Tekst paragrafu</p>
13<p>Kolejny paragraf</p>
14
15<!-- BŁĄD: Zduplikowane ID -->
16<div id="header">Nagłówek</div>
17<div id="header">Inny nagłówek</div>
18
19<!-- POPRAWNIE: -->
20<div id="header">Nagłówek</div>
21<div id="subheader">Inny nagłówek</div>

W3C CSS Validator

Podobne narzędzie istnieje dla CSS (jigsaw.w3.org/css-validator/). Sprawdza:

• Poprawnosc składni CSS
• Bledy w nazwach właściwości
• Nieprawidłowe wartości

1/* BŁĄD: Nieprawidłowa właściwość */
2h1 {
3  colr: red;     /* powinno być: color */
4}
5
6/* BŁĄD: Nieprawidłowa wartość */
7p {
8  font-size: duży;  /* powinno być np. 16px, 1rem */
9}
10
11/* POPRAWNIE: */
12h1 {
13  color: #8b6914;
14  font-size: 2rem;
15}

DevTools jako walidator

Chrome DevTools też pokazuje błędy w kodzie:

• Panel Console - wyświetla błędy JavaScript i ostrzeżenia
• Panel Elements - podświetla problematyczne elementy
• Lighthouse - kompleksowy audyt strony

Dobra praktyka to uruchomienie walidacji po każdej większej zmianie w kodzie - tak jak starożytni architekci sprawdzali każdy nowy poziom piramidy.