4 powody, dla których border-box kończy wojnę z szerokością

Kolejny problem to zagnieżdżanie section bez przemyślenia hierarchii. Każdy poziom powinien mieć własny nagłówek, a numeracja h2, h3 i h4 musi odzwierciedlać strukturę. Gdy wrzucisz trzy section pod rząd bez nagłówków, czytnik ekranu odczyta je jako puste regiony, a algorytm może uznać, że treść jest nieuporządkowana. Warto sprawdzić stronę w narzędziu do walidacji HTML i w podglądzie drzewa dostępności.

Jak procenty współpracują z gap i paddingi

Praktyczna zasada jest jedna i skuteczna. Najpierw zaplanuj całość, potem zdecyduj, gdzie postawić granice. Wypisz punkty, które chcesz przekazać, a następnie pogrupuj je w bloki, które da się opisać jednym zdaniem. Jeśli bloków jest dwa lub trzy i każdy zamyka się w rozsądnej objętości, napisz osobne, samodzielne artykuły i połącz je odnośnikami. Jeśli bloków jest więcej i wynikają z siebie logicznie, zrób jeden większy materiał podzielony na sekcje. Granica między tymi rozwiązaniami nie jest sztywna — ważne, żeby czytelnik zawsze wiedział, gdzie jest i co dalej.

Link do sekcji na tej samej stronie działa tylko wtedy, gdy dwa elementy mówią o tym samym: atrybut id celu i część adresu po znaku #. Jeśli nazwy się rozjeżdżają choćby o jedną literę, przeglądarka nie przewinie widoku i najczęściej nie pokaże żadnego błędu. Dlatego zamiast zgadywać, wypisz sobie najpierw wszystkie sekcje, do których chcesz skakać, i nadaj im krótkie, jednoznaczne identyfikatory.

Elementy article i section wyglądają podobnie w kodzie, ale mają różne zadania. Article opisuje samodzielną całość, którą można wyjąć z kontekstu i opublikować gdzie indziej bez utraty sensu. Section to tematyczny fragment większej całości, który bez kontekstu traci znaczenie. Jeśli zamieniasz je bezrefleksyjnie, roboty wyszukiwarek i czytniki ekranu dostają mylące informacje o strukturze treści.

Pamiętaj też o artykułach zagnieżdżonych. Komentarz pod wpisem może być osobnym article wewnątrz article nadrzędnego. To poprawne, ale wymaga ostrożności: każdy taki element powinien mieć nagłówek opisujący jego rolę. Bez tego powstaje struktura, w której nie wiadomo, gdzie kończy się wypowiedź autora, a zaczyna odpowiedź czytelnika.

Jak to działa w praktyce Po ustawieniu box-sizing: border-box szerokość treści kurczy się, gdy dodajesz padding. Element nadal ma zadeklarowane 300px, ale jego zawartość dostosowuje się do mniejszej przestrzeni. Dzięki temu obliczenia są przewidywalne: nie musisz odejmować paddingu ani obramowania w głowie. To szczególnie ważne przy układach opartych na procentach, gdzie każdy dodatkowy piksel psuje siatkę. Warto pamiętać, że border-box nie zmienia marginesów – one nadal dodają się poza szerokością elementu.

Przy wielu polach zadbaj o czytelny układ i grupowanie. Znacznik z pomaga oddzielić sekcje, np. dane kontaktowe od adresu. Nie mieszaj zbyt wielu typów pól w jednym miejscu, bo łatwo pominąć wymagane dane. Wartości domyślne ustawiaj przez value, a pole wyboru przez checked. Na koniec sprawdź całość w przeglądarce: wypełnij formularz, wyślij go i zajrzyj w narzędzia deweloperskie, żeby zobaczyć, jakie dokładnie dane opuściły stronę. To najszybszy sposób wyłapania brakujących atrybutów name i złego method.

Kolejny typowy błąd to mieszanie modeli. Jeśli w jednym miejscu używasz content-box, a w innym border-box, obliczenia przestają być spójne. Debugowanie staje się koszmarem, bo nie wiesz, który element jak liczy szerokość. Trzymaj się jednego modelu w całym projekcie. W nowoczesnych przeglądarkach border-box jest domyślnie stosowany w niektórych frameworkach, ale nie zakładaj tego bez sprawdzenia.

Uważaj też na stałe nagłówki przyklejone do góry ekranu. Gdy taki pasek zasłania początek sekcji, ustaw na celu scroll-margin-top o wartości równej wysokości nagłówka. To jedno pole w CSS załatwia problem, który ludzie często próbują obejść pustymi elementami rozpychającymi układ. Warto również zadbać o widoczny stan fokusu po skoku — dla użytkowników nawigujących klawiaturą sam brak wskaźnika bywa mylący.

Najprostszy test przed wdrożeniem: wyobraź sobie, że wycinasz dany fragment i wklejasz na inną stronę. Jeśli nadal jest zrozumiały, użyj article. Jeśli potrzebuje sąsiednich treści, wybierz section. Gdy nie spełnia żadnego z tych warunków, pozostań przy div. Ta jedna decyzja poprawia dostępność, porządkuje nagłówki i zmniejsza ryzyko, że wyszukiwarka błędnie zinterpretuje Twoją treść.

Gdzie najczęściej popełnia się błąd Pierwszy typowy błąd to opakowywanie w article każdego bloku z nagłówkiem. Wtedy strona główna bloga wygląda dla robota jak zbiór niezależnych publikacji, choć to tylko lista zapowiedzi. Drugi błąd to używanie section jako uniwersalnego pojemnika na wszystko. Jeśli fragment nie ma własnego nagłówka i nie tworzy spójnego tematu, lepszym wyborem będzie zwykły div — nie wprowadza bowiem sztucznej semantyki.