Header i nav czy main i footer — co naprawdę opisuje układ strony
Jak pozbyć się odstępu bez psucia typograf<br>
<br>
<br>
<br>
Nagłówki kolumn można dodatkowo opisać atrybutem scope. Wartość scope="col" mówi, że dana komórka th opisuje całą kolumnę, a scope="row" — cały wiersz. Dzięki temu technologie asystujące lepiej wiążą nagłówek z danymi. To prosty zabieg, który nie zmienia wyglądu, ale realnie poprawia jakość tabeli.<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>
Gdzie postawić header, a gdzie nav header to nie synonim górnego paska. To wprowadzenie do najbliższego kontekstu — może być nagłówkiem całej strony, ale też pojedynczego artykułu czy sekcji. W nagłówku strony zwykle ląduje logo, nazwa serwisu i główne menu. W nagłówku artykułu — tytuł, autor i data. Możesz mieć wiele elementów header w dokumencie, byle każdy należał do innego bloku. nav z kolei opisuje zbiór linków nawigacyjnych. Nie każdy zestaw odnośników to nawigacja: linki w stopce albo w akapicie nie muszą być w nav. Używaj go dla menu głównego, bocznego, breadcrumbów i spisu treści. Jeśli na stronie jest kilka nawigacji, rozróżnij je atrybutem aria-label, np. „menu główne" i „menu boczne".<br>
<br>
<br>
<br>
Elementy section i article wyglądają podobnie w kodzie, ale pełnią różne role. article to samodzielna całość, którą można wyciąć z dokumentu i opublikować gdzie indziej — wpis na blogu, komentarz, karta produktu. section to wydzielony fragment większej historii, który bez kontekstu traci sens — rozdział, zakładka, grupa akapitów o jednym wątku. Zagnieżdżanie ich w dowolnej kolejności jest poprawne, o ile każde użycie ma uzasadnienie w treści, a nie w wyglądzie.<br>
<br>
<br>
<br>
Najczęstszy błąd to zamiana obu znaczników w ozdobniki layoutu. Ktoś opakowuje w section nagłówek i menu, a w article wrzuca boks z reklamą. To działa wizualnie, ale psuje semantykę i utrudnia nawigację czytnikom ekranu oraz robotom wyszukiwarek. Zanim wpiszesz section lub article, zadaj sobie pytanie: czy ten fragment ma własny nagłówek i czy zachowa sens po przeniesieniu w inne miejsce. Jeśli nie, użyj zwykłego div.<br>
<br>
<br>
<br>
Praktyczna zasada: article dla rzeczy, które mogłyby trafić do kanału RSS, section dla części tej samej rzeczy. Nie mieszaj ich bezmyślnie tylko dlatego, że edytor graficzny podpowiada takie opakowanie. Sprawdź kod po wygenerowaniu strony — jeśli w środku section widzisz article bez nagłówka albo section bez treści, uprość strukturę. Dobre użycie tych znaczników nie zmienia wyglądu, ale poprawia dostępność, porządkuje dokument i ułatwia późniejszą rozbudowę.<br>
<br>
<br>
<br>
Na koniec sprawdź, czy każdy wiersz ma tyle samo komórek, czy nagłówki faktycznie opisują kolumny, a nie są tylko wizualnym wyróżnieniem, oraz czy tabela nie służy do czegoś, do czego powstała inna struktura. Tabela HTML działa przewidywalnie wtedy, gdy trzymasz się jej pierwotnego przeznaczenia: pokazywania danych w uporządkowanych rzędach i kolumnach.<br>
<br>
<br>
<br>
Typowe błędy wynikają z przyzwyczajenia do edytorów wizualnych. Pierwszy z nich to wybieranie nagłówka wyłącznie dlatego, że ładnie wygląda — np. h4 zamiast h2, bo ma wygodniejszy rozmiar. Drugi to używanie nagłówków do zwykłego pogrubienia akapitu, który nie jest żadnym tytułem. Trzeci to pomijanie poziomów: strona ma h1, potem od razu h3, a h2 nie występuje wcale. Czwarty błąd to wiele h1 na jednej stronie — co prawda nie jest to już tak surowo oceniane jak kiedyś, ale wprowadza zamieszanie i zwykle oznacza, że autor nie zdecydował, co jest głównym tematem.<br>
<br>
<br>
<br>
Kiedy section wchodzi w article, a kiedy article w section Układ article wewnątrz section sprawdza się, gdy section grupuje wiele niezależnych materiałów. Przykład: section „Aktualności" zawiera trzy osobne artykuły, każdy z własnym tytułem, datą i autorem. Odwrotny układ — section wewnątrz article — stosujesz, gdy jeden tekst dzieli się na logiczne części. Długi poradnik może mieć wewnątrz artykuły sekcje „Przygotowanie", „Wdrożenie" i „Najczęstsze problemy". Każda z nich dostaje własny nagłówek h2, a całość pozostaje jednym artykułem.<br>
<br>
<br>
<br>
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.