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ę.
Zacznij od ustawienia bazowego rozmiaru na elemencie głównym, czyli html. Wpisanie tam wartości procentowej lub jednostki rem sprawia, że cała strona respektuje wybór użytkownika. Dopiero potem nadawaj rozmiary poszczególnym elementom. Jeśli bazę ustawisz w pikselach, odcinasz użytkownika od jego preferencji — powiększanie czcionki w przeglądarce przestaje działać na korzyść tekstu. To najczęstszy błąd przy przepisywaniu projektu na jednostki względne.
Selektor klasy wskazuje element przez wartość atrybutu class. Jedna klasa może wystąpić na wielu elementach, a jeden element może mieć kilka klas oddzielonych spacjami. To czyni klasę podstawowym narzędziem do stylowania komponentów wielokrotnego użytku: przycisków, kart, komunikatów. Identyfikator działa inaczej — w poprawnym dokumencie występuje tylko raz, więc nadaje się do wskazania unikalnego fragmentu, na przykład głównego kontenera strony czy konkretnego pola formularza, do którego prowadzi odnośnik wewnętrzny.
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.
Nie mieszaj jednostek bez powodu w obrębie jednego komponentu. Tekst w rem, padding w px i margines w em to przepis na układ, który rozjeżdża się przy zmianie skali. Wybierz system: bazę w html, typografię w rem, odstępy w rem, a em zostaw na wyjątki. Sprawdź efekt, powiększając czcionkę w przeglądarce do 150 procent — jeśli układ pęka, winne są piksele w miejscach, w których ich być nie powinno.
Zupełnie inaczej podchodzi się do problemu, gdy elementy mają układ oparty na flexboxie lub gridzie. W tych modelach białe znaki między elementami nie generują odstępu, bo elementy nie są już układane jak znaki w wierszu tekstu. To najczystsze rozwiązanie, jeśli nie musisz wspierać bardzo starych przeglądarek. Wystarczy ustawić na kontenerze display: flex i zadbać o gap albo marginesy, a odstępy staną się w pełni kontrolowane.
Elementy section i article wyglądają podobnie w kodzie, ale pełnią różne role. article to samodzielna całość, którą można wyciąć z dokumentu i opublikować gdzie indziej — wpis na blogu, komentarz, karta produktu. section to wydzielony fragment większej historii, który bez kontekstu traci sens — rozdział, zakładka, grupa akapitów o jednym wątku. Zagnieżdżanie ich w dowolnej kolejności jest poprawne, o ile każde użycie ma uzasadnienie w treści, a nie w wyglądzie.
Kiedy section wchodzi w article, a kiedy article w section Układ article wewnątrz section sprawdza się, gdy section grupuje wiele niezależnych materiałów. Przykład: section „Aktualności” zawiera trzy osobne artykuły, każdy z własnym tytułem, datą i autorem. Odwrotny układ — section wewnątrz article — stosujesz, gdy jeden tekst dzieli się na logiczne części. Długi poradnik może mieć wewnątrz artykuły sekcje „Przygotowanie”, „Wdrożenie” i „Najczęstsze problemy”. Każda z nich dostaje własny nagłówek h2, a całość pozostaje jednym artykułem.
Nie trzymaj się jednak sztywno jednej formy w całym dokumencie. Krótka instrukcja może mieć numerację w częściach proceduralnych i punktowanie w uwagach. Ważne, by każda lista była wprowadzona zdaniem zapowiadającym i miała spójną interpunkcję. Sprawdź też, czy po zmianie formatu treść nadal się broni. Jeśli po zamianie numeracji na punktowanie sens się rozsypuje, kolejność była nośnikiem znaczenia — i dobrze, że została zapisana liczbowo.
Efekt jest szczególnie widoczny przy budowie siatek opartych na procentach. Trzy kolumny po 33,33% nie zmieszczą się w wierszu, bo dwa odstępy dodają kilka pikseli i ostatni element spada do nowej linii. Typowy błąd to szukanie winy w marginach, paddingach albo border-box. Warto wtedy sprawdzić, czy w kodzie HTML między zamknięciem jednego znacznika a otwarciem drugiego nie ma przejścia do nowej linii. Często wystarczy usunąć białe znaki, ale trzeba to robić świadomie.
Wybór między listą numerowaną, punktowaną i definicji nie jest kwestią estetyki, a logiki przekazu. Każda z nich odpowiada na inne pytanie czytelnika. Lista numerowana mówi: „w jakiej kolejności”. Punktowana: „co się na to składa”. Definicji: „co to właściwie znaczy”. Jeśli pomylisz te role, odbiorca zgubi się w treści, nawet gdy zdania będą poprawne.
If you enjoyed this write-up and you would certainly like to obtain more info concerning http://bookmarkingcentrals.com/ kindly check out our own web site.