Czy kotwica na jednej stronie naprawdę wymaga aż tyle zachodu?

Elementy section i article w HTML5 wyglądają podobnie, ale mają różne znaczenie. article to samodzielna treść, która ma sens także po wyjęciu z kontekstu strony — wpis na blogu, komentarz, karta produktu. section to fragment większej całości, który samodzielnie nie byłby kompletny — rozdział, grupa akapitów, panel z powiązanymi informacjami. Problem pojawia się, gdy trzeba je zagnieździć i nie wiadomo, co włożyć w co.

Jak rozpoznać i naprawić problemy z krawędzia

Kotwice sprawdzaj na urządzeniach mobilnych, bo tam nawigacja bywa inna, a przyklejone menu wyższe. Przetestuj również po odświeżeniu strony z hashem w adresie — dobry dokument powinien od razu pokazać właściwą sekcję. Jeśli link prowadzi do treści ładowanej dynamicznie, kotwica może nie zadziałać, dopóki element nie pojawi się w DOM. Wtedy trzeba przewinąć widok skryptem po załadowaniu danych.

Kolejny problem to nadmiar zagnieździeń. Gdy article zawiera section, a ten zawiera kolejny article, struktura robi się trudna do zrozumienia. Zasada jest prosta: article to samodzielna całość, którą można by opublikować osobno. Section to tematyczna część większej całości. Jeśli coś jest tylko ozdobnikiem lub kontenerem do stylowania, użyj div. HTML nie służy do opisywania wyglądu, tylko znaczenia.

Trzy rzeczy, które psują to ustawienie Pierwszy problem to brak wymiarów rodzica. Element relative, który nie ma wysokości ani szerokości, bo zawiera tylko absolutne dzieci, zapada się do zera. Dzieci nie nadają mu rozmiaru, bo wypadły z przepływu. W efekcie absolut ustawia się względem punktu, a nie prostokąta, i wszystko się rozjeżdża. Rozwiązanie: nadaj rodzicowi jawną wysokość, minimalną wysokość albo padding, który utrzyma jego wymiary.

Nie mieszaj też nagłówków bez planu. Każdy section i article powinien mieć nagłówek, ale nie musisz zaczynać od h1. Wystarczy hierarchia od h2 w dół, zależnie od kontekstu. Pamiętaj, że walidator HTML nie wychwyci błędów semantycznych — one nie psują kodu, ale utrudniają korzystanie ze strony. Dlatego zamiast mnożyć znaczniki, lepiej najpierw rozpisz strukturę treści, a potem dopasuj do niej elementy.

Odnośnik, który faktycznie działa W miejscu, z którego użytkownik ma przejść do sekcji, wstaw zwykły link z hashem: Przejdź do płatności. Ważne, żeby wartość po # była identyczna z id — wielkość liter ma znaczenie, podobnie jak brak przypadkowych spacji. Jeśli identyfikator zawiera myślnik, nie zamieniaj go na podkreślenie. Najczęstszy błąd to wpisanie w href pełnego adresu zamiast samego fragmentu; wtedy przeglądarka przeładuje stronę i kotwica zniknie.

Elementy section i article mają różne znaczenie i nie należy ich traktować jako zamienników. Zagnieżdżanie ich w sobie jest poprawne tylko wtedy, gdy struktura treści naprawdę na to pozwala. Każdy z tych elementów musi mieć dostępną nazwę — najczęściej przez nagłówek. Jeśli wstawiasz section bez nagłówka albo bez etykiety, staje się on dla czytnika ekranu nic nieznaczącym pojemnikiem.

Praktyczna różnica jest też w tym, co zagnieżdżenie komunikuje czytnikom ekranu i wyszukiwarkom. article wewnątrz article oznacza zwykle komentarz pod wpisem — i to jest poprawne. Natomiast section wewnątrz section bez nagłówka to prawie zawsze błąd: fragment bez tytułu trudno zidentyfikować, więc lepiej użyć zwykłego div z klasą.

Kontrast tekstu i tła da się zmierzyć. Wartość tę opisuje iloraz jasności względnej (luminancji) jaśniejszego i ciemniejszego elementu. Wynik zapisuje się jako stosunek, na przykład 4,5:1 albo 21:1. Maksimum to 21:1, czyli czerń na bieli; minimum to 1:1, gdy kolor tekstu i tła są identyczne i nic nie widać. Bez tego pomiaru projektowanie czytelnego tekstu sprowadza się do zgadywania, a wzrok bywa zawodny — szczególnie na ekranach o różnej jasności i kalibracji.

Zacznij od nadania identyfikatora. Wybierz nagłówek, akapit albo kontener, który ma być celem, i dopisz do niego id, np.
. Nazwa musi być unikalna w całym dokumencie, może zawierać litery, cyfry, myślniki i podkreślenia, nie powinna mieć spacji ani polskich znaków. W praktyce lepiej używać krótkich, opisowych nazw po angielsku — mniej problemów przy kopiowaniu i w narzędziach analitycznych.

Zagnieżdżanie article w section ma sens, gdy sekcja grupuje kilka niezależnych wpisów, np. posty na blogu, komentarze, produkty w kategorii. Wtedy article zachowuje swoją samodzielność, a section pełni rolę organizatora. Przykład: section z nagłówkiem „Najnowsze wpisy", a w nim trzy article, każdy z własnym tytułem i treścią. Taki układ pomaga w nawigacji i nie wprowadza bałaganu.

Typowe błędy wynikają z pośpiechu. Pierwszy to ocenianie kolorów „na oko" — jasny szary na białym wydaje się czytelny na monitorze autora, a na telefonie w słońcu przestaje być widoczny. Drugi to zapominanie o przezroczystości: półprzezroczysty tekst na zdjęciu ma inny kontrast w każdym miejscu, więc raz jest czytelny, raz nie. Trzeci to traktowanie kontrastu jako jedynego kryterium — zbyt duży kontrast na dużych powierzchniach męczy wzrok, a cienka czcionka o niskim kontraście jest nieczytelna nawet przy dobrym wyniku. Czwarty błąd to ignorowanie stanów: linki, przyciski i pola formularzy zmieniają kolor po najechaniu i po kliknięciu, a te warianty też trzeba sprawdzić.