Sekcja w artykule czy artykuł w sekcji — co wybrać w HTML

Flex-basis w procentach liczy się zawsze względem głównego rozmiaru kontenera rodzica. Jeśli rodzic ma flex-direction: row, procent odnosi się do szerokości. Przy flex-direction: column — do wysokości. To pierwsze miejsce, w którym ludzie się mylą, bo patrzą na oś, w której elementy są ułożone, a nie na to, co faktycznie jest bazą procentu. W praktyce: flex: 0 0 50% na dziecku kontenera z flex-direction: row da mu połowę szerokości rodzica, nawet jeśli sam element ma narzuconą inną szerokość — flex-basis wygrywa, dopóki width nie jest ustawione z wyższym priorytetem.

Na koniec: nie ufaj automatycznym optymalizatorom, które „bezstratnie" zmniejszają rozmiar. Część z nich stosuje agresywne kwantyzacje, które psują krawędzie. Zawsze sprawdź wynikowy plik w powiększeniu, zanim go opublikujesz. Jeśli zależy Ci na jakości, wybierz format bezstratny dla grafiki z ostrymi elementami, a JPEG zostaw dla zdjęć, gdzie naturalne przejścia tonalne maskują drobne artefakty.

Najczęstszy błąd to traktowanie jak . Sekcja bez nagłówka nie ma sensu semantycznego i nic nie wnosi. Drugi błąd to wstawianie w bez powodu — zagnieżdżony artykuł musi być niezależny od nadrzędnego, na przykład komentarz pod wpisem. Trzeci błąd to mieszanie poziomów nagłówków: jeśli ma , to sekcje w nim powinny zaczynać się od , a nie znów od .

Jak pozbyć się przerwy bez psucia kodu Pierwszy sposób to usunięcie białych znaków z HTML. W praktyce oznacza to sklejenie znaczników w jednej linii:
...

...
. Działa, ale kod staje się nieczytelny, a przy formatowaniu przez edytor łatwo przypadkiem przywrócić spację. Druga metoda to komentarz między elementami:

. Komentarz zajmuje miejsce białego znaku, a przeglądarka go nie renderuje. Trzecia, najczystsza, to ustawienie na rodzicu font-size: 0 i przywrócenie normalnego rozmiaru czcionki wewnątrz elementów potomnych. Wtedy spacja ma zerową szerokość, a tekst w środku wygląda normalnie.

Znaczniki i opisują różne rzeczy i dlatego można je zagnieżdżać na dwa sposoby. w oznacza, że dzielisz samodzielną treść na części: wpis blogowy na wstęp, rozwinięcie i podsumowanie, produkt na opis i parametry. w oznacza odwrotność: zbierasz kilka samodzielnych treści w jeden blok tematyczny — na przykład lista komentarzy, w której każdy komentarz jest osobnym artykułem, albo sekcja „Aktualności" z kilkoma notkami.

Kolejna pułapka to mieszanie semantyki z wyglądem. section nie służy do robienia kolumn w CSS. Jeśli chcesz dwa bloki obok siebie, użyj div i flexboxa, a section zostaw dla treści, która faktycznie dzieli artykuł na tematyczne części. Dzięki temu struktura dokumentu pozostaje czytelna, gdy ktoś wyłączy style.

Na koniec zasada porządkująca: jedno article może zawierać wiele section, jedna section może zawierać wiele article, ale nie rób tego mechanicznie. Każde zagnieżdżenie musi mieć uzasadnienie w treści. Jeśli nie potrafisz jednym zdaniem powiedzieć, czym jest dany blok i dlaczego jest samodzielny lub nie, użyj div. Semantyka HTML ma pomagać, a nie tworzyć kolejną warstwę do odgadywania.

Zamiast walczyć z białymi znakami, można zmienić model układu. Flexbox na kontenerze rodzica całkowicie eliminuje ten problem, bo elementy przestają być inline, a stają się elementami układu elastycznego. To obecnie najbezpieczniejsze rozwiązanie, zwłaszcza gdy elementy mają się rozciągać, zawijać albo wyrównywać w pionie. Inline-block nadal ma sens w prostych przypadkach, na przykład dla elementów, które muszą zachowywać się jak tekst i jednocześnie przyjmować wymiary.

Gdy ustawiasz elementy jako inline-block, żeby stały obok siebie, w podglądzie pojawia się cienka szpara. To nie margines ani padding, których nie ustawiłeś. To efekt tego, jak przeglądarka traktuje białe znaki w kodzie HTML. Każdy enter, tabulator albo spacja między zamykającym a otwierającym znacznikiem staje się węzłem tekstowym. W trybie inline oraz inline-block taki węzeł renderuje się jak zwykła spacja — dokładnie taka, jaka powstałaby między dwoma słowami w akapicie. Stąd odstęp o szerokości jednej spacji, zwykle kilka pikseli.

Uważaj na pułapki. Przy font-size: 0 znikają też odstępy między wyrazami w elemencie nadrzędnym, jeśli zapomnisz przywrócić rozmiar w dzieciach. Z kolei usuwanie spacji z HTML psuje czytelność i utrudnia pracę w zespołach, gdzie ktoś formatuje plik automatycznie. Komentarze działają, ale bywają kłopotliwe przy dynamicznym generowaniu znaczników. Żadna z tych metod nie jest zła — ważne, żeby wybrać jedną i trzymać się jej konsekwentnie w całym projekcie.

Na koniec sprawdź całość tak: wyłącz CSS i przeczytaj samą strukturę. Jeśli po nagłówkach da się zrozumieć, gdzie kończy się jedna samodzielna treść, a zaczyna druga, zagnieżdżenie jest poprawne. Jeśli nie — najprawdopodobniej zamieniłeś miejscami i albo użyłeś jednego z nich tam, gdzie wystarczył .