Elementy semantyczne porządkują treść

Współczesny HTML oferuje znaczniki takie jak

To podejście nazywa się semantycznym HTML-em. Ułatwia pracę wyszukiwarkom, narzędziom automatycznym i osobom z ograniczeniami wzroku. Z mojego doświadczenia wynika, że dobrze dobrane elementy semantyczne oszczędzają później sporo pracy, szczególnie przy rozbudowanych serwisach.

HTML, CSS i JavaScript mają różne zadania

Jednym z częstszych nieporozumień jest traktowanie HTML jako technologii odpowiedzialnej za cały wygląd strony. W rzeczywistości każda z trzech podstawowych technologii webowych pełni inną funkcję.

Można więc przygotować poprawny HTML, który będzie działał bez CSS, choć jego wygląd okaże się bardzo prosty. Można też dodać CSS bez JavaScriptu, uzyskując estetyczną stronę z podstawową interakcją. HTML jest fundamentem, ale sam nie zastępuje pozostałych warstw aplikacji.

To rozdzielenie ma praktyczne konsekwencje. Jeśli przycisk nie reaguje na kliknięcie, problemu nie szukam w HTML-u, lecz w logice JavaScriptu. Jeśli formularz wygląda nieczytelnie na telefonie, sprawdzam CSS. Dzięki takiemu podziałowi łatwiej diagnozować błędy zamiast poprawiać przypadkowe fragmenty kodu.

Dlaczego semantyka i dostępność mają znaczenie

Poprawny kod nie polega wyłącznie na tym, że strona otwiera się w przeglądarce. Liczy się także to, czy użytkownik może zrozumieć jej strukturę, korzystać z niej klawiaturą i odczytać zawartość przy pomocy technologii asystujących.

Dobrym przykładem jest hierarchia nagłówków.

Podobnie działa tekst alternatywny dla obrazów. Opis powinien przekazywać sens zdjęcia, jeśli jest ono informacyjne. Przy grafice dekoracyjnej można zastosować pusty atrybut alt="", aby czytnik ekranu nie odczytywał zbędnego komunikatu. Brak opisu albo opis typu „obrazek123” zwykle nie pomaga nikomu.

Znaczenie ma również budowa formularzy. Pole tekstowe powinno mieć powiązaną etykietę , a przycisk powinien jasno komunikować swoją funkcję. Takie drobiazgi wpływają na wygodę użytkowników bardziej niż efektowne animacje, które często przyciągają uwagę dopiero na etapie projektowania.

Jak zacząć naukę i uniknąć typowych błędów

Do pierwszych ćwiczeń wystarczy dowolny edytor kodu oraz przeglądarka. Tworzę plik z rozszerzeniem .html, zapisuję go na komputerze i otwieram dwuklikiem. Zmiany można sprawdzać po odświeżeniu strony, bez konfiguracji serwera czy instalowania rozbudowanego środowiska.

Na początku najlepiej zbudować prostą stronę o jednym konkretnym temacie. Powinna zawierać tytuł, kilka nagłówków, akapity, listę, obraz z opisem i link. Taki mały projekt pokazuje więcej niż samo przepisywanie kilkudziesięciu znaczników z kursu.

Przeczytaj również: Jak zrobić ruchomy tekst w HTML - proste sposoby na animację tekstu

Błędy, które spowalniają naukę

• Używanie
do tworzenia odstępów zamiast stylowania ich w CSS.
• Wstawianie wielu elementów
  tam, gdzie lepsze będą znaczniki semantyczne.
• Pomijanie atrybutu alt przy obrazach informacyjnych.
• Nieprawidłowe zamykanie i zagnieżdżanie znaczników.
• Traktowanie nagłówków jako sposobu na powiększanie tekstu.
• Budowanie całej strony wyłącznie pod wygląd desktopowy.

Nie przejmowałbym się na starcie zapamiętaniem każdego dostępnego elementu. Znacznie ważniejsze jest rozumienie, jak opisywać znaczenie treści i jak dzielić dokument na logiczne części. Resztę można sprawdzać w dokumentacji, podobnie jak programiści sprawdzają składnię rzadziej używanych funkcji.

Od pierwszego pliku do świadomego kodowania

HTML jest łatwy do rozpoczęcia, ale trudniej nauczyć się używać go konsekwentnie. Najlepszy efekt daje łączenie krótkiej teorii z małymi projektami, w których od razu widać wpływ struktury na czytelność, dostępność i późniejsze stylowanie.

Jeżeli mam wskazać jedną zasadę, która procentuje najbardziej, brzmi ona tak: najpierw opisuj treść zgodnie z jej znaczeniem, a dopiero potem zajmuj się wyglądem. Dzięki temu strona będzie bardziej zrozumiała dla ludzi, przeglądarek, wyszukiwarek i narzędzi wspierających, a dalsza praca z CSS oraz JavaScriptem stanie się wyraźnie prostsza.