Co to jest HTML?

Język znaczników tworzący fundamenty internetu

HTML (HyperText Markup Language) to podstawowy standard zapisu treści i struktury dokumentów w sieci WWW, używany na stronach internetowych. Specyfikacja WHATWG nazywa go wprost "core markup language" i przypomina, że pierwotnie służył do semantycznego opisu prac naukowych. Z czasem ten sam kod zaczął obsługiwać sklepy, formularze, aplikacje i platformy społecznościowe, a każda z nich nadal wysyła do przeglądarki HTML jako szkielet.

Charakterystyczne właściwości języka znaczników

HTML przedstawia dokument jako drzewo elementów i tekstu, a każdy fragment otacza się tagiem otwierającym i zamykającym, np. <p> i </p> dla akapitu. Według WHATWG tagi muszą być zagnieżdżone jeden w drugim bez nakładania się, a część z nich można w określonych sytuacjach pominąć. Wyjątek stanowi 13 pozycji pustych (void elements), m.in. <img>, <br>, <input> i <meta>, które mają tylko tag otwierający.

Sam język nie wykonuje obliczeń ani operacji logicznych, bo jego rolą jest zapis struktury. Za działanie odpowiadają skrypty, zwykle w JavaScript, osadzane tagiem script i zdolne zmieniać model dokumentu (DOM) już po wczytaniu. Przeglądarka zamienia kod na drzewo DOM, a dopiero z niego powstaje widok, który ogląda użytkownik.

Budowa dokumentu HTML

Plik HTML składa się z deklaracji DOCTYPE i znacznika html z dwiema częściami, head i body, z których każda pełni inną funkcję:

• <head> - według specyfikacji "zbiór metadanych" całego pliku: tytuł karty przeglądarki (tag title, widoczny też w historii, zakładkach i wynikach Google), meta-description, odnośniki do arkuszy stylów CSS, skrypty JavaScript oraz instrukcje dla robotów
• <body> - zawartość właściwa, czyli wszystko, co widać w oknie: tekst, nagłówki, obrazy, filmy, formularze i elementy interaktywne

Przed tymi sekcjami stoi deklaracja <!DOCTYPE html>. WHATWG podaje, że jest wymagana z powodów historycznych: bez niej przeglądarki przechodzą w inny tryb wyświetlania (quirks mode), niezgodny z częścią specyfikacji. Obecna forma ma 15 znaków i nie zawiera numeru wersji języka.

Najczęściej używane znaczniki HTML

Do zbudowania prostej podstrony wystarcza kilkanaście tagów, które pozwalają tworzyć funkcjonalne strony internetowe bez zaawansowanych narzędzi:

• <h1> - <h6> - 6 stopni tytułów sekcji, każdy o poziomie równym cyfrze w nazwie; specyfikacja zaleca, by w spisie nagłówków był co najmniej jeden h1, a poprawna hierarchia pomaga czytnikom ekranu i wyszukiwarkom
• <p> - akapit, podstawowa jednostka tekstu
• <a> - z atrybutem href tworzy hiperłącze do innego dokumentu, pliku albo miejsca w tym samym tekście
• <img> - osadza grafikę wskazaną przez src, a alt podaje opis zastępczy dla osób, które obrazu nie widzą
• <ul>, <ol>, <li> - listy: w ul kolejność punktów nie zmienia sensu, w ol ma znaczenie
• <table> - dane w więcej niż jednym wymiarze, ułożone w rzędach i kolumnach, z nagłówkami w <thead> i wierszami danych w <tbody>

Ewolucja standardu od lat 90. do współczesności

HTML rozwija się od 1990 roku: przez pierwsze 5 lat, do 1995, przechodził kolejne wersje najpierw w CERN, a potem w IETF. Historia opisana w specyfikacji WHATWG wymienia te etapy:

• HTML 3.2 i HTML4 (1997) - po nieudanej próbie HTML 3.0 z 1995 roku W3C ukończyło HTML 3.2, a jeszcze w tym samym roku HTML4
• XHTML 1.0 (2000) - zapis HTML4 w składni XML, bez nowych funkcji, za to z rygorystyczną budową dokumentu
• WHATWG (2004) - Apple, Mozilla i Opera zaczęły rozwijać HTML dalej we własnej grupie roboczej, a W3C dołączyło do prac nad HTML5 w 2007 roku
• Living Standard (od 2011) - WHATWG utrzymuje specyfikację w trybie ciągłym, a w 2019 roku podpisała z W3C porozumienie o jednej, wspólnej wersji HTML

Dzisiejszy HTML zawiera natywne tagi <video> i <audio>, grafikę SVG oraz znaczniki semantyczne, takie jak <article>, <section> i <nav>. Film czy dźwięk osadzisz więc bez zewnętrznych wtyczek przeglądarki.

Rola HTML wśród technologii internetowych

