Tworzysz stronę, ale nie wiesz, kiedy użyć akapitów, nagłówków, linków albo sekcji? Ten artykuł wyjaśnia, jak działają znaczniki HTML, czym różnią się od elementów, które z nich powstają, oraz jak dobierać je do treści. Pokazuję też praktyczne przykłady, zasady semantyki, typowe błędy i elementy przydatne w codziennej pracy frontendowej.

Jak czytać znaczniki HTML i elementy dokumentu

Znacznik to zapis w nawiasach ostrych, na przykład

To jest akapit tekstu.

W tym przykładzie

Niektóre elementy nie mają osobnego znacznika zamykającego. Są to tak zwane elementy puste, ponieważ nie przechowują treści wewnątrz. Przykładami są:

W nowoczesnym HTML nie trzeba dopisywać ukośnika w stylu
, choć taka forma może pojawiać się w starszych materiałach. Najważniejsze jest poprawne użycie elementu i jego atrybutów, a nie sam styl zapisu.

Elementy powinny być też prawidłowo zagnieżdżone. Jeśli otwierasz jeden element wewnątrz drugiego, zamknij najpierw ten najbardziej wewnętrzny.

Ważna informacja

Niepoprawne zamykanie może czasem zostać „naprawione” przez przeglądarkę, ale nie warto na tym polegać. Przeglądarka wyświetli stronę, lecz nie zawsze zinterpretuje błędny kod tak, jak zakładasz.

Elementy, których używa się najczęściej

Na początku nauki nie potrzebujesz znać całej specyfikacji HTML. Kilkanaście dobrze dobranych elementów wystarcza do stworzenia większości prostych stron, artykułów i widoków aplikacji.

Nagłówki budują hierarchię treści

Nagłówki nie służą wyłącznie do powiększania tekstu. Tworzą strukturę dokumentu, dlatego powinny wynikać z ważności informacji. Zwykle strona ma jeden główny h1, a niższe poziomy opisują kolejne podsekcje.

Podstawy CSS
Selektory
Selektory klas
Model pudełkowy

Nie przeskakuję bez powodu z h2 do h4. Taka hierarchia jest łatwiejsza do zrozumienia dla czytników ekranu i osób skanujących tekst, a także ułatwia późniejszą rozbudowę artykułu.

Tekst, linki i listy

Element p służy do akapitów, strong podkreśla ważność treści, a em akcentuje fragment, który powinien być odczytany z naciskiem. Do zwykłego pogrubienia wynikającego wyłącznie z wyglądu lepiej użyć CSS niż traktować strong jak dekorację.

  Przed publikacją sprawdź adres e-mail.



  
Struktura HTML
  
Style CSS
  
Interakcje JavaScript

Element a potrzebuje najczęściej atrybutu href. Tekst linku powinien mówić, dokąd prowadzi, dlatego „przeczytaj więcej” jest słabsze niż „zobacz poradnik formularzy HTML”.

Semantyka HTML ma znaczenie większe niż wygląd

Semantyka oznacza dobieranie elementu zgodnie z jego znaczeniem. Jeśli fragment jest nawigacją, użyj nav. Jeśli zawiera niezależny artykuł, wybierz article. Dzięki temu kod mówi nie tylko, jak coś wyświetlić, ale także czym dana część strony jest.

Najczęściej używane elementy semantyczne to:

• header dla wprowadzenia strony lub sekcji,
• nav dla głównej nawigacji,
• main dla najważniejszej treści dokumentu,
• section dla tematycznie powiązanej części,
• article dla samodzielnej publikacji lub wpisu,
• aside dla treści pobocznej,
• footer dla informacji końcowych.

  



  

    
Jak zacząć naukę frontendu
    
Treść artykułu...
  

  

Częsty błąd polega na zastępowaniu wszystkiego elementem div. div jest przydatnym kontenerem bez własnego znaczenia, ale jeśli istnieje lepszy element, użycie go poprawia dostępność, utrzymanie kodu i komunikację z innymi programistami.

Semantyka nie daje automatycznie wysokiej pozycji w wynikach wyszukiwania. Pomaga jednak narzędziom zrozumieć strukturę strony, a poprawna struktura jest jednym z fundamentów dobrej dostępności i jakości frontendowej. Samo zamienienie każdego div na section też nie rozwiązuje problemu. Element powinien pasować do treści, a nie tylko wyglądać nowocześnie.

Obrazy, tabele i formularze bez typowych pułapek

Obrazy potrzebują tekstu alternatywnego

Element img służy do osadzania obrazu, a atrybut alt opisuje jego treść. Tekst alternatywny jest odczytywany przez czytniki ekranu i pojawia się wtedy, gdy plik nie może zostać załadowany.

