Otwierasz plik strony i widzisz nawiasy ostre, tagi oraz atrybuty, ale nie wiesz, co właściwie robią? HTML to fundament każdej witryny, dlatego wyjaśniam jego znaczenie prostym językiem, pokazuję podstawową strukturę dokumentu i wskazuję, czym różni się od CSS oraz JavaScriptu.

HTML, czyli co to znaczy w praktyce

HTML to skrót od HyperText Markup Language. Po polsku można go przetłumaczyć jako język znaczników hipertekstowych. Pytanie „html co to znaczy” można więc sprowadzić do prostszej odpowiedzi: HTML opisuje, z czego składa się strona internetowa i jakie funkcje pełnią jej poszczególne fragmenty.

Nie jest to język programowania, ponieważ nie wykonuje obliczeń ani nie podejmuje decyzji w taki sposób jak Python czy JavaScript. HTML działa bardziej jak uporządkowany szkielet dokumentu. Informuje przeglądarkę, gdzie znajduje się tytuł, nagłówek, tekst, zdjęcie, odnośnik czy formularz.

Gdy przeglądarka pobiera plik HTML, analizuje jego strukturę i tworzy z niej model dokumentu nazywany DOM. To właśnie na tej podstawie wyświetla stronę na ekranie, przekazuje jej wygląd do CSS i pozwala skryptom JavaScript reagować na działania użytkownika.

HTML jest obecnie rozwijany jako tak zwany Living Standard, czyli standard aktualizowany na bieżąco. Określenie HTML5 nadal jest popularne i praktyczne, ale nie oznacza zupełnie osobnego języka działającego poza współczesnym standardem HTML.

Jak HTML buduje stronę z prostych elementów

Podstawową jednostką HTML jest element. Zwykle składa się on ze znacznika otwierającego, treści oraz znacznika zamykającego. Przykład akapitu wygląda tak:

To jest przykładowy akapit.

W tym przykładzie

Atrybut src wskazuje, skąd pobrać obraz, a alt zawiera jego opis. Ten drugi fragment ma duże znaczenie dla czytników ekranu i dostępności, a także pomaga zrozumieć zawartość grafiki, gdy obraz nie może się załadować.

Minimalny dokument HTML może wyglądać następująco:

  
    
    
  
  
    
Witaj na stronie
    
To mój pierwszy dokument HTML.
  

Element przechowuje informacje techniczne, między innymi tytuł dokumentu i kodowanie znaków. W sekcji znajduje się treść widoczna dla odwiedzającego. Sam zaczynam naukę właśnie od takiego prostego pliku, bo szybko pokazuje on zależność między kodem a efektem na ekranie.

W HTML elementy mogą być zagnieżdżone. Nagłówek i akapit znajdują się wewnątrz sekcji dokumentu, a lista może zawierać wiele pojedynczych elementów listy. Trzeba pilnować kolejności zamykania tagów, ponieważ nieuporządkowane zagnieżdżenia utrudniają przeglądarce interpretację kodu.

HTML, CSS i JavaScript robią różne rzeczy

Początkujący często mówią, że HTML „robi całą stronę”. W praktyce współczesna witryna zwykle powstaje dzięki współpracy trzech technologii. Każda ma inne zadanie, a pomieszanie ich ról szybko prowadzi do nieczytelnego kodu.

HTML odpowiada więc na pytanie co znajduje się na stronie, CSS mówi jak to wygląda, a JavaScript określa jak strona reaguje. Można zbudować dokument HTML bez CSS i JavaScriptu, ale będzie prosty wizualnie i pozbawiony wielu interaktywnych funkcji.

Ta separacja ma praktyczną zaletę. Jeśli chcę zmienić kolor wszystkich przycisków, nie edytuję każdego elementu HTML osobno. Przenoszę wygląd do CSS, dzięki czemu kod pozostaje krótszy, a zmiany są łatwiejsze do kontrolowania.

Semantyczny HTML pomaga ludziom i przeglądarkom

Nie każdy sposób zapisania treści jest równie dobry. Można zbudować stronę z samych elementów

, ale taki dokument niewiele mówi o znaczeniu poszczególnych fragmentów. Semantyczny HTML korzysta z tagów, które jasno określają rolę treści.