HTML odpowiada za warstwę struktury, a obok niego pracują dwie inne technologie: CSS nadaje wygląd (kolory, czcionki, układ), JavaScript dodaje interakcję (animacje, walidację formularzy, dynamiczne ładowanie treści). Bez HTML pozostałe dwie nie miałyby czego ozdabiać ani uruchamiać.

Chrome, Firefox, Safari i Edge odczytują kod według wspólnego standardu, który od 2019 roku istnieje w jednej wersji: HTML Living Standard prowadzonym przez WHATWG we współpracy z W3C (World Wide Web Consortium). Dzięki temu dokument napisany raz wyświetla się poprawnie na różnych urządzeniach i systemach operacyjnych.

Praktyczne zastosowania w codziennej pracy developera

Twórcy stron używają HTML na każdym etapie projektu, od szkieletu podstron po formularze i multimedia. Typowa lista zadań obejmuje 5 obszarów:

• budowanie struktury projektów, od prostych landing page'y po rozbudowane sklepy internetowe
• tworzenie formularzy rejestracyjnych, kontaktowych i płatności z podstawową walidacją po stronie klienta
• osadzanie multimediów: filmów z YouTube, map Google i odtwarzaczy audio bez zewnętrznych wtyczek
• znakowanie treści według znaczenia, które pomaga w SEO i osobom z niepełnosprawnościami
• praca z systemami CMS (WordPress, Drupal), gdzie kod HTML powstaje automatycznie z szablonów

Znajomość HTML przydaje się także przy frameworkach JavaScript (React, Vue, Angular), bo ich wynikiem nadal jest kod HTML wysyłany do przeglądarki.

Semantyka i dostępność w HTML5

Współczesny HTML opisuje sens treści, a nie jej wygląd: specyfikacja WHATWG określa się jako język "na poziomie semantycznym" do tworzenia stron, które obsłużą także technologie wspomagające. Tagi tego rodzaju mają w niej jasne definicje. <header> to grupa pomocy wprowadzających lub nawigacyjnych, <footer> to stopka sekcji, <main> to główna część dokumentu (widoczny może być tylko 1 taki tag), a <aside> to fragment luźno związany z otoczeniem. Czytniki ekranu korzystają z tych informacji, więc osoba niewidoma od razu przeskoczy do zasadniczego tekstu.

Atrybuty ARIA (Accessible Rich Internet Applications) dodają informacje dla technologii asystujących tam, gdzie sam tag nie wystarcza. Przykładowo aria-label opisuje kontrolkę bez widocznego tekstu, a role precyzuje typ komponentu interfejsu.

Optymalizacja i wydajność kodu HTML

Czysty, dobrze zorganizowany kod HTML przyspiesza ładowanie strony i ułatwia jej odczyt robotom wyszukiwarek. Kilka praktyk, które opisuje specyfikacja lub które sprawdzisz w narzędziach:

• usuwanie zbędnych atrybutów i komentarzy przed publikacją, co zmniejsza rozmiar pliku
• loading="lazy" przy obrazach poza widocznym obszarem: według WHATWG odracza pobranie zasobu do spełnienia określonych warunków, domyślnie obowiązuje stan "eager"
• async i defer przy plikach JavaScript: pierwszy pobiera kod równolegle i uruchamia go zaraz po pobraniu, drugi czeka z wykonaniem na koniec przetwarzania dokumentu, a bez obu tag script wstrzymuje parsowanie
• sprawdzenie kodu w walidatorze W3C, bo błędy składni mogą dawać inne efekty w każdej przeglądarce

Narzędzia wspierające pracę z HTML

Do pisania kodu HTML służą edytory, takie jak Visual Studio Code, Sublime Text czy WebStorm, z podświetlaniem składni, uzupełnianiem tagów i podpowiedziami o błędach. Rozszerzenie Emmet rozwija krótkie skróty w całe struktury, np. wpis ul>li*3 zamienia w listę z 3 punktami.

Narzędzia deweloperskie w przeglądarkach (DevTools) pozwalają oglądać kod na żywo, testować zmiany bez edycji plików źródłowych i analizować renderowanie. Panel Elements pokazuje końcową strukturę DOM (Document Object Model) po wykonaniu wszystkich skryptów.

Perspektywy rozwoju HTML

Rozwój HTML idzie w stronę natywnych komponentów i ciągłych poprawek zamiast rzadkich, dużych wydań. Custom elements z pakietu Web Components pozwalają według WHATWG budować "w pełni funkcjonalne" własne węzły DOM bez frameworków, a HTML Living Standard otrzymuje zmiany na bieżąco, ostatnio 22 października 2026 roku.

Progressive Web Apps (PWA) i aplikacje działające offline korzystają z Service Workers i Cache Storage, a te nadal potrzebują dokumentu HTML jako punktu startu. HTML pozostaje więc warstwą prezentacji niezależną od backendu.