Struktura dokumentu HTML to nie kwestia estetyki kodu, ale realnego wpływu na to, jak ze strony korzystają ludzie i maszyny. Czytniki ekranu, wyszukiwarki i narzędzia do analizy treści opierają się na hierarchii nagłówków oraz na tym, czy poszczególne fragmenty zostały zamknięte w elementach opisujących ich rolę. Jeśli całą treść wrzucisz do jednego kontenera div i poustawiasz nagłówki tylko po to, żeby coś było większe, odbierasz odbiorcom kontekst. Nagłówek h1 powinien występować raz i opisywać główny temat strony, a kolejne poziomy od h2 w dół mają budować logiczne zagnieżdżenie. Nie przeskakuj z h2 na h4 tylko dlatego, że tak wygląda wizualnie – od wyglądu jest CSS.

Sekcje i artykuły to dwa pojemniki, które najczęściej myli się w praktyce. Element section grupuje treść tematycznie powiązaną, ale nie musi być samodzielną całością – często jest częścią większej układanki, na przykład rozdziałem w ramach jednej strony. Element article z kolei powinien mieć sens także po przeniesieniu w inne miejsce: wpis na blogu, komentarz, karta produktu czy notka prasowa. Jeśli zastanawiasz się, jak rozróżnić te dwa przypadki w konkretnym projekcie, warto przeczytać wyjaśnienie o tym, czym się różnią article i section, bo od tej decyzji zależy późniejsza nawigacja po stronie. Każdy z tych elementów powinien mieć dostępną nazwę – najczęściej przez nagłówek wewnątrz lub atrybut aria-labelledby.

Oprócz samych kontenerów liczy się kolejność i relacje między nimi. Nawigacja należy do elementu nav, stopka do footer, a główna treść do main – i tylko jedna taka sekcja na stronie. Linki prowadzące do innych widoków nie powinny być buttonami, a przyciski wywołujące akcję nie powinny być linkami. Listy wrzucaj do ul lub ol, a nie do divów z gwiazdkami. Tabele danych buduj z thead, tbody i th z atrybutem scope. Takie podejście nie jest przesadą – to warunek, żeby strona działała przewidywalnie dla technologii asystujących.

Dobra struktura pomaga też w utrzymaniu projektu. Gdy sekcje mają nazwy zgodne z ich zawartością, łatwiej je przenosić, testować i stylować. Zamiast zastanawiać się, czym jest kolejny div z klasą box-3, od razu wiadomo, że to sekcja z opiniami klientów albo artykuł promocyjny. Warto więc zacząć od mapy treści: wypisz główne bloki strony, zdecyduj, które z nich są samodzielne, a które stanowią część większej całości, i dopiero potem sięgaj po HTML. Taka kolejność oszczędza czas i redukuje liczbę poprawek dostępności w późniejszych etapach.