5 zasad mieszania section i article, które ratują strukturę HTML

JPG wybieraj do zdjęć i obrazów o ciągłej tonacji: portretów, pejzaży, zdjęć produktowych na jednolitym tle, materiałów z dużą liczbą kolorów przechodzących płynnie jeden w drugi. Format radzi sobie z taką treścią znacznie lepiej niż PNG, bo potrafi odrzucić drobne różnice w odcieniach, których oko i tak nie rozróżnia. Dzięki temu plik jest mniejszy. Jeśli zdjęcie ma trafić na stronę, do wiadomości e-mail albo do dokumentu, JPG zwykle wystarczy. Ustaw jakość na tyle wysoką, by nie było widać artefaktów, ale nie na maksimum – zapis w najwyższej jakości daje duży plik bez zauważalnej poprawy.

Ustawienie position: absolute na elemencie nie działa w próżni. Taki element pozycjonuje się względem najbliższego przodka, który ma ustawione position inne niż static. Jeśli żaden przodek takiego position nie ma, punktem odniesienia staje się obszar początkowy dokumentu, czyli w praktyce cała strona. To najczęstsza przyczyna sytuacji, w której element zamiast siedzieć w prawym górnym rogu karty, wylatuje gdzieś na sam szczyt okna przeglądarki.

Specyficzność kontra kolejność — kto naprawdę rządzi Zanim zaczniesz przesuwać linijki w górę i w dół, sprawdź, czy reguły mają tę samą specyficzność. Selektor klasy jest silniejszy niż selektor znacznika, a identyfikator przebija klasę. Jeśli więc późniejsza reguła używa słabszego selektora, wcześniejsza i tak może wygrać. Kolejność decyduje tylko wtedy, gdy waga selektorów jest równa. Typowy błąd polega na dopisywaniu coraz bardziej złożonych selektorów, żeby „przebić" poprzednią regułę, zamiast uporządkować kod.

Osobna pułapka to wysokość przodka. Element absolutny nie wpływa na wysokość rodzica, bo jest wyjęty z przepływu. Kontener z position: relative i samymi dziećmi absolutnymi może mieć wysokość zero i zniknąć z widoku, mimo że dzieci są widoczne. Jeśli zależy ci na tym, żeby rodzic obejmował zawartość, ustaw mu minimalną wysokość albo użyj innych technik, np. grid lub flex, a absolute zostaw tylko dla elementów, które naprawdę mają być oderwane od przepływu.

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ę.

Drugi częsty błąd to ustawianie absolute bez żadnej wartości przesunięcia. Element z position: absolute i bez top, left, right ani bottom zachowuje się podobnie do static, ale wypada z normalnego przepływu dokumentu. Sąsiednie elementy przestają go omijać, co potrafi rozsypać cały układ. Zawsze podawaj konkretne wartości, np. top: 0 i right: 0, jeśli chcesz przypiąć element do narożnika.

Największy błąd to walka z kaskadą przez przypadkowe kopiowanie reguł. Gdy widzisz, że coś nie działa, nie dodawaj kolejnej linii na końcu pliku. Sprawdź, jaka reguła faktycznie wygrywa, używając narzędzi deweloperskich w przeglądarce. Pokazują one, które deklaracje zostały nadpisane i przez co. To oszczędza godziny zgadywania. Pamiętaj też, że ta sama zasada dotyczy nie tylko kolorów, ale też marginesów, rozmiarów czcionek i pozycjonowania. Kaskada nie wybacza bałaganu — ale nagradza tych, którzy rozumieją jej kolejność.

Warto też zadbać o podpis tabeli. Element umieszczony zaraz po otwarciu opisuje, czego dotyczą dane. To nie jest ozdoba, lecz informacja, która pomaga zarówno w wyszukiwaniu, jak i w odbiorze przez osoby nietechniczne. Podpis pojawia się nad tabelą i nie zaburza układu wierszy, o ile nie próbujesz go stylować na sztywno.

Najprostszy test przed wdrożeniem: wyobraź sobie, że wycinasz dany fragment i wklejasz na inną stronę. Jeśli nadal jest zrozumiały, użyj article. Jeśli potrzebuje sąsiednich treści, wybierz section. Gdy nie spełnia żadnego z tych warunków, pozostań przy div. Ta jedna decyzja poprawia dostępność, porządkuje nagłówki i zmniejsza ryzyko, że wyszukiwarka błędnie zinterpretuje Twoją treść.

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.

Gdzie najczęściej popełnia się błąd Pierwszy typowy błąd to opakowywanie w article każdego bloku z nagłówkiem. Wtedy strona główna bloga wygląda dla robota jak zbiór niezależnych publikacji, choć to tylko lista zapowiedzi. Drugi błąd to używanie section jako uniwersalnego pojemnika na wszystko. Jeśli fragment nie ma własnego nagłówka i nie tworzy spójnego tematu, lepszym wyborem będzie zwykły div — nie wprowadza bowiem sztucznej semantyki.