Najczęstsze błędy w kodzie HTML popełniane zarówno przez początkujących, jak i bardziej zaawansowanych twórców stron, prowadzą nie tylko do nieprawidłowego wyświetlania treści, ale również mogą wpływać na dostępność, SEO, a nawet bezpieczeństwo witryny. Poniżej znajduje się szczegółowy poradnik omawiający najpopularniejsze z nich wraz z przykładami i poprawnymi zastosowaniami.
Niepoprawne zagnieżdżanie tagów
Błąd polega na niewłaściwym zamykaniu znaczników HTML. Każdy otwarty tag powinien być zamknięty w odwrotnej kolejności do tej, w której został otwarty.
Przykład błędnego kodu:
<p> Tekst <strong>ważny <em>i pochylony</strong></em> </p> Wyjaśnienie: Tu tag <strong> jest zamknięty przed <em>, co powoduje nieprawidłową strukturę.
Poprawny kod:
<p> Tekst <strong>ważny <em>i pochylony</em></strong> </p> Każdy tag otwiera się i zamyka w tej samej kolejności, co zapewnia prawidłową budowę dokumentu.
Brak zamykania tagów
Niektóre tagi w HTML wymagają jawnego zamknięcia, zwłaszcza w przypadku elementów blokowych.
Przykład błędnego kodu:
<p>To jest akapit <p>Kolejny akapit Skutkiem braku zamknięcia poprzedniego akapitu może być nieprzewidywalne wyświetlanie tekstu.
Poprawny kod:
<p>To jest akapit</p> <p>Kolejny akapit</p> Pominięcie deklaracji doctype
Deklaracja DOCTYPE informuje przeglądarkę, jak interpretować kod strony. Brak tej deklaracji może prowadzić do nieprawidłowego renderowania strony.
Przykład błędnego kodu:
<html> <head>...</head> <body>...</body> </html> Poprawny kod:
<!DOCTYPE html> <html> <head>...</head> <body>...</body> </html> Brak atrybutu lang w tagu <html>
Atrybut lang jest ważny dla przeglądarek, czytników ekranu i SEO, informując o języku dokumentu.
Przykład błędnego kodu:
<html> Poprawny kod:
<html lang="pl"> Nieuzupełnione lub niepoprawnie wypełnione atrybuty
Dotyczy to m.in. obrazów (src, alt), linków (href), skryptów (src).
Przykład błędnego kodu:
<img src="" alt=""> <a href=>Kliknij tutaj</a> Poprawny kod:
<img src="logo.png" alt="Logo firmy"> <a href="https://przyklad.pl">Kliknij tutaj</a> Błędna hierarchia nagłówków
Nagłówki HTML (<h1>, <h2> itd.) powinny odzwierciedlać logiczną strukturę treści strony. Często spotykany błąd to przeskakiwanie poziomów nagłówków.
Przykład błędnego kodu:
<h1>Temat główny</h1> <h4>Podsekcja</h4> Poprawny kod:
<h1>Temat główny</h1> <h2>Podsekcja</h2> Stosowanie przestarzałych lub niezalecanych tagów
Niektóre tagi, takie jak <font>, <center>, czy atrybuty typu bgcolor, są przestarzałe. Stylowanie należy realizować za pomocą CSS.
Błędny kod:
<center> <font color="red">Tekst</font> </center> Poprawny kod:
<p style="color: red; text-align: center;">Tekst</p> Brak elementów obowiązkowych w strukturze dokumentu
Pominięcie takich sekcji, jak <head>, <title> lub <body>, może prowadzić do problemów z SEO i użytecznością.
Poprawna struktura:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Nazwa strony</title> </head> <body> <!-- Treść strony --> </body> </html> Stosowanie wielu identyfikatorów (id) z tą samą nazwą
Identyfikator id powinien być unikalny dla każdego elementu na stronie.
Błędny kod:
<div id="sekcja">...</div> <div id="sekcja">...</div> Poprawny kod:
<div id="sekcja1">...</div> <div id="sekcja2">...</div> Niezastosowanie atrybutu alt dla obrazów
Atrybut alt opisuje obraz dla czytników ekranu i wyświetla się, gdy obraz nie zostanie załadowany.
Błędny kod:
<img src="zdjecie.jpg"> Poprawny kod:
<img src="zdjecie.jpg" alt="Opis zdjęcia"> Brak dostępności oraz zastosowania semantycznych tagów
Rezygnowanie z semantycznych znaczników, takich jak <header>, <nav>, <main>, <footer>, ogranicza dostępność strony i utrudnia interpretację kodu przez wyszukiwarki.
Błędny kod:
<div> <div>Nagłówek</div> <div>Menu</div> <div>Treść</div> <div>Stopka</div> </div> Poprawny kod:
<header>Nagłówek</header> <nav>Menu</nav> <main>Treść</main> <footer>Stopka</footer> Unikanie powyższych błędów znacząco poprawia jakość kodu HTML, pozytywnie wpływa na odbiór strony przez użytkowników oraz jej pozycjonowanie w wyszukiwarkach. Regularne stosowanie walidatorów HTML oraz testowanie strony w różnych przeglądarkach pozwala na wykrycie i skorygowanie większości z wymienionych problemów.
