5 sygnałów, że mylisz article z section i tracisz na tym SEO
Warto też pamiętać o kolejności: znacznik viewport powinien być jednym z pierwszych w head, przed arkuszami stylów i skryptami. Przeglądarki mobilne odczytują go przy pierwszym renderowaniu, a późniejsze zmiany przez JavaScript bywają ignorowane lub powodują przeskok widoku. Jeden poprawny wpis wystarcza na całą witrynę, o ile znajduje się w każdym generowanym dokumencie. To najtańsza poprawka, jaka zmienia komfort czytania na telefonie.<br>
<br>
<br>
<br>
Podstawowa wersja to znacznik meta z atrybutem name="viewport" i wartością width=device-width, initial-scale=1. Pierwsza część mówi, że szerokość obszaru roboczego ma odpowiadać szerokości ekranu w pikselach niezależnych. Druga ustawia początkowy zoom na 100 procent, czyli bez przybliżenia i bez pomniejszenia. Taki zapis umieszcza się w head przed jakimikolwiek stylami, żeby przeglądarka poznała zasady, zanim zacznie renderować stronę.<br>
<br>
<br>
<br>
Poprawny zapis wygląda tak: . Wartość width=device-width mówi przeglądarce, żeby szerokość layoutu dopasowała się do szerokości ekranu w pikselach CSS. initial-scale=1 ustawia początkowe powiększenie na 100 procent, czyli bez automatycznego oddalania. Ta linia musi znaleźć się w sekcji head, przed jakimikolwiek arkuszami stylów i skryptami, które modyfikują układ. Jeśli wstawisz ją na końcu body, część przeglądarek może ją zignorować albo zastosować za późno, co objawia się mignięciem niewłaściwego widoku przy wczytywaniu.<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>
Co jeszcze warto dodać, a czego unikać Do podstawowej wersji często dopisuje się maximum-scale=1 lub user-scalable=no. To błąd. Blokowanie powiększania łamie dostępność: osoby słabowidzące nie mogą przybliżyć sobie tekstu, a przeglądarki mobilne coraz częściej ignorują ten zakaz. Wystarczy width=device-width i initial-scale=1. Jeżeli strona ma stały układ o znanej szerokości, można użyć width=1024, ale to rozwiązanie tymczasowe — przy zmianie orientacji na poziomą układ się rozjedzie, a przy węższych ekranach pojawi się poziomy pasek przewijania.<br>
<br>
<br>
<br>
Elementy article i section wyglądają podobnie w kodzie, ale mają różne zadania. Article opisuje samodzielną całość, którą można wyjąć z kontekstu i opublikować gdzie indziej bez utraty sensu. Section to tematyczny fragment większej całości, który bez kontekstu traci znaczenie. Jeśli zamieniasz je bezrefleksyjnie, roboty wyszukiwarek i czytniki ekranu dostają mylące informacje o strukturze treści.<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>
Kontener to pojemnik, a elementy to jego bezpośrednie dzieci. Wnuki nie biorą udziału w głównym układzie flex — chyba że same staną się kontenerami. To rozróżnienie ratuje przed wieloma godzinami debugowania. Gdy ustawiasz justify-content albo align-items, działasz wyłącznie na bezpośrednich dzieciach. Jeśli element znajduje się głębiej, jego pozycja zależy od rodzica, który go bezpośrednio obejmuje.<br>
<br>
<br>
<br>
Zacznij od pytania, czy dana treść ma sens w oderwaniu od reszty strony. Wpis na blogu, komentarz użytkownika, recenzja produktu czy pojedynczy post na forum to article. Rozdział w artykule, sekcja z pytaniami i odpowiedziami albo blok z danymi kontaktowymi to section. Praktyczna zasada: article może mieć własny nagłówek, autora i datę, a section dziedziczy kontekst po rodzicu.<br>
<br>
<br>
<br>
Można to rozwiązać na dwa sposoby. Pierwszy to otoczenie pola znacznikiem label: Imię . Drugi to pozostawienie etykiety obok pola i wskazanie powiązania przez atrybut for: Imię . Oba są poprawne, ale mają inne konsekwencje. Otulenie wymaga ostrożności przy polach wyboru i przyciskach opcji, bo kliknięcie w etykietę może niechcący przełączyć wartość. Wersja z for daje większą kontrolę nad tym, co dokładnie jest klikalne.<br>
<br>
<br>
<br>
Bez znacznika meta viewport w sekcji head telefon zakłada, że strona ma szerokość około 980 pikseli. Efekt? Przeglądarka oddala całą witrynę, żeby zmieściła się na ekranie. Użytkownik widzi miniature, w którą musi celować palcem i powiększać, żeby cokolwiek przeczytać. Wystarczy jedna linia kodu, żeby to zmienić.