Walidacja strony WWW

1. Co to jest walidacja strony?

Proces sprawdzania poprawności HTML i CSS według standardów W3C.
Umożliwia wykrycie błędów i ostrzeżeń, które mogą powodować problemy w wyświetlaniu.
Poprawny kod to podstawa dostępności (WCAG), kompatybilności i SEO (Search Engine Optimization).

2. Wymagane elementy wstępne (DTD i Kodowanie)

Aby walidator mógł prawidłowo sprawdzić kod, dokument musi rozpoczynać się od dwóch kluczowych deklaracji, które często są pomijane i generują pierwsze błędy:

Deklaracja typu dokumentu (DTD): Musi być na początku pliku HTML. W HTML5 jest to uproszczony zapis: <!DOCTYPE html>
Deklaracja kodowania (Charset): Informuje przeglądarkę o używanym zestawie znaków (np. polskie znaki). Musi znajdować się w sekcji <head>: <meta charset="utf-8">

Jeśli brakuje deklaracji DTD, walidator nie wie, w jakim standardzie ma oceniać kod.

3. Jak korzystać z W3C Validator?

Przejdź do oficjalnego walidatora HTML: validator.w3.org.
Wpisz adres URL swojej strony lub wklej kod HTML bezpośrednio do pola walidatora.
Kliknij przycisk "Check" lub "Sprawdź".
Przejrzyj listę błędów i ostrzeżeń podanych przez walidator.
Popraw błędy w kodzie według wskazówek (np. brakujące tagi, niezamknięte elementy, brak atrybutu alt przy obrazkach).
Powtórz walidację po poprawkach, aż do uzyskania statusu "This document was successfully checked".

4. Walidacja CSS

Podobnie korzystaj z walidatora CSS: jigsaw.w3.org/css-validator. Możesz podać URL do pliku CSS lub wkleić kod. Analizuje błędy składni, literówki i ostrzega o przestarzałych właściwościach.

5. Interpretacja raportów i komunikatów

✓ Walidacja zakończona sukcesem! (Green Bar)

Status ten oznacza, że Twój kod jest w pełni zgodny ze standardem HTML5. Osiągnięcie go to cel procesu walidacji.

✗ Błąd! Znaleziono 3 krytyczne problemy (Red Bar)

Przykłady typowych błędów HTML

Brakujące atrybuty alt przy obrazkach: <img src="logo.png"> → popraw na <img src="logo.png" alt="Logo firmy">. Jest to błąd dostępności (WCAG).

Nieprawidłowe zagnieżdżenie tagów: <div><p>Tekst</div></p> → popraw na <div><p>Tekst</p></div>. Błąd w logice struktury.

Niezakończone tagi: Brak zamknięcia elementu, np. <li>. W HTML5 większość tagów musi być zamknięta.

Przykłady typowych błędów CSS

Błędy składni: np. background-colr: #fff; zamiast background-color: #fff; - literówka we właściwości.

Brak średnika: color: red background: white; - brak średnika po color: red.

6. Checklist do poprawnej walidacji

Na początku kodu umieściłem deklarację DTD: <!DOCTYPE html> Zadeklarowałem kodowanie znaków: <meta charset="utf-8"> Przesłałem kod HTML do walidatora i poprawiłem wszystkie błędy Przesłałem kaskadowe style CSS do walidatora i poprawiłem błędy Sprawdziłem czy wszystkie obrazy posiadają atrybut alt Ponownie zwalidowałem poprawiony kod i uzyskałem status sukcesu