Zamiast tworzyć nagłówek za pomocą przypadkowego kontenera, lepiej użyć

,

lub kolejnego poziomu nagłówka. Dla głównej nawigacji właściwy będzie , dla artykułu

, a dla stopki .

• oznacza nagłówek strony lub sekcji.
• obejmuje główną treść dokumentu.
• wydziela tematyczną część strony.
• opisuje samodzielny materiał, na przykład wpis lub wiadomość.
• zawiera najważniejsze odnośniki nawigacyjne.
• przechowuje informacje końcowe.

Takie znaczniki nie są tylko kwestią estetyki kodu. Pomagają technologiom asystującym, ułatwiają robotom wyszukiwarek zrozumienie strony i pozwalają innym programistom szybciej odnaleźć potrzebny fragment.

W praktyce szczególnie ważna jest hierarchia nagłówków. Dokument powinien mieć jeden główny temat oznaczony przez

, a niższe poziomy powinny wynikać z jego struktury. Nie używam nagłówków wyłącznie po to, aby powiększyć tekst. Od tego służy CSS, natomiast HTML powinien opisywać znaczenie treści.

Podobnie działają linki. Element jest właściwym wyborem dla odnośnika prowadzącego do innej strony. Klikalny tekst powinien jasno informować, dokąd prowadzi, zamiast ograniczać się do ogólnego komunikatu „kliknij tutaj”.

Jak zacząć pisać HTML i uniknąć typowych błędów

Do rozpoczęcia nauki wystarczy zwykły edytor tekstu i przeglądarka. Plik zapisany z rozszerzeniem .html można otworzyć lokalnie, a każdą zmianę sprawdzić po odświeżeniu strony. Nie trzeba od razu instalować rozbudowanego środowiska programistycznego.

Najprostszy proces wygląda tak:

1. Utwórz plik, na przykład index.html.
2. Dodaj podstawową strukturę dokumentu.
3. Wstaw nagłówki, akapity, listy i linki.
4. Otwórz plik w przeglądarce.
5. Sprawdzaj kod małymi fragmentami, zamiast pisać całą stronę naraz.

Najczęstszy błąd polega na używaniu HTML do zadań, które powinny należeć do CSS. Wstawianie wielu spacji, pustych elementów albo atrybutów stylu tylko po to, by przesunąć tekst, daje szybki efekt, ale później utrudnia rozwój strony.

Drugim problemem jest pomijanie opisów obrazów, etykiet formularzy i logicznych nagłówków. Taka strona może wyglądać poprawnie na ekranie, jednak będzie mniej dostępna dla części użytkowników i trudniejsza do zrozumienia dla narzędzi automatycznych.

Trzeba też pamiętać, że przeglądarki są dość wyrozumiałe dla błędnego kodu. Strona może się wyświetlić mimo brakującego zamknięcia tagu, ale nie oznacza to, że dokument jest poprawny. Walidacja HTML pomaga wykryć błędy składni i problemy, które później mogłyby ujawnić się na innej przeglądarce lub urządzeniu.

Nie warto również zaczynać od zapamiętywania setek tagów. Na początku wystarczy dobrze opanować kilkanaście elementów, między innymi

,

, , ,

,

,

oraz elementy strukturalne. Ważniejsze od liczby poznanych znaczników jest rozumienie, kiedy i dlaczego użyć konkretnego elementu.

Dobry HTML to inwestycja w całą stronę

HTML nie jest dodatkiem do witryny, ale jej podstawową warstwą. To od niego zależy, czy treść ma logiczną strukturę, czy można ją łatwo rozbudować i czy użytkownicy korzystający z różnych urządzeń oraz technologii wspomagających odczytają ją bez przeszkód.

Jeżeli zapamiętasz jedną rzecz, niech będzie nią ta zasada: HTML opisuje znaczenie treści, CSS odpowiada za wygląd, a JavaScript za zachowanie strony. Taki podział od początku prowadzi do czystszego kodu i ułatwia późniejszą pracę nad serwisem.

Nie musisz znać całego standardu, aby zacząć. Wystarczy prosty dokument, kilka świadomie dobranych elementów i regularne sprawdzanie efektów. Z czasem zrozumiesz, że dobrze napisany HTML jest niewidocznym, ale bardzo ważnym szkieletem każdej nowoczesnej strony.