Model pudełkowy, który rozjeżdża każdy layout
Gdy plik rośnie, trzymanie porządku w tych trzech częściach oszczędza czasu. Zmiany w head dotyczą całej strony, więc jeden błąd w kodowaniu psuje wszystkie polskie znaki. Zmiany w body są lokalne i łatwiej je cofnąć. Świadome rozdzielanie instrukcji od treści to nie formalność, tylko warunek, że przeglądarka pokaże dokładnie to, co zaplanowałeś.<br>
<br>
<br>
<br>
Pierwszy plik HTML wygląda na prosty, dopóki przeglądarka nie zacznie zgadywać, co właściwie jej przekazałeś. Deklaracja typu dokumentu musi znaleźć się w pierwszej linii i mieć postać . To nie znacznik, nie ma zamknięcia i nie wpływa na wygląd strony, ale bez niego przeglądarka wchodzi w tryb quirks, w którym szerokości, odstępy i część właściwości CSS liczą się inaczej. Objawia się to na przykład znikającym marginesem wokół treści albo innym działaniem box-sizing. Częsty błąd to wpisanie starego, długiego doctype’u XHTML albo dopisanie przed nim komentarza lub deklaracji XML — wtedy deklaracja przestaje być pierwsza i część przeglądarek ją ignoruje.<br>
<br>
<br>
<br>
Podsumowując: article to samodzielna jednostka treści, section to tematyczny fragment większej całości. Stosuj je zgodnie z przeznaczeniem, a unikniesz problemów z semantyką i dostępnością. Pamiętaj, że div nadal jest przydatny, gdy potrzebujesz zwykłego pojemnika bez znaczenia semantycznego.<br>
<br>
<br>
<br>
Rodzaj ogólny nie zastępuje testów. Warto sprawdzić stronę z wyłączonymi fontami lokalnymi albo w trybie prywatnym, żeby zobaczyć, jak wygląda fallback. Pomaga też narzędzie deweloperskie w przeglądarce: pokaże, który krój został faktycznie zastosowany. W miarę możliwości wybieraj rodzaj ogólny zgodny z charakterem projektu. Dla tekstu ciągłego sprawdzi się serif lub sans-serif, dla kodu monospace, a cursive i fantasy traktuj jako ozdobniki, nie jako podstawę czytelnego interfejsu.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: sztywną szerokość stosuj do elementów, które naprawdę mają stały wymiar — ikon, awatarów, wąskich paneli. Do elastycznych kolumn używaj flex-basis i flex-grow, a flex-shrink traktuj jako narzędzie do kontroli zachowania w niedoborze miejsca, nie do naprawiania błędów w strukturze. Zanim dodasz kolejne width z konkretną wartością, sprawdź układ na wąskim ekranie i przy powiększonym tekście. Właśnie tam najczęściej wychodzi różnica między pozorną sztywnością a rzeczywistym zachowaniem flexboxa.<br>
<br>
<br>
<br>
Praktyczna zasada: każde article powinno mieć własny nagłówek (np. h1–h6). section również wymaga nagłówka, chyba że jest to sekcja czysto pomocnicza. Bez nagłówka tracisz dostępność i czytelność dla robotów wyszukiwarek. Pamiętaj, że section nie może być pusty — jeśli nie masz dla niego nagłówka, użyj div.<br>
<br>
<br>
<br>
Jak to włączyć globalnie i nie zepsuć sobie formularzy Najprościej objąć cały dokument regułą, która dla wszystkich elementów ustawia box-sizing na border-box, a dla pseudoelementów dziedziczy tę samą wartość. Taki zapis na początku arkusza rozwiązuje większość problemów raz na zawsze. Uwaga na komponenty z zewnątrz, na przykład osadzone odtwarzacze albo gotowe widżety: jeśli ich wewnętrzne style zakładają content-box, globalna zmiana potrwa ich wymiary. Wtedy przywróć im starą wartość punktowo.<br>
<br>
<br>
<br>
Aby ustawić element względem konkretnego kontenera, nadaj temu kontenerowi position: relative. Relative nie zmienia położenia samego kontenera, ale tworzy układ odniesienia dla potomków z absolute. Od tego momentu wartości top, right, bottom i left dla absolutnego potomka liczą się od krawędzi padding boxu kontenera, nie od jego marginesów. Warto o tym pamiętać, gdy element ma wyrównać się do wewnętrznej krawędzi ramki, a nie do zewnętrznej.<br>
<br>
<br>
<br>
Element body obejmuje wszystko, co użytkownik widzi: nagłówki, akapity, listy, obrazy, formularze. Przeglądarka potrafi sama domknąć brakujące znaczniki i wstawić brakujące elementy, więc strona z błędem może wyglądać poprawnie, choć jej struktura jest inna, niż napisałeś. Dlatego warto sprawdzać gotowy dokument w narzędziach deweloperskich i patrzeć, czy drzewo elementów zgadza się z plikiem. Jeśli treść wyląduje w head zamiast w body, przeglądarka przeniesie ją na początek ciała dokumentu — to wygodne, ale utrudnia późniejsze poprawki.<br>
<br>
<br>
<br>
Szkielet warto zapisywać w stałej kolejności: deklaracja typu, html z atrybutem języka, head z kodowaniem i tytułem, potem body. Atrybut lang="pl" pomaga czytnikom ekranu i translatorom. Nie wstawiaj do head elementów widocznych, nie zamykaj body przed końcem treści i nie mieszaj dwóch deklaracji typu. Nazwy pliku nie muszą być skomplikowane — wystarczy index.html zapisany w tym samym katalogu co arkusz stylów, a odwołanie w head powinno być względne.<br>
<br>
<br>
<br>
Typowy błąd to wpisanie samego rodzaju ogólnego, np. font-family: sans-serif. Działa, ale oddaje kontrolę nad wyglądem systemowi. Efekt bywa nieprzewidywalny: na jednym komputerze tekst będzie wąski, na innym szeroki. Drugi częsty błąd to umieszczenie rodzaju ogólnego na początku listy — wtedy reszta nazw nigdy nie zostanie użyta, bo pierwszy pasujący element zawsze wygrywa. Trzeci błąd to mieszanie kategorii: obok siebie „Times New Roman" i sans-serif. Jeśli pierwszy font zawiedzie, tekst przeskoczy z szeryfowego na bezszeryfowy, co psuje rytm układu.