Header i nav czy main i footer — co naprawdę opisuje układ strony
Zacznij od main. To najważniejszy element całej struktury, bo wskazuje unikalną treść danej podstrony. Na jednej stronie może wystąpić tylko raz i nie powinien zawierać się w header, footer ani nav. Wszystko, co powtarza się na każdej podstronie — logo, menu, stopka — zostaje poza nim. Typowy błąd polega na tym, że ktoś wrzuca do main pasek boczny z reklamami albo zostawia go pustego, a treść wkleja do zwykłego div. Efekt jest taki, że czytnik ekranu nie ma czego pominąć, więc użytkownik przekopuje się przez nawigację przy każdym wejściu.<br>
<br>
<br>
<br>
Jeśli zależy ci na wyrównaniu do górnej krawędzi, ale w kontenerze jest jeszcze tekst, użyj vertical-align: top na elementach inline-block. Uwaga na marginesy i paddingi — przeglądarka liczy górną krawędź wraz z obramowaniem, więc różne box-sizing mogą dawać złudzenie, że coś jest nie tak. Warto ustawić globalnie box-sizing: border-box, aby uniknąć rozjazdów.<br>
<br>
<br>
<br>
Kolejność ma znaczenie, ale tylko przy remisie Wyobraź sobie reguły: `p.lead color: blue ` oraz `p color: red `. Pierwsza ma wagę 11 (element plus klasa), druga tylko 1. Kolor będzie niebieski, mimo że `p color: red ` stoi niżej w pliku. Odwrotna sytuacja: `p.lead color: blue ` i `p.lead color: red `. Obie mają tę samą specyficzność, więc wygrywa ta zapisana później — kolor będzie czerwony. To najczęstsza pułapka przy pracy z gotowymi bibliotekami stylów: twoja reguła może mieć identyczną wagę co reguła z zewnętrznego pliku, a o wyniku decyduje kolejność dołączania arkuszy.<br>
<br>
<br>
<br>
Kiedy for jest lepszym rozwiązaniem Wariant z atrybutem for wymaga dwóch rzeczy: pole musi mieć unikalny identyfikator, a label musi wskazywać go w for. Taki zapis jest bardziej elastyczny, bo etykieta nie musi leżeć bezpośrednio przy polu. Można ją umieścić w innej kolumnie, w osobnym kontenerze, a nawet poza głównym blokiem formularza. To standard w układach tabelarycznych i wtedy, gdy etykieta jest generowana z szablonu. Kliknięcie w taką etykietę również przenosi fokus do pola, o ile identyfikator się zgadza.<br>
<br>
<br>
<br>
Otulenie bywa wygodniejsze w formularzach o prostym układzie, na przykład przy pojedynczym polu tekstowym z opisem. Łatwiej wtedy utrzymać spójny odstęp i uniknąć błędów w identyfikatorach. Uwaga jednak na sytuację, gdy wewnątrz label znajdzie się link lub przycisk — kliknięcie w niego może wywołać jednocześnie akcję linku i przeniesienie fokusu do pola, co bywa mylące. Przy polach wyboru i przyciskach opcji otulenie całej grupy jednym labelem jest błędem: etykieta powinna opisywać pojedynczą opcję, a nie całą grupę.<br>
<br>
<br>
<br>
Najbezpieczniejsza zasada jest prosta: dla pól wyboru i przycisków opcji używaj for z osobnym id dla każdej opcji, a dla pól tekstowych wybierz metodę, która daje ci stabilniejszy kod. Po wdrożeniu sprawdź formularz klikając w każdą etykietę i przechodząc po polach klawiszem Tab. Jeśli fokus trafia tam, gdzie powinien, a stany pól wyboru zmieniają się zgodnie z oczekiwaniem, etykiety są powiązane poprawnie.<br>
<br>
<br>
<br>
Elementy inline-block domyślnie wyrównują się do linii bazowej, co często powoduje nieprzewidywalne przesunięcia w pionie. Linia bazowa to umowna linia, na której „siedzą" litery — nie dolna krawędź elementu, lecz miejsce, gdzie kończą się znaki bez zejścia poniżej (np. „a", „c"). Gdy obok siebie stoją elementy o różnej wysokości i różnym kontekście, ich linie bazowe potrafią się rozjechać. Efekt: jeden blok „ucieka" w górę, drugi w dół, a layout wygląda na zepsuty.<br>
<br>
<br>
<br>
Znaczniki header, main, footer i nav to elementy semantyczne HTML5, które opisują rolę fragmentu strony, a nie jego wygląd. Przeglądarka domyślnie wyświetla je jak zwykłe bloki, więc bez CSS nic się wizualnie nie zmieni. Ich wartość leży gdzie indziej: czytniki ekranu, roboty wyszukiwarek i inne narzędzia rozpoznają po nich, gdzie zaczyna się treść właściwa, gdzie nawigacja, a gdzie informacje dodatkowe. Jeśli budujesz layout wyłącznie na div z klasami, działasz poprawnie, ale pozbawiasz dokument warstwy znaczeniowej.<br>
<br>
<br>
<br>
Praktyczna zasada: flex-grow ustawiaj na 0 dla elementów, które mają trzymać swój rozmiar, a na 1 lub więcej dla tych, które mają wypełniać resztę. Jeśli chcesz, żeby jeden element zajmował całą wolną przestrzeń, a reszta tylko swoje, daj mu flex-grow: 1, a pozostałym 0. Gdy potrzebujesz równych kolumn, użyj flex: 1 1 0 na wszystkich — to ustawia jednakową bazę i sprawia, że proporcje zależą wyłącznie od flex-grow. Bez tego elementy z dłuższą treścią mogą wyglądać na szersze, mimo identycznych współczynników.<br>
<br>
<br>
<br>
Kiedy for, a kiedy otulenie Atrybut for stosuje się wtedy, gdy etykieta i pole są osobnymi elementami w kodzie. Wartość for musi być identyczna z wartością id pola. To najczęstszy błąd: literówka w id albo for sprawia, że powiązanie nie działa, choć wygląd pozostaje bez zmian. Drugi typowy problem to duplikat id w dokumencie — przeglądarka powiąże etykietę tylko z pierwszym wystąpieniem, a reszta pól zostanie bez etykiety. Warto też pamiętać, że id nie może zawierać spacji ani zaczynać się od cyfry.