Przez lata budowaliśmy strony na divach. Każdy blok miał swój identyfikator lub klasę, a przeglądarka nie miała pojęcia, czy dany fragment to nawigacja, artykuł czy stopka. HTML5 to zmienił, wprowadzając zestaw znaczników, które opisują rolę treści, a nie tylko jej wygląd. Dzięki nim kod staje się czytelniejszy dla ludzi i maszyn, a wyszukiwarki oraz czytniki ekranu lepiej rozumieją układ dokumentu.

Podstawowe znaczniki semantyczne to header, nav, main, article, section, aside i footer. Każdy z nich ma określone zastosowanie. header otwiera stronę lub sekcję, nav grupuje linki nawigacyjne, main zawiera główną treść unikalną dla danej podstrony, a aside mieści treści poboczne, takie jak reklamy czy powiązane linki. footer zamyka całość lub pojedynczy blok. Jeśli zastanawiasz się, jak rozróżnić artykuł od sekcji i kiedy którego użyć, przeczytaj wyjaśnienie article i section, które rozwiewa najczęstsze wątpliwości. W praktyce article sprawdza się przy wpisach blogowych, newsach czy komentarzach, a section grupuje tematycznie powiązane fragmenty wewnątrz większej całości.

Stosowanie tych znaczników nie oznacza, że divy znikają całkowicie. Nadal są potrzebne jako uniwersalne pojemniki do stylowania czy układania elementów w siatce. Różnica polega na tym, że div przestaje być domyślnym wyborem, a staje się narzędziem ostatniej szansy. Zamiast owijać każdą sekcję w kolejne warstwy divów, sięgamy po znacznik, który od razu komunikuje intencję. Dzięki temu struktura dokumentu jest płytsza, a liczba klas i identyfikatorów maleje.

Warto też pamiętać o poprawnym zagnieżdżaniu. main powinien występować tylko raz na stronę, article może zawierać własny header i footer, a section nie powinien być używany wyłącznie jako opakowanie dla stylów. Semantyczny HTML to nie rewolucja, ale świadoma decyzja przy każdym nowym projekcie. Im wcześniej wprowadzisz te nawyki, tym łatwiej utrzymasz kod i tym lepiej wypadnie on w testach dostępności oraz SEO.