Walidatory HTML i CSS - Kontrola jakości piramidy

Przeglądarka jest bardzo wyrozumiała: gdy zapomnisz o atrybucie albo zrobisz literówkę w nazwie właściwości CSS, nie wyświetli żadnego błędu, tylko po cichu spróbuje zgadnąć, o co Ci chodziło. Strona "jakoś działa" - do czasu, aż w innej przeglądarce albo w czytniku ekranowym rozsypie się jak źle spasowane bloki. Faraonowie Egiptu nie budowali piramid bez planów 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

Sprawdzanie przebiega zawsze tak samo: wchodzisz na validator.w3.org, podajesz adres, plik albo wklejony kod, klikasz przycisk Check, a potem analizujesz wyniki i poprawiasz błędy od góry listy - jeden błąd potrafi wywołać kilka kolejnych. Walidator dzieli komunikaty na błędy (Error), ostrzeżenia (Warning) i informacje (Info). Błędy naprawiaj zawsze, a resztę czytaj uważnie.

Typowe błędy wychwytywane przez walidator:

Najczęstszy błąd to obraz bez tekstu alternatywnego. Specyfikacja HTML wymaga atrybutu alt przy <img>, więc walidator zgłosi jego brak:

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">

Poprawka dodaje tylko atrybut - obraz, jego adres i wygląd strony się nie zmieniają. <img> to element pusty: nie ma znacznika zamykającego, więc kończysz go zwykłym >. Ukośnik przed nawiasem jest dozwolony, ale niczego nie zmienia, a walidator pokaże przy nim tylko informację.

Drugi przykład to niezamknięty akapit. Tu kryje się ciekawa pułapka - przyjrzyj się kodowi:

1<!-- ŹLE: Niezamknięty znacznik -->
2<p>Tekst paragrafu
3<p>Kolejny paragraf</p>
4
5<!-- POPRAWNIE: -->
6<p>Tekst paragrafu</p>
7<p>Kolejny paragraf</p>

Specyfikacja HTML pozwala pominąć </p>, gdy zaraz po akapicie zaczyna się kolejny <p> albo element blokowy, np. <div>. Walidator akurat tego nie zgłosi, a przeglądarka sama domknie akapit - Ty jednak tracisz kontrolę nad tym, gdzie się on kończy. Niezamknięty <div> czy <strong> walidator już wychwyci (komunikat "Unclosed element"), dlatego zamykaj każdy znacznik jawnie - i to polecam.

Trzeci błąd łatwo przeoczyć w długim pliku: ten sam identyfikator użyty dwa razy. Atrybut id musi być unikalny w całym dokumencie:

1<!-- BŁĄD: Zduplikowane ID -->
2<div id="header">Nagłówek</div>
3<div id="header">Inny nagłówek</div>
4
5<!-- POPRAWNIE: -->
6<div id="header">Nagłówek</div>
7<div id="subheader">Inny nagłówek</div>

To nie jest kosmetyka: <label for>, kotwice z # i aria-describedby wskazują element po id, więc przy duplikacie trafiają w pierwszy pasujący element. Klasa może się powtarzać, identyfikator nigdy.

Pamiętaj też, że walidator sprawdza zgodność ze specyfikacją HTML, a nie dostępność. Pole <input> bez etykiety jest dla niego poprawne - taki problem wyłapiesz Lighthouse'em lub axe, które poznałeś w module o dostępności.

W3C CSS Validator

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

• Poprawność składni CSS
• Błędy w nazwach właściwości
• Nieprawidłowe wartości

Zobacz dwa klasyczne błędy - literówkę w nazwie właściwości i wartość, której CSS nie rozumie:

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}

Przeglądarka nie pokaże tu żadnego komunikatu - po prostu zignoruje obie deklaracje, a Ty będziesz się zastanawiać, dlaczego nagłówek nie jest czerwony. W DevTools, w karcie Styles, taka deklaracja jest przekreślona i oznaczona ikoną ostrzeżenia, a walidator CSS wskaże ją z numerem linii.

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
• Panel Issues - zbiera ostrzeżenia, np. o polach formularza bez powiązanej etykiety
• 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. Waliduj zawsze przed publikacją: strona bez błędów walidacji to jeden z warunków projektu końcowego tego modułu.

Praktyka

W edytorze poniżej znajdziesz stronę, która przechodzi walidację W3C. Wklej jej kod do walidatora, a potem celowo usuń jeden alt i sprawdź, co się zmieni:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Walidacja HTML i CSS</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Walidacja kodu HTML i CSS</h1>
11
12    <section>
13        <h2>Poprawny kod HTML</h2>
14        <p>Ponizszy kod przeszedl walidacje W3C:</p>
15
16        <article>
17            <h3>Poprawna struktura</h3>
18            <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Piramida"
19                 alt="Wielka Piramida w Gizie o zachodzie slonca"
20                 width="300" height="200">
21            <p>Obraz z atrybutem <code>alt</code> i wymiarami.</p>
22        </article>
23
24        <article>
25            <h3>Poprawny formularz</h3>
26            <form>
27                <label for="name">Imie:</label>
28                <input type="text" id="name" name="name">
29
30                <label for="email">Email:</label>
31                <input type="email" id="email" name="email">
32            </form>
33        </article>
34    </section>
35
36    <section>
37        <h2>Typowe bledy do unikania</h2>
38        <ul>
39            <li>Brak atrybutu <code>alt</code> na obrazach</li>
40            <li>Niezamkniete znaczniki HTML</li>
41            <li>Zduplikowane atrybuty <code>id</code></li>
42            <li>Elementy blokowe wewnatrz inline</li>
43            <li>Brak <code>&lt;!DOCTYPE html&gt;</code></li>
44        </ul>
45    </section>
46</body>
47</html>

Pamiętaj: walidator to nadzorca budowy, który obchodzi piramidę z miarką - im wcześniej wskaże krzywy blok, tym mniej trzeba będzie rozbierać.