Jeśli grafika jest wyłącznie dekoracyjna, pusty atrybut alt="" pozwala technologiom asystującym ją pominąć. Nie wpisuj tam „obrazek” ani nazwy pliku. Alt powinien przekazywać sens obrazu, a nie opisywać fakt jego istnienia.

Tabele są do danych, nie do układu strony

Tabela sprawdza się przy porównywaniu danych, na przykład elementów, atrybutów i ich zastosowań. Nagłówki kolumn powinny być zapisane za pomocą th, ponieważ zwiększa to czytelność także dla czytników ekranu.

  

    
Element
    
Rola
  
  

    
button
    
Uruchamia akcję
  

Budowanie całego układu strony z tabel było popularne wiele lat temu, ale dziś utrudnia responsywność i utrzymanie projektu. Do układu używa się CSS, przede wszystkim Flexboxa i CSS Grid.

Przeczytaj również: Minifikacja CSS - Jak przyspieszyć stronę i uniknąć błędów?

Formularz powinien prowadzić użytkownika

Formularze łączą kilka elementów: form, label, input, textarea, select i button. Najważniejsza zasada jest prosta: każda kontrolka powinna mieć widoczną etykietę albo poprawnie powiązany opis.

  Adres e-mail
  
  Zapisz się

Atrybut type="email" podpowiada przeglądarce rodzaj danych, a required oznacza, że pole jest obowiązkowe. Nie zastępuje to jednak walidacji po stronie serwera. Dane od użytkownika zawsze trzeba sprawdzać również po stronie backendu.

Atrybuty, CSS i JavaScript tworzą jeden interfejs

Znacznik opisuje rodzaj elementu, a atrybut dostarcza dodatkowych informacji. Przykładowo href wskazuje cel linku, src źródło obrazu, a class pozwala połączyć element ze stylami CSS lub kodem JavaScript.

Skontaktuj się

Nie należy mieszać odpowiedzialności poszczególnych technologii. HTML opisuje strukturę, CSS odpowiada za wygląd, a JavaScript obsługuje zachowanie i reakcje na działania użytkownika.

W praktyce można ostylować niemal dowolny element, ale nie oznacza to, że każdy element nadaje się do każdej funkcji. Klikalny fragment, który wykonuje akcję, powinien być przyciskiem, a przejście do innej strony powinno być linkiem.

Otwórz menu
Zobacz ofertę

Zastępowanie przycisku elementem div wymaga później dopisywania obsługi klawiatury, fokusu i odpowiednich ról ARIA. Zwykle jest to niepotrzebna praca. Natywny element daje wiele zachowań dostępnych od razu, dlatego zaczynam od niego, a dopiero potem sięgam po rozwiązania niestandardowe.

Najczęstsze błędy i prosty sposób ich unikania

• Używanie nagłówków do stylowania zamiast do budowania hierarchii treści.
• Brak atrybutu alt przy obrazach, które przekazują istotną informację.
• Niepoprawne zagnieżdżanie elementów i pomijanie zamykających znaczników.
• Stosowanie linku jako przycisku albo przycisku jako zwykłego odnośnika.
• Nadużywanie divów mimo dostępności lepiej dopasowanych elementów semantycznych.
• Wkładanie danych do tabeli stworzonej dla układu zamiast użycia CSS.

Dobrym nawykiem jest sprawdzanie kodu w walidatorze HTML oraz testowanie strony za pomocą samej klawiatury. Przejdź po elementach klawiszem Tab, zobacz, czy fokus jest widoczny, i sprawdź, czy formularz da się obsłużyć bez myszy.

Przy większym projekcie przydaje się też przegląd semantyki przed rozpoczęciem stylowania. Najpierw ustalam strukturę dokumentu, potem dodaję klasy i CSS. Im lepszy fundament HTML, tym mniej wyjątków w stylach i skryptach.

Od poprawnego znacznika do lepszego interfejsu

Najważniejsza zasada jest prosta: wybieraj element według jego znaczenia, a nie według domyślnego wyglądu w przeglądarce. To, że nagłówek jest duży, a przycisk ma określony kolor, wynika ze stylów. Jego rola wynika natomiast z HTML.

Na początek opanuj akapity, nagłówki, listy, linki, obrazy, formularze i elementy semantyczne. Gdy dodasz do tego poprawne atrybuty, logiczne zagnieżdżanie oraz podstawowe testy dostępności, będziesz tworzyć strony, które są nie tylko estetyczne, ale też zrozumiałe dla użytkowników, przeglądarek i narzędzi wspomagających.