Úvod » Semantyczny HTML w praktyce: jak dobierać znaczniki do struktury
Semantyczny HTML w praktyce: jak dobierać znaczniki do struktury
Semantyczny HTML to nie kwestia estetyki kodu, lecz poprawnego opisania struktury dokumentu. Przeglądarki i roboty indeksujące czytają znaczniki, a nie klasy CSS. Jeśli całą treść wstawisz do
, otrzymasz jeden wielki worek bez hierarchii. Właściwy dobór znaczników wynika z tego, co dany fragment faktycznie reprezentuje, a nie z tego, jak ma wyglądać. Nagłówek sekcji to
, lista kroków to
, a niezależny wpis to
. Zanim sięgniesz po
, zadaj sobie pytanie, czy żaden istniejący element nie opisuje tej treści lepiej.
Najwięcej wątpliwości budzi rozróżnienie między pojemnikami na treść. Wiele osób miesza je z powodu podobnej roli wizualnej, choć semantycznie pełnią inne funkcje. Jeśli chcesz zrozumieć, kiedy stosować który element, przeczytaj wyjaśnienie różnic między article i section — to pozwala uniknąć błędów przy budowie szkieletu strony.
opisuje samodzielną całość, którą można przenieść w inne miejsce bez utraty sensu.
grupuje treść tematycznie, ale zwykle nie jest niezależna. Nagłówek w obu przypadkach nie jest ozdobą, lecz warunkiem sensownego podziału.
Praktyka sprowadza się do kilku decyzji podejmowanych na bieżąco. Nawigację zamykaj w