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

Wyszukiwanie i naprawianie „bugów” w kodzie to w pracy programisty chleb powszedni. Dzisiejszym wpisem wracamy do tematu błędów w  HTML-u. Co stanowi ich źródło? Jakie są główne rodzaje błędów? O tym przeczytasz w pierwszej części artykułu. W tym wpisie skupię się na poprawnej strukturze i składni kodu. Do dzieła!

Struktura HTML5

Minimalna wersja dokumentu HTML w wersji 5 wygląda tak jak poniżej. Zaczynamy od DTD, czyli Document Type Definition. Następnie mamy korzeń dokumentu <html>, w którym znajdziemy nagłówek strony <head> oraz jego treść. W nagłówku znajdziemy informacje o stronie. W naszym przypadku jest to kodowanie, które również było wspomniane w poprzednim wpisie oraz tytuł strony. Znacznik <body> to już zawartość strony, która jest widoczna w oknie przeglądarki.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5</title>
	</head>

	<body>
	</body>
</html>

Poprawna składnia i wcięcia

Tworząc kod powinnyśmy zadbać o jego czytelność (kultura pisania kodu) – odpowiednie wcięcia to pierwszy krok do sukcesu. Chociaż ich brak nie jest błędem to dużo łatwiej jest dzięki nim znaleźć niezamknięty znacznik.
Kod bez wcięć:

<!DOCTYPE HTML>
<html>
<head><meta charset=”UTF-8" /><title>HTML5</title></head>
<body>
<nav>
<ul><li>menu 1<ul><li>menu 1.1</li></li></ul>
</nav>
</body>
</html>

Kod z wcięciami:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <nav>
            <ul>
                <li>menu 1
                    <ul>
                        <li>menu1.1</li>
                </li>
            </ul>

        </nav>
    </body>
</html>

 

Dopiero wcięcia pokazały nam, że brakuje domknięcia dla <ul>. Każde zagnieżdżenie powinno mieć dodatkowy odstęp (zazwyczaj używamy do tego klawisza tab). Każdy niedomknięty znacznik może powodować błędne wyświetlanie strony. W takim wypadku przeglądarka sama postara się uzupełnić lukę (nie zawsze tak jakbyśmy tego oczekiwali) i wyświetli w taki sposób jak będzie według niej najlepszy. Dlatego zawsze starajmy się wyeliminować tego typu błędy.

Aby obejrzeć aktualne drzewo DOM w przeglądarce Chrome wystarczy wcisnąć klawisz F12 i rozwinąć drzewo klikając w trójkąciki.

IDE to podstawa

Również nasz edytor (w moim przypadku Brackets) powinien nas powiadomić, że coś się nie zgadza w naszym kodzie HTML. U mnie edytor w miejscu, gdzie był błąd zakolorował kod na czerwono, co widać na obrazie poniżej.

To dla nas kolejny sygnał, że coś może być nie tak z naszym kodem HTML.
Jak widać edytor nie tylko podpowiada nam składnię języka, ale również za pomocą kolorów może nas informować o błędach i poprawiać czytelność kodu.

To dwie niezbędne funkcje, które nasze IDE udostępnia. Dlatego też Windows-owy notatnik nie jest dobrym pomysłem!

Validator

Aby sprawdzić poprawność struktury i składni naszego dokumentu HTML, możemy użyć programu, który to sprawdzi. Jest to tzw. validator. To bardzo przydatne narzędzie, ponieważ nie jesteśmy w stanie zapamiętać wszystkich zapisów ze specyfikacji technicznej. Od razu możemy sprawdzić czy napisaliśmy kod poprawnie.

Wystarczy przejść do strony validator.w3.org i przesłać nasz kod za pomocą jednej z zakładek tj. przez adres URL, załadowanie pliku lub przesłanie kodu HTML w polu textarea.

Przygotowałem prosty kod strony, który niekoniecznie musi być poprawny. Nie widać tego na pierwszy rzut oka.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <nav>
            <ul>
                <li>menu 1
                    <ul>
                        <li>menu1.1</li>
                        
                </li>
            </ul>
        </nav>
        <article>
            <img rsc="img.png">
            
            <p> Lorem ipsum <strong>lorem lorem</p></strong>
        </article>

 

Po wrzuceniu go do validatora otrzymałem poniższe błędy:

  1. Brak znacznika <title>, który jest wymagany.
  2. Napotkanie znacznika </li>, który nie powinien się tam znajdować (bo brakuje </ul>).
  3. Podobny problem ze znacznikiem zamykającym </nav> (brak znacznika otwierającego <nav>).
  4. Informacja o niezamkniętym <ul>.
  5. Informacja o błędnym atrybucie rsc – przestawione literki.
  6. Brak atrybutu src dla <img>.
  7. Znacznik <img> nie posiada atrybutu alt=””, który jest wymagany.
  8. Nieprawidłowe zagnieżdżenie – najpierw powinien być zamknięty </strong>, potem </p>.
  9. Ten sam problem tj. brak zamknięcia znacznika <strong>, ponieważ znajduje się on w złym miejscu.
  10. Znacznik </strong> jest w złym miejscu.
  11. Ostrzeżenie o braku nagłówka w elemencie <article>.

Jak wydać validator wskazał nam wszystkie błędy. To narzędzie bardzo pomaga w budowaniu prawidłowego kodu HTML naszej strony.

Po naniesieniu poprawek możemy cieszyć się bezbłędnym kodem HTML!

Pamiętaj, że zgodność ze standardem nie zawsze pozwala prawidłowo wyświetlić stronę. Dodatkowo nie zawsze musimy trzymać się sztywno standardu. Czasami musimy od niego odjeść, aby zrealizować pewną funkcjonalność lub zgodność z różnymi przeglądarkami. Nawet strona wyszukiwarki Google nie przechodzi testu bezbłędnie. Po prostu nie powinniśmy popadać w skrajności.

Semantyka

Czym jest semantyka? Słownik PWN wspomina o relacjach między wyrażeniem językowym, a przedmiotem. Podobnie jest w języku HTML. Semantyka dotyczy odniesienia między zapisanym znacznikiem, a jego faktycznym znaczeniem. Możemy to intepretować jako znaczenie danego elementu. Przykłady:

  • Jeśli używam znacznika <nav> w HTML5 oznacza to, że wewnątrz jest umiejscowiona nawigacja. Czyli oprogramowanie, które interpretuje kod HTML wie, że w tym miejscu znajdzie odnośniki do pozostałych działów serwisu.
  • Jeśli użyjemy znacznika <article> to wiadomo, że w tym miejscu znajdzie się główna treść naszej witryny.
  • Jeśli użyjemy <strong> to wiadomo, że treść znajdująca się wewnątrz jest bardzo istotna w przeciwieństwie do <b>, który odpowiada jedynie za cześć prezentacyjną (pogrubienie) i nie ma „wartości” semantycznej. Z tego też powodu czytniki ekranu, nie zwrócą uwagi na znacznik <b>.

Semantyka jest bardzo ważna podczas pracy nad dostępnością strony internetowej (ang. accessibility) czy przy pozycjonowaniu. Jest to obszerny temat, który na pewno jeszcze opiszemy na naszym blogu.

Site Footer

Sliding Sidebar