Element article czy section — co wybrać w konkretnym układzie treści

Rozwiązaniem jest box-sizing: border-box. W tym trybie width obejmuje zawartość, padding i obramowanie razem. Ustawiasz width: 300px i element ma dokładnie 300px szerokości — padding i obramowanie "wchodzą do środka", zmniejszając miejsce na treść, a nie rozpychając element. Marginesy nadal działają na zewnątrz, bo nie są częścią pudełka. Ta jedna zmiana sprawia, że siatki i kolumny przestają wymagać ręcznego odejmowania pikseli.

Do typowych błędów należy też mieszanie flex-basis z width. Jeśli podasz oba, w flexboxie zwykle wygrywa flex-basis, a width staje się jedynie wartością zapasową. Kolejny problem to brak min-width: 0 na elementach z długim tekstem — bez tego długie słowa potrafią rozpychać kontener i psuć cały układ. Warto też pamiętać, że flex-shrink działa tylko wtedy, gdy kontener ma ograniczoną szerokość; w nieskończonej przestrzeni nie ma czego kurczyć.

Elementy article i section wyglądają podobnie w kodzie, ale pełnią inne role. Article to samodzielna całość, którą można wyjąć z kontekstu i opublikować osobno — wpis na blogu, komentarz pod artykułem, karta produktu. Section to fragment większej historii, który bez niej traci sens — rozdział, zakładka, grupa pytań w FAQ. Wybór złego znacznika nie zepsuje wyglądu strony, ale utrudni pracę wyszukiwarkom i czytnikom ekranu.

Osobną kwestię stanowi dostępność. Powiązanie etykiety z polem to nie tylko wygoda klikania, ale też informacja dla technologii asystujących. Gdy etykieta jest prawidłowo połączona, czytnik ekranu odczyta jej treść w momencie wejścia w pole. Bez tego użytkownik słyszy jedynie „pole edycyjne" i musi zgadywać, co ma wpisać. Dlatego warto sprawdzić każde pole w formularzu i upewnić się, że ma przypisaną etykietę — nawet jeśli wizualnie opis wydaje się oczywisty.

Domyślny model pudełkowy w CSS liczy szerokość elementu inaczej, niż większość osób się spodziewa. Gdy ustawiasz width: 300px, przeglądarka traktuje tę wartość jako szerokość samej zawartości. Padding i obramowanie dokładają się na zewnątrz, więc realna szerokość na ekranie wynosi 300px plus padding remont łazienki krok po kroku obu stronach plus grubość obramowań. Element z paddingiem 20px i obramowaniem 2px zajmuje w rzeczywistości 344px, mimo że w arkuszu widnieje 300px. Stąd bierze się większość layoutów, które rozjeżdżają się przy dodaniu paddingu.

Praktyczny test jest prosty. Kliknij w tekst etykiety i sprawdź, czy kursor pojawia się w polu. Potem spróbuj kliknąć w odstęp między opisem a polem — jeśli kursor się nie przenosi, prawdopodobnie etykieta nie obejmuje całego obszaru. Na koniec sprawdź formularz z klawiatury: przechodzenie tabulatorem powinno zatrzymywać się na każdym polu, a fokus powinien być widoczny. Te trzy czynności pozwalają wychwycić większość problemów z powiązaniem etykiet.

Najczęstszy błąd polega na zamianie tych elementów miejscami. Ludzie opakowują całą stronę w article, bo „to przecież artykuł". Tymczasem article na poziomie całego dokumentu nic nie wnosi, przechowywanie w małym mieszkaniu a utrudnia nawigację czytnikom ekranu i robotom. Drugi typowy błąd: używanie section jako zamiennika diva do celów czysto graficznych. Section nie służy do stylowania — od tego są klasy i arkusze stylów. Jeśli blok nie ma nagłówka ani spójnej treści tematycznej, nie jest sectionem.

Przy elastycznych układach border-box upraszcza rachunki. Siatka z kolumnami width: 25% i paddingiem 16px zmieści się w rodzicu bez przepełnienia, bo padding nie powiększa kolumn. To samo dotyczy pól formularzy, przycisków i kart — elementy z paddingiem i obramowaniem zachowują zadany wymiar niezależnie od stylów. Przy content-box każda zmiana paddingu wymusza przeliczanie szerokości, co szybko prowadzi do błędów przy wielu breakpointach.

Gdzie section jest właściwym wyborem Section przeznacz jest do grupowania treści, która ma wspólny temat, ale nie stanowi osobnej całości. Przykład: strona usługi podzielona meble na wymiar część opisującą proces, część z pytaniami i część z danymi kontaktowymi. Każda z tych części jest logicznym blokiem, ale wyrwana z kontekstu nie miałaby sensu. Section niemal zawsze powinien mieć nagłówek — jeśli nie potrafisz go wymyślić, prawdopodobnie potrzebujesz diva, a nie section.

Praktyczny test przed wdrożeniem: zadaj sobie pytanie, czy dany fragment mógłby trafić do kanału informacyjnego lub zostać wysłany komuś jako osobny link. Jeśli tak — article. Jeśli nie — section, o ile ma nagłówek i spójny temat. W pozostałych przypadkach używaj diva. Trzymanie się tej zasady upraszcza strukturę dokumentu i sprawia, że jest ona zrozumiała zarówno dla ludzi, jak i dla maszyn.

Typowe błędy wynikają z drobiazgów. Literówka w identyfikatorze albo w wartości atrybutu for całkowicie zrywa połączenie. Spacja na końcu wartości też jest błędem, If you liked this short article and you would like to receive far more data with regards to przeczytaj więcej kindly go to our own web-page. choć na pierwszy rzut oka nie widać różnicy. Kolejny problem to etykieta bez tekstu — sama ikona albo puste miejsce. Taka etykieta nie daje użytkownikowi żadnej wskazówki, a osoby korzystające z czytników ekranu nie usłyszą, czego dotyczy pole. Warto też pamiętać, że kliknięcie w etykietę nie zadziała, jeśli pole jest wyłączone albo ukryte.