Plik HTML czy skrót do strony? Różnica, która decyduje o dwukliku

Największy problem pojawia się, gdy lista udaje akapit. Pięć krótkich punktów zamiast jednego zdania to czytelnicza zgadywanka. Zanim cokolwiek wypunktujesz, zapisz to jako zwykłe zdanie. Jeśli brzmi naturalnie, zostaw akapit. Jeśli się gubi, podziel treść na punkty. Trzymaj też jedną zasadę: lista musi mieć wprowadzenie w zdaniu poprzedzającym — czytelnik powinien wiedzieć, czego dotyczy wyliczenie, zanim do niego dotrze.

Trzecia sprawa to ścieżki do zasobów. Plik otwarty z dysku działa w trybie lokalnym i nie może pobierać danych z sieci tak jak zwykła strona. Obrazki, arkusze stylów i skrypty muszą leżeć obok pliku HTML albo w podfolderach, a odwołania powinny być względne. Ścieżka zaczynająca się od ukośnika, na przykład do folderu głównego, w trybie lokalnym wskaże katalog najwyższego poziomu dysku i zasób się nie wczyta.

Elementy HTML domyślnie zachowują się w układzie na jeden z dwóch sposobów: jedne łamią linię przed sobą i po sobie, inne wchodzą w tekst jak słowa. Wartość display decyduje, czy element tworzy własny blok, czy tylko fragment wiersza. Zrozumienie tej różnicy rozwiązuje większość problemów z pionowymi odstępami i wysokością kontenerów, które na pierwszy rzut oka wyglądają na błąd przeglądarki.

Plik zapisany jako index.html leży na dysku jak każdy inny dokument. Dwuklik na takim pliku nie łączy się z żadnym serwerem — system odczytuje rozszerzenie .html i uruchamia program przypisany do tego typu plików, najczęściej domyślną przeglądarkę. Adres widoczny w pasku zaczyna się wtedy od file://, a nie od http, co oznacza, że strona jest wczytywana wprost z twojego komputera.

Piksel (px) jest jednostką bezwzględną. Font-size: 16px oznacza dokładnie 16 pikseli CSS, niezależnie od tego, jaką wielkość czcionki bazowej ustawi sobie odbiorca w przeglądarce. To wygodne przy projektach o sztywnych wymiarach, ale problematyczne, gdy ktoś potrzebuje większego tekstu ze względu na wzrok. Przeglądarka może wprawdzie skalować całą stronę, ale sam mechanizm zmiany domyślnej wielkości czcionki nie zadziała. Typowy błąd to ustawianie w pikselach wszystkich nagłówków i akapitów — strona wygląda wtedy identycznie u każdego, także tam, gdzie dostępność powinna być priorytetem.

Lista definicji ma inne zadanie: łączy termin z jego objaśnieniem. Nie jest to lista kroków ani wyliczanka cech. Stosuj ją wtedy, gdy czytelnik napotyka nieznane pojęcie i chce szybko sprawdzić, co ono znaczy. W czystym HTML odpowiada jej para znaczników definicji, ale w zwykłym artykule wystarczy zapis „termin — objaśnienie". Ważne, by definicje były zwięzłe i niezależne od siebie; jeśli jedna wynika z drugiej, lepiej opisać je w akapicie.

Punktowana lista równych rzeczy Lista punktowana sprawdza się przy wyliczaniu cech, składników, zalet i wad, przykładów. Każdy punkt powinien być zbudowany podobnie: zaczynać się od czasownika albo rzeczownika, mieć zbliżoną długość i kończyć się spójnie. Mieszanie pełnych zdań z równoważnikami rozsypuje rytm. Drugi częsty błąd to zagnieżdżanie listy w liście bez potrzeby — dwa poziomy to maksimum, a trzeci poziom prawie zawsze oznacza, że treść wymaga innego podziału.

Rozmiar czcionki w CSS można ustawić na kilka sposobów i każdy z nich zachowuje się inaczej przy zmianie ustawień przeglądarki lub rozmiaru okna. Najczęściej używane jednostki to px, em, rem, a obok nich procenty. Zrozumienie, co skaluje się z czym, pozwala uniknąć layoutu, który rozsypuje się u użytkownika powiększającego tekst.

Drugi częsty problem to zbyt wczesna walidacja po stronie przeglądarki. Atrybuty required, minlength czy pattern sprawdzają dane przed wysłaniem, ale nie zastępują weryfikacji na serwerze. Użytkownik może je obejść, a pola mogą przyjść puste lub w nieoczekiwanym formacie. Zawsze sprawdzaj dane ponownie po stronie serwera i nie ufaj temu, co przyszło z przeglądarki. Pamiętaj też, że type="email" sprawdza tylko ogólny kształt adresu, a nie to, czy skrzynka istnieje.

Formularz zaczyna się od znacznika . To on grupuje pola i decyduje, co stanie się z danymi po zatwierdzeniu. Dwa atrybuty robią najwięcej zamieszania: action wskazuje adres, pod który trafią dane, a method określa sposób ich przesłania — najczęściej GET albo POST. Bez action przeglądarka wyśle dane pod bieżący adres, co rzadko jest zamierzone. Bez method zadziała domyślne GET, przez co wartości pól wylądują w adresie strony. Do wysyłania haseł, plików i dłuższych treści używaj POST.

Pola tekstowe tworzysz znacznikiem , ustawiając atrybut type. Dla zwykłego tekstu to type="text", dla hasła type="password", dla adresu e-mail type="email", a dla liczby type="number". Każde pole powinno mieć atrybut name — to nazwa, pod którą wartość poleci do serwera. Bez name pole istnieje wizualnie, ale jego zawartość nie zostanie wysłana. Warto też dodać atrybut id i powiązany z nim znacznik . Kliknięcie w etykietę ustawia kursor w polu, co poprawia obsługę na telefonach i czytnikach ekranu.