Pisanie HTML-a wydaje się proste. I w sumie – jest! Ale jak w każdej dziedzinie, początki bywają zdradliwe. Niby coś działa, strona się wyświetla… a potem nagle coś się rozjeżdża, nie widać obrazka, a Google krzywo patrzy na naszą witrynę.
Jeśli zaczynasz przygodę z HTML-em, ten wpis jest dla Ciebie. Oto lista 10 popularnych błędów, które sam kiedyś popełniałem – i garść wskazówek, jak ich uniknąć.
Nie dodajesz <!DOCTYPE html>
To taki magiczny znacznik, który powinien znajdowąć się na samym początku pliku HTML.
Dlaczego to ważne?
Bez tego przeglądarka może „zgadywać”, jak wyświetlić Twoją stronę, co często kończy się dziwnymi efektami.
✅ Rozwiązanie:
Po prostu zawsze zaczynaj tak:
<!DOCTYPE html>
Zapominasz zamykać tagi
Piszesz coś, działa… ale potem dodajesz kolejny element i wszystko się sypie. Powód? Zapomniany </div> albo </p>.
Dlaczego to problem?
HTML jest wyrozumiały, ale nie cudotwórczy. Niezamknięte tagi mogą powodować bałagan w układzie strony.
✅ Rozwiązanie:
Używaj edytora z podpowiedziami (np. Visual Studio Code), formatowania kodu i czytelnego wcięcia.
Brakuje podstawowej struktury strony
Czasem ktoś zaczyna pisać HTML od razu od <p> albo <h1>, zapominając o całej reszcie.
Poprawny szkielet strony wygląda tak:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Tytuł strony</title>
</head>
<body>
<!–Treść strony –>
</body>
</html>
✅ Rozwiązanie:
Zrób z tego szablon i korzystaj za każdym razem. To jak baza, na której budujesz dalej.
Wszędzie tylko <div> i <span>
Znany problem: cały internet zbudowany z divów. Nazywa się to „divoce”.
Dlaczego to błąd?
Kod jest nieczytelny, cięższy do stylowania, a wyszukiwarki nie rozumieją jego struktury.
✅ Rozwiązanie:
Korzystaj z semantycznych znaczników, jak:
<header><nav><main><section><footer>
Twoja strona będzie wyglądać lepiej nie tylko dla ludzi, ale i dla robotów Google’a.
Literówki w atrybutach
Przykład, który widuję bardzo często:
<a href=”strona.html” target=”blank”>Kliknij mnie!</a>
✅ Poprawnie:
<a href=”strona.html” target=”_blank”>Kliknij mnie!</a>
Zapominasz o „alt” w obrazkach
Ten malutki atrybut w <img> to nie tylko gadżet – on naprawdę jest ważny.
Po co to?
Pomaga osobom niewidomym (czytniki ekranu).
Wyświetla tekst, jeśli obrazek się nie załaduje.
Jest sygnałem dla Google’a, co przedstawia obraz.
✅ Zawsze pisz coś takiego:
<img src=”piesek.jpg” alt=”Pies rasy beagle uśmiechający się do kamery”>
Używasz przestarzałych tagów
Jeśli widzisz w kodzie <center>, <font>, albo <marquee> – wiedz, że coś się dzieje.
Dlaczego to źle?
To relikty z lat 90. Zamiast nich używamy CSS.
✅ Przykład:
Zamiast <center>, zrób:
<p style=”text-align:center;”>Środek!</p>
Albo lepiej – przerzuć styl do CSS i rozdziel kod od wyglądu.
Wklejasz teksty prosto z Worda
Jeśli robisz stronę i wklejasz tekst bezpośrednio z Microsoft Word… przestań. Serio.
Dlaczego?
Word dodaje całą masę ukrytych stylów i brzydkiego kodu, którego nie widać, ale który wszystko psuje.
✅ Rozwiązanie:
Najpierw wklej do Notatnika (lub innego edytora tekstu), a potem do edytora kodu.
Ignorujesz dostępność (a11y)
Nie chodzi tylko o to, żeby strona ładnie wyglądała – ważne, żeby wszyscy mogli z niej korzystać.
Najczęstsze błędy:
Brak
altw obrazachNagłówki skaczące od
<h1>do<h4>bez kolejnościBrak możliwości nawigacji z klawiatury
✅ Rozwiązanie:
Zadbaj o prostą i logiczną strukturę, używaj nagłówków w kolejności i testuj na różnych urządzeniach.
Nie sprawdzasz swojego kodu
Napisane – działa – git? No nie do końca.
Czemu warto walidować kod?
Bo coś może „działać” w jednej przeglądarce, a w innej już nie. I czasem nawet nie zauważysz, że masz błędy.
✅ Rozwiązanie:
Użyj bezpłatnego walidatora:
👉 https://validator.w3.org
Podsumowanie
HTML to pierwszy krok do tworzenia własnych stron – i naprawdę warto ten krok wykonać porządnie. Popełnianie błędów to część nauki, ale dobrze wiedzieć, czego unikać na starcie.
🔁 Pamiętaj:
Zawsze zaczynaj od
<!DOCTYPE html>Zamykaj tagi
Używaj semantycznych znaczników
Dbaj o dostępność
I… sprawdzaj swój kod!
Masz pytania albo inne błędy, które widzisz często u siebie lub innych? Daj znać w komentarzu – chętnie uzupełnię listę!