Najprostsze i najbardziej przewidywalne rozwiązanie to usunięcie białych znaków w kodzie. Zamiast wstawiać elementy w osobnych liniach, zapisz je bezpośrednio obok siebie. HTML tego nie wymaga, ale przeglądarka nie wstawi wtedy żadnej spacji. Alternatywa to komentarz HTML między elementami — również eliminuje spację, choć zaśmieca źródło. Trzecia metoda to ustawienie na kontenerze font-size: 0 i przywrócenie rozmiaru w elementach potomnych. Działa, ale jeśli w środku znajduje się tekst bez własnego font-size, zniknie z ekranu.
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.
Nagłówki kolumn można dodatkowo opisać atrybutem scope. Wartość scope=”col” mówi, że dana komórka th opisuje całą kolumnę, a scope=”row” — cały wiersz. Dzięki temu technologie asystujące lepiej wiążą nagłówek z danymi. To prosty zabieg, który nie zmienia wyglądu, ale realnie poprawia jakość tabeli.
Nagłówki kolumn i wierszy — nie tylko pogrubiona czcionka Do nagłówków służy , a nie z pogrubieniem. Różnica jest praktyczna: przeglądarki i czytniki ekranu rozpoznają, że komórka opisuje zawartość, a nie ją przechowuje. Nagłówek kolumny umieszczasz w pierwszym wierszu, a nagłówek wiersza — w pierwszej komórce każdego wiersza. Gdy tabela ma złożoną budowę, dodaj atrybut scope o wartości col albo row. To jedno słowo potrafi zdecydować, czy osoba korzystająca z czytnika ekranu zrozumie, do czego odnoszą się dane.
Można spotkać się z pytaniem, czy etykieta może opisywać np. grupę pól wyboru (checkbox) lub przycisków radiowych. W HTML istnieje na to inne rozwiązanie: element fieldset z legendą. Fieldset grupuje powiązane pola, a legend nadaje grupie wspólny opis. To standardowe i zalecane podejście, które działa dobrze z technologiami asystującymi. Natomiast pojedyncze pola wewnątrz grupy nadal powinny mieć własne etykiety label, aby użytkownik wiedział, co dokładnie zaznacza.
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.
Typowe błędy to próba przypisania wielu wartości do atrybutu for, np. for=”pole1 pole2″. Taki zapis jest niepoprawny – przeglądarka zinterpretuje go jako jeden identyfikator zawierający spację, co zwykle nie zadziała. Inny częsty błąd to używanie tego samego identyfikatora dla kilku pól, co jest niedozwolone w HTML – id musi być unikalne w całym dokumencie. Kolejny problem to brak etykiety dla poszczególnych pól w grupie – użytkownik czytnika ekranu może nie wiedzieć, które pole jest które.
Lista definicji służy do czegoś innego niż dwa poprzednie formaty. Zestawia termin z jego objaśnieniem. Używaj jej w słowniczkach, glosariuszach, wyjaśnieniach pojęć na początku rozdziału. Kluczowa różnica: w liście punktowanej każdy element jest samodzielny, a w definicji każdy termin istnieje tylko po to, by go opisać. Typowy błąd to wrzucanie do definicji zwykłych haseł, które nie wymagają objaśnienia — wtedy format jest nadmiarowy. Drugi błąd to definicje nierówne długością: jeden termin opisany jednym zdaniem, inny akapitem. Czytelnik traci rytm i przestaje ufać, że lista jest kompletna.
Najczęstszy błąd to traktowanie tabeli jako narzędzia do rozplanowania strony. Siatka komórek świetnie nadaje się do zestawień liczbowych, harmonogramów czy porównań, ale do rozmieszczenia nagłówka, menu i stopki służą zupełnie inne mechanizmy. Tabela użyta do układu psuje kolejność czytania i utrudnia responsywność. Drugi typowy problem to ręczne ustawianie szerokości i wysokości komórek. Lepiej pozwolić, by zawartość naturalnie rozszerzała kolumny, a ewentualne obramowania i odstępy załatwić w arkuszu stylów.
Etykieta label w HTML służy do opisania pola formularza i powiązania go z konkretnym elementem. Standard HTML nie przewiduje jednak, aby jedna etykieta była przypisana do wielu pól jednocześnie. Atrybut for wskazuje na identyfikator (id) jednego elementu. Przeglądarki i czytniki ekranu interpretują to jednoznacznie: kliknięcie w etykietę aktywuje tylko to jedno pole. Jeśli więc zależy Ci na dostępności i poprawności kodu, nie próbuj łączyć kilku pól z jedną etykietą.
Podsumowując, jedna etykieta label nie może obejmować kilku pól naraz w standardowym HTML. Do grupowania pól służy fieldset z legendą, a każde pole powinno mieć własną etykietę. Jeśli potrzebujesz nietypowego zachowania, rozważ JavaScript, ale pamiętaj o dostępności i testach z użytkownikami. Zawsze sprawdzaj, czy rozwiązanie działa z klawiaturą i czytnikiem ekranu – to podstawa dobrego formularza.
If you loved this article and you would like to receive additional info about szczegóły kindly pay a visit to the webpage.