Gdy plik rośnie, trzymanie porządku w tych trzech częściach oszczędza czasu. Zmiany w head dotyczą całej strony, więc jeden błąd w kodowaniu psuje wszystkie polskie znaki. Zmiany w body są lokalne i łatwiej je cofnąć. Świadome rozdzielanie instrukcji od treści to nie formalność, tylko warunek, że przeglądarka pokaże dokładnie to, co zaplanowałeś.
Tabela w HTML składa się z kilku współpracujących elementów: table jako kontenera, tr jako wiersza, td jako komórki danych oraz th jako komórki nagłówkowej. Każdy z nich pełni inną rolę i musi znaleźć się we właściwym miejscu, inaczej przeglądarka albo zignoruje strukturę, albo wyświetli ją w sposób nieprzewidywalny. Warto od początku budować tabelę świadomie, zamiast naprawiać ją później za pomocą stylów.
Ostatnia rzecz: nagłówki opisują treść, nie powtarzają nazwy elementu. „Sekcja 3″ albo „Artykuł” nic nie wnoszą. Jeśli nie umiesz nazwać tematu konkretnie, najpierw uporządkuj treść, a dopiero potem dobieraj znaczniki. Struktura dokumentu jest pochodną tego, co naprawdę chcesz przekazać — nie odwrotnie.
Zacznij od powiększenia newralgicznych miejsc – np. w edytorze grafiki ustaw widok na 400–800%. Jeśli widzisz rozmyte, poszarpane lub „wyprane” kontury, to znak, że kompresja była za silna. W przypadku plików JPEG sprawdź, czy nie są zapisane z jakością poniżej 80. Dla grafiki z tekstem lub cienkimi liniami użyj formatów bezstratnych: PNG lub WebP w trybie bezstratnym. Jeśli musisz użyć JPEG, zapisz obraz z maksymalną jakością (95–100) i nie otwieraj go ponownie do edycji – pracuj na pliku źródłowym (np. PSD, TIFF) i eksportuj dopiero na końcu.
Najczęstszy błąd to walka z liczbami bez zrozumienia, która wartość wygrywa. Zamiast zmniejszać marginesy na oślep, ustal jeden rytm pionowy strony i trzymaj się go konsekwentnie. Gdy wiesz, że przerwa między blokami wynosi zawsze tyle samo, przestajesz dodawać odstępy „na wszelki wypadek”. Drugi typowy błąd to dodawanie pustych elementów odstępujących. Taki element sam wprowadza kolejne zapadanie i zwykle nic nie wnosi. Trzeci: stosowanie marginesów na elementach liniowych, które układają się w wiersz — tam odstępy liczą się inaczej.
Gdy naprawdę potrzebujesz przerwy większej niż pojedynczy margines, masz trzy rozwiązania. Ustaw jednemu z sąsiadów odstęp równy sumie, której oczekujesz. Dodaj wypełnienie lub obramowanie do kontenera, żeby przerwać zapadanie. Albo przełącz kontener na układ elastyczny z odstępem między elementami — wtedy marginesy przestają się łączyć i liczysz każdą przerwę osobno. Wybór zależy od tego, czy chcesz zachować zapadanie jako mechanizm rytmu, czy całkowicie nad nim zapanować.
Section bez nagłówka to znak, że prawdopodobnie używasz go jako zwykłego kontenera na stylowanie. Do tego służy div. Section ma sens wtedy, gdy grupuje treść wokół jednego tematu i ten temat da się nazwać nagłówkiem. Jeśli nie potrafisz wymyślić nagłówka dla swojej sekcji, to znaczy, że nie jest to jeszcze sekcja — to zbiór przypadkowych elementów. Ten test działa lepiej niż jakiekolwiek reguły składniowe.
Zagnieżdżanie article w article też bywa źródłem problemów. Komentarz pod wpisem to osobny article, ale nie powinien mieć nagłówka tego samego poziomu co sam wpis. Wpisz w strukturze artykuł główny jako h1, komentarze jako h2 lub h3 — w zależności od tego, jak głęboko siedzą. Wtedy nawigacja po nagłówkach pokazuje realną hierarchię, a nie płaską listę tytułów, w której nie wiadomo, co jest czym.
Szkielet warto zapisywać w stałej kolejności: deklaracja typu, html z atrybutem języka, head z kodowaniem i tytułem, potem body. Atrybut lang=”pl” pomaga czytnikom ekranu i translatorom. Nie wstawiaj do head elementów widocznych, nie zamykaj body przed końcem treści i nie mieszaj dwóch deklaracji typu. Nazwy pliku nie muszą być skomplikowane — wystarczy index.html zapisany w tym samym katalogu co arkusz stylów, a odwołanie w head powinno być względne.
Każdy article powinien mieć własny nagłówek najwyższego dostępnego poziomu. Jeśli article jest bezpośrednim dzieckiem body, zaczynasz od h1. Jeśli leży wewnątrz innego article lub section, możesz użyć h2 — i to jest poprawne. Poziom nagłówka zależy od miejsca w hierarchii, nie od tego, jak duży tekst ma wyglądać na ekranie. Rozmiar czcionki ustawiasz w CSS, nie wyborem znacznika.
Element body obejmuje wszystko, co użytkownik widzi: nagłówki, akapity, listy, obrazy, formularze. Przeglądarka potrafi sama domknąć brakujące znaczniki i wstawić brakujące elementy, więc strona z błędem może wyglądać poprawnie, choć jej struktura jest inna, niż napisałeś. Dlatego warto sprawdzać gotowy dokument w narzędziach deweloperskich i patrzeć, czy drzewo elementów zgadza się z plikiem. Jeśli treść wyląduje w head zamiast w body, przeglądarka przeniesie ją na początek ciała dokumentu — to wygodne, ale utrudnia późniejsze poprawki.
If you adored this short article and you would certainly such as to obtain additional information regarding czytaj dalej kindly see our web-page.