Najczęstsze błędy i walidacja HTML

Najczęstsze błędy w HTML ❌

Podczas pisania HTML łatwo o drobne błędy. Na szczęście większość z nich można szybko znaleźć i poprawić.

Typowe błędy:

brak zamknięcia tagu,
literówki w nazwach znaczników (<tutle> zamiast <title>),
zagnieżdżanie elementów w złej kolejności,
brak atrybutu alt w <img>,
duplikaty id na stronie,
nieprawidłowe atrybuty (np. herf zamiast href).

Przykład

<!-- Bledny kod -->
<p>To jest paragraf
<p>Kolejny paragraf</p>

Przeglądarka spróbuje to „naprawić”, ale struktura może być inna, niż się spodziewasz.

Czym jest walidacja HTML? ✅

Walidacja to sprawdzanie, czy kod HTML jest poprawny zgodnie ze standardem.

Do walidacji możesz użyć np.:

W3C Markup Validation Service – https://validator.w3.org/
wtyczek w edytorze (np. rozszerzenia do VSCode),
narzędzi wbudowanych w frameworki.

Jak użyć walidatora W3C?

Otwórz stronę: https://validator.w3.org/
Wybierz jedną z opcji:
- sprawdzanie po adresie URL,
- wklejenie kodu,
- przesłanie pliku.
Przejrzyj listę błędów i ostrzeżeń.
Popraw kod i sprawdź ponownie.

Warto dążyć do 0 błędów, ale ostrzeżenia nie zawsze są krytyczne.

Przykład: poprawa błędów

Przykład

<!-- Przed -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Strona</title>
  </head>
  <body>
    <h1>Witaj!</h1>
    <p>Paragraf
    <img src="kot.jpg">
  </body>
</html>

Problemy:

brak <!DOCTYPE html>,
brak zamknięcia <p>,
brak alt w <img>.

Przykład

<!-- Po -->
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Strona</title>
  </head>
  <body>
    <h1>Witaj!</h1>
    <p>Paragraf</p>
    <img src="kot.jpg" alt="Usmiechniety kot">
  </body>
</html>

Dobre praktyki

regularnie sprawdzaj kod w walidatorze,
poprawiaj błędy od góry listy (często jeden błąd powoduje kolejne),
zwracaj uwagę na ostrzeżenia – mogą wskazywać lepsze rozwiązania,
ucz się na błędach – po kilku razach zaczniesz ich unikać automatycznie.

Ćwiczenie

Napisz prostą stronę HTML.
Celowo wprowadź kilka błędów (np. brak zamknięcia tagów).
Prześlij kod do walidatora.
Popraw błędy i sprawdź wynik ponownie.

To świetny sposób na zrozumienie, jak działa parser HTML.