Gdy strona ma być czytelna dla ludzi i robotów, użyj tych znaczników
Najprostszy sposób na pewną zmianę to umieszczenie nowej reguły po tej, którą chcesz nadpisać, przy zachowaniu identycznego selektora. To działa, ale bywa kruche: wystarczy przenieść fragment kodu do innego pliku albo zmienić kolejność importów i efekt znika. Dlatego zamiast polegać wyłącznie na kolejności, lepiej zadbać o strukturę. Trzymaj reguły bazowe na początku, a modyfikacje i warianty później. Nie mieszaj przypadkowo stylów globalnych z lokalnymi, bo wtedy kaskada zaczyna działać na twoją niekorzyść.<br>
<br>
<br>
<br>
Zacznij od headera. To miejsce na logo, nazwę serwisu, czasem krótki opis i wyszukiwarkę. Ważne, żeby nie wrzucać tam całej nawigacji głównej, jeśli jest rozbudowana — od tego jest osobny znacznik nav. Header może występować także wewnątrz artykułu lub sekcji, jako nagłówek tej części. Jeśli używasz go kilka razy, pamiętaj, że tylko jeden header powinien dotyczyć całej strony, a pozostałe — konkretnych fragmentów treści.<br>
<br>
<br>
<br>
Na koniec praktyczna wskazówka: buduj tabelę od góry, wiersz po wierszu, i po każdym dopisaniu sprawdzaj sumę. Jeśli plan tygodnia ma się zmieniać, lepiej trzymać stałą liczbę kolumn i wypełniać je pustymi komórkami niż scalać na siłę. Scalanie jest wygodne wizualnie, ale każda zmiana liczby dni czy godzin wymusza przeliczenie wszystkich colspan i rowspan od nowa. Tabela, która raz się rozjedzie, rzadko wraca do ładu bez przepisania całej struktury.<br>
<br>
<br>
<br>
Flex-basis w procentach nie uwzględnia automatycznie odstępów. Jeśli ustawisz dwóm elementom flex: 0 0 50% i dodasz gap: 16px, suma przekroczy szerokość rodzica i elementy się zawiną albo zaczną się ściskać. Rozwiązanie: albo policz szerokość z uwzględnieniem gap, np. flex-basis: calc(50% - 8px) przy jednym odstępie, albo użyj flex: 1 1 0 i pozwól przeglądarce rozdzielić wolną przestrzeń. Pamiętaj też, że padding i border zwiększają rozmiar elementu, jeśli nie ustawisz box-sizing: border-box. Wtedy 50% plus padding daje więcej niż połowę rodzica i układ się rozjeżdża.<br>
<br>
<br>
<br>
Większość stron internetowych zbudowana jest na podobnym szkielecie: nagłówek, treść główna, nawigacja i stopka. Można je opisać za pomocą zwykłych divów, ale wtedy zarówno przeglądarki, jak i roboty wyszukiwarek muszą się domyślać, co jest czym. Znaczniki semantyczne — header, nav, main, footer — robią to samo, tylko jawnie. Dzięki nim struktura strony jest zrozumiała bez zaglądania w klasy CSS czy identyfikatory.<br>
<br>
<br>
<br>
Footer to miejsce na informacje, które nie są kluczowe dla głównej treści: dane kontaktowe, odnośniki do regulaminu, polityki prywatności, prawa autorskie. Często trafia tam także powtórzone menu. To akceptowalne, ale nie duplikuj całej nawigacji głównej bez potrzeby. Pamiętaj, że footer może występować w obrębie artykułu lub sekcji — wtedy dotyczy tylko tej części, a nie całej strony.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: najpierw ustal, które fragmenty powtarzają się na wszystkich podstronach, a które są unikalne. Powtarzalne elementy — nagłówek, menu, stopka — opakuj w header, nav i footer. Unikalną treść w main. Dzięki temu kod jest krótszy, a wyszukiwarki lepiej rozumieją, co jest najważniejsze. Unikaj natomiast nadużywania tych znaczników w miejscach, gdzie wystarczy zwykły div lub section — nadmiar semantyki wprowadza chaos.<br>
<br>
<br>
<br>
Nav, main i footer — co gdzie trafia Nav przeznaczony jest na zbiór linków nawigacyjnych. Nie musi to być tylko menu główne — może to być spis treści, paginacja albo linki do powiązanych artykułów. Typowy błąd to umieszczanie w nav pojedynczych linków, które nie tworzą spójnej grupy nawigacyjnej. Main zawiera unikalną treść danej podstrony. Na jednej stronie powinien być tylko jeden main — to najczęściej popełniany błąd. Nie umieszczaj w nim nagłówka ani stopki, jeśli powtarzają się na innych podstronach.<br>
<br>
<br>
<br>
Jak policzyć komórki, żeby tabela się nie rozjechała Najprostsza metoda to suma kontrolna. Dla każdego wiersza dodaj do siebie wartości colspan wszystkich komórek w tym wierszu plus liczbę komórek bez tego atrybutu. Wynik musi być identyczny w każdym wierszu i równy liczbie kolumn w tabeli. Przy planie tygodnia z siedmioma dniami i kolumną godzin każdy wiersz powinien dać osiem. Jeśli w jednym wierszu wychodzi siedem, przeglądarka dorysuje pustą komórkę albo przesunie zawartość — i cały plan przestaje się zgadzać z rzeczywistością.<br>
<br>
<br>
<br>
Na koniec sprawdź, czy nie mieszasz znaczników semantycznych z rolami ARIA. Jeśli używasz header, nav, main i footer, nie musisz dodawać role="banner", role="navigation", role="main" ani role="contentinfo" — przeglądarki i czytniki ekranu same je rozpoznają. Dopisywanie ich to typowy błąd, który nic nie wnosi, a czasem wprowadza sprzeczne informacje. Prosta, poprawnie opisana struktura działa lepiej niż najbardziej rozbudowane atrybuty.