Błędy w pisaniu kodu HTML i ich analiza cz.1

Dobrze napisany kod HTML rozwiązuje wiele problemów, które ciężko rozpoznać rozpoczynając przygodę z tworzeniem stron internetowych. Czasami nawet doświadczeni webmasterzy zapominają o najprostszych zasadach, które generują błędy. W tym wpisie pokażę Ci jak wyłapać właśnie te, które czasem łatwo przeoczyć.

Z czego tak naprawdę wynikają błędy w kodzie HTML?

Źródła błędów

Możemy wyróżnić 4 kryteria:

  • poprawność składni – odpowiednie otwieranie i zamykanie znaczników, odpowiednie używanie atrybutów itp.
  • poprawność struktury – odpowiednia budowa dokumentu np. <title> w <head>
  • semantyka kodu – wykorzystanie elementów HTML zgodnie z przeznaczeniem np. <table> do danych tabelarycznych, a nie budowania struktury strony
  • kultura pisania kodu – choć trudno to uznać za błąd, jednak bardzo mocno wpływa ona na jakość kodu HTML

Jako początkujący programista, skąd tak naprawdę masz wiedzieć jak ma wyglądać składnia, struktura czy semantyka?

Specyfikacja techniczna

To określa nam specyfikacja, która jest tworzona przez organizację W3C (World Wide Web Consortium), zajmująca się standaryzacją technologii związanych z WWW.
Technologia się zmienia, więc i standardy ulegają modyfikacji. Dla przykładu na stronach W3C możemy znaleźć specyfikację HTML 4, XHTML 1 czy aktualnie obowiązującego HTML 5.

Każda ze specyfikacji inaczej podchodzi do tematu składni, struktury i semantyki.

Przeglądarki i standardy

Pojawia się pytanie, jak w tym wszystkim odnajduje się przeglądarka internetowa, która musi interpretować zapisany kod HTML?

Zanim o tym napiszę, chciałbym Cię uczulić na fakt, że przeglądarka może, ale nie musi stosować się do specyfikacji. Obecnie trend jest taki, że każda przeglądarka stara się trzymać standardów, ponieważ tego oczekują webmasterzy, a i użytkownicy sieci są bardziej świadomi.
Jednak nadal istnieje wiele rozbieżności w implementacji standardów, co świetnie przedstawia serwis caniuse.com na swoich stronach.

Wracając jednak do interpretacji kodu przez przeglądarki…

Document Type Definition

DTD (ang. document type definition) czyli deklaracja typu dokumentu, która czasami jest również nazywana prologiem i określa nam jaki „standard” ma być brany pod uwagę podczas renderowania strony internetowej. Tu napotykamy pierwszy często popełniany błąd.
Pamiętaj:

  • DTD definiujemy zgodnie ze specyfikacją, którą wykorzystujemy przy pisaniu kodu HTML
  • DTD musi być zapisane jako pierwsza linia dokumentu

Poprawny DOCTYPE dla HTML5 wygląda tak:

<!DOCTYPE html>

Więcej definicji DTD znajdziesz na stronie w3schools.com

Kodowanie

Każdy plik jest zapisany w pewnym formacie, który w specyficzny dla siebie sposób zapisuje znaki narodowe np. „ą, ę, ń” itp. lub inne znaki specjalne. To powoduje, że przeglądarka też musi wiedzieć w jaki sposób odczytać te pliki.

Dlatego ten element jest niezbędny przy tworzeniu struktury kodu HTML, a w wersji 5 wygląda on tak:

<meta charset="UTF-8">

Powyższy kod oznacza, że nasz plik został zakodowany w „UTF-8”. Pamiętaj, że sama definicja nie jest jednoznaczna z tym, że faktycznie plik jest zakodowany tym sposobem.
Zazwyczaj edytory tzw. IDE domyślnie mają ustawione kodowanie UTF-8, jednak jeśli na stronie pojawiają się „krzaczki” to oznacza, że problem może leżeć po stronie kodowania pliku i trzeba zapisać plik w odpowiedniej formie.

UTF-8 BOM

Należy uważać na kodowanie UTF-8 z BOM, który dodaje niedrukowany (tj. niewidoczny znak) na początku pliku, co może powodować błędne interpretowanie DTD i złe renderowanie strony. Zawsze wybierajmy kodowanie UTF-8 bez BOM. Więcej informacji znajdziecie na ten temat na stronie W3C.

ISO 8859-2 (Latin 2)

ISO 8859-2 to kodowanie, które jeszcze jakiś czas temu było standardem dla polskojęzycznych stron, jednak obecnie jest nim UTF 8, głównie z tego powodu, że obsługuje więcej języków jednocześnie.

Jeśli chcemy zmienić kodowanie dla całej strony to nie wystarczy zmienić kodowania w źródle naszego kodu HTML, ale musimy również przekonwertować pliki na odpowiednie kodowanie.

To dopiero początek…

Prawdziwą kopalnią błędów okazuje się struktura i semantyka kodu. W kolejnej części omówimy przykładowe błędy i sprawdzimy jak je wyeliminować.

Site Footer

Sliding Sidebar