Język HTML

HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) to podstawowy język służący do tworzenia stron internetowych. Dzięki HTML możemy opisać strukturę i zawartość dokumentu w sposób zrozumiały dla przeglądarek. Każda strona WWW, od prostego dokumentu tekstowego po rozbudowane aplikacje, wykorzystuje HTML jako szkielet swojej budowy.

HTML jest językiem znaczników, co oznacza, że do opisu treści wykorzystuje specjalne znaczniki (tagi). Przeglądarka internetowa odczytuje te znaczniki i na ich podstawie wyświetla użytkownikowi sformatowaną zawartość strony. W odróżnieniu od języków programowania, HTML nie zawiera instrukcji warunkowych czy pętli – jego rola polega na opisie struktury dokumentu i określeniu, które elementy są nagłówkami, akapitami, listami, odnośnikami itp.

Poniższy artykuł stanowi obszerny przewodnik po HTML. Rozpoczynamy od historii HTML – jak powstał i ewoluował na przestrzeni lat. Następnie omawiamy podstawy składni HTML, gdzie wyjaśnimy kluczowe elementy i strukturę typowego dokumentu. Dalej przechodzimy do zaawansowanych technik, pokazując nowoczesne zastosowania HTML (semantykę, integrację z CSS i JavaScript, elementy multimedialne, formularze oraz kwestie dostępności). Na koniec przyjrzymy się różnicom między różnymi wersjami HTML – od starszych wydań po najnowszy HTML5.

Historia HTML

Początki HTML

Historia HTML rozpoczyna się pod koniec lat 80. Tim Berners-Lee, fizyk pracujący w ośrodku naukowym CERN, poszukiwał sposobu na usprawnienie dzielenia się informacjami. W 1989 roku Berners-Lee przedstawił koncepcję sieci World Wide Web, opartej na hipertekście – pomyśle pozwalającym połączyć ze sobą dokumenty za pomocą odnośników. Do realizacji tej wizji potrzebny był język umożliwiający opis struktury dokumentów oraz mechanizm przeglądania ich w sieci. Tak powstał prototyp HTML.

Pierwsza publiczna dokumentacja HTML ukazała się w 1991 roku pod nazwą “HTML Tags”. Zawierała zaledwie 22 znaczniki, opisujące podstawowe elementy języka. Były to proste tagi umożliwiające tworzenie nagłówków, akapitów, list czy odnośników. Choć zakres HTML na początku był ograniczony, już wtedy pozwalał na konstruowanie pierwszych stron internetowych o podstawowej strukturze.

HTML od samego początku bazował na idei SGML (Standard Generalized Markup Language) – metajęzyka służącego do definiowania języków znaczników. W praktyce jednak wczesne wersje HTML nie miały formalnie zdefiniowanej struktury zgodnej z SGML. Dopiero w 1993 roku opublikowano pierwszą propozycję specyfikacji HTML zawierającą formalny opis w postaci definicji typu dokumentu (DTD) SGML. Był to ważny krok w standaryzacji HTML, ponieważ dostarczył programistom i twórcom przeglądarek jasnych wytycznych co do składni języka.

Standardyzacja i rozwój w latach 90.

W początkowych latach rozwoju HTML duży wpływ na kształt języka mieli twórcy pierwszych przeglądarek. Nowe pomysły na elementy i możliwości HTML często najpierw pojawiały się w konkretnych przeglądarkach, zanim trafiały do oficjalnych specyfikacji. W 1994 roku powstała organizacja W3C (World Wide Web Consortium), kierowana przez Bernersa-Lee, która przejęła opiekę nad rozwojem standardu HTML.

Pierwszą oficjalną wersją stał się HTML 2.0, opublikowany w 1995 roku (specyfikacja RFC 1866). Uporządkował on dotychczasowe rozszerzenia i pomysły, tworząc jednolitą podstawę języka. Kolejna planowana wersja, HTML 3.0, okazała się zbyt ambitna i nigdy nie została w pełni zaimplementowana – zawierała m.in. propozycje obsługi matematyki czy zaawansowanego formatowania, których ówczesne przeglądarki nie były gotowe obsłużyć. Jednak wiele pomysłów z HTML 3.0 zostało przejętych przez producentów przeglądarek i w praktyce trafiło do użytku.

W efekcie w 1997 roku W3C wydało specyfikację HTML 3.2 (o nazwie kodowej “Wilbur”). Była to wersja dopasowana do tego, co faktycznie obsługiwały popularne wówczas przeglądarki (Netscape Navigator i Internet Explorer). HTML 3.2 wprowadził obsługę arkuszy stylów CSS w formie podstawowej (choć pełne wsparcie dla stylów nadeszło wraz z kolejnymi wersjami), ustandaryzował tabele, obrazki osadzane w tekście i inne elementy prezentacyjne.

Jeszcze w tym samym roku, pod koniec 1997, pojawił się HTML 4.0 – duży krok naprzód dla języka. HTML 4 wprowadził podział na trzy warianty doctype: Strict, Transitional i Frameset, co pozwoliło twórcom stron stopniowo przechodzić od starych, przestarzałych znaczników do nowych rozwiązań. W wersji Strict usunięto wsparcie dla elementów prezentacyjnych (jak <font> czy <center>) na rzecz użycia CSS. Wariant Transitional tymczasowo dopuszczał stare znaczniki dla zgodności wstecznej. Z kolei wariant Frameset umożliwiał tworzenie stron z ramkami. HTML 4 umocnił też rozdział treści od prezentacji – zachęcając do stosowania CSS do stylowania zamiast HTML do wyglądu.

Ostateczną poprawioną edycją tej generacji języka był HTML 4.01, wydany w grudniu 1999 roku, który skorygował drobne błędy specyfikacji 4.0. Na przełomie wieków HTML stał się również standardem ISO (ISO/IEC 15445:2000), co potwierdziło jego znaczenie jako globalnego standardu tworzenia stron WWW.

XHTML i przejście do nowoczesnego HTML5

Pod koniec lat 90. pojawiła się idea, by połączyć składnię HTML z rygorami XML – języka znaczników ogólnego przeznaczenia. Efektem było stworzenie XHTML 1.0 (2000 r.), czyli HTML 4.01 zapisany zgodnie z zasadami XML. XHTML wymagał bardziej restrykcyjnej składni: wszystkie tagi musiały być poprawnie zagnieżdżone i zamknięte, nazwy pisane małymi literami, a atrybuty ujęte w cudzysłów. Celem XHTML było uzyskanie czystszego, bardziej uporządkowanego kodu, który mógłby być łatwo przetwarzany przez różne urządzenia (np. przeglądarki mobilne) i narzędzia.

W kolejnych latach rozwój XHTML poszedł dwutorowo. Z jednej strony pojawił się XHTML 1.1 (2001 r.), stanowiący nieco ulepszoną wersję 1.0, ale już wymagający ściślejszego przestrzegania standardu (tylko wersja Strict). Z drugiej strony trwały prace nad XHTML 2.0, który miał być zupełnie nowym rozdaniem – niekompatybilnym wstecz z HTML4/XHTML1. Ostatecznie jednak XHTML 2.0 nigdy nie został ukończony ani wdrożony, a społeczność web developerska skierowała swoją uwagę gdzie indziej.

Na początku XXI wieku stało się jasne, że rozwój sieci wymaga nowych rozwiązań. Dynamiczne aplikacje webowe, multimedia i bogata interaktywność wykraczały poza możliwości klasycznego HTML 4. W 2004 roku powstała grupa WHATWG (Web Hypertext Application Technology Working Group), która postanowiła kontynuować rozwój HTML w kierunku obsługi nowoczesnych aplikacji internetowych. Współpracując później z W3C, opracowano specyfikację HTML5.

HTML5 początkowo rozwijany był jako zbiór ulepszeń do HTML4, skupiając się na semantyce i obsłudze multimediów. Oficjalny szkic HTML5 pojawił się w 2008 roku, a pierwsza pełna rekomendacja W3C została wydana w październiku 2014 roku. HTML5 wprowadził dziesiątki nowych elementów (m.in. semantyczne elementy nagłówka, stopki, artykułu, sekcji, a także <video>, <audio>, <canvas>), znacznie rozszerzył możliwości formularzy i interfejsów API dla przeglądarek. Ważne było też odejście od uzależnienia od SGML – nowy HTML definiuje własne zasady składni i jest bardziej elastyczny w interpretacji błędów, co ułatwia przeglądarkom poprawne wyświetlanie nawet nieidealnego kodu.

Wraz z HTML5 nastąpiła zmiana modelu rozwoju standardu. Zamiast publikować kolejne duże wersje (HTML6, HTML7 itd.), zdecydowano się na model living standard – żywego standardu, który jest stale aktualizowany. Obecnie za rozwój specyfikacji HTML odpowiada WHATWG we współpracy z W3C, a HTML5 stanowi fundament nowoczesnego Webu, ciągle wzbogacany o nowe funkcje wraz z rozwojem technologii.

Podstawy składni HTML

Struktura dokumentu HTML

Każdy dokument HTML musi mieć określoną strukturę, dzięki której przeglądarka zrozumie, jak interpretować zawartość. Na początek należy zadeklarować typ dokumentu, a następnie umieścić całą zawartość strony wewnątrz głównego elementu <html>. Wewnątrz niego wyróżniamy dwie zasadnicze części: nagłówek dokumentu oraz jego ciało. Poniżej przedstawiono uproszczony schemat minimalnej strony HTML:

htmlKopiuj<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykładowa strona</title>
</head>
<body>
    <h1>Witamy!</h1>
    <p>To jest przykładowa strona HTML.</p>
</body>
</html>

Wyjaśnijmy pokrótce powyższą strukturę. Pierwsza linia to deklaracja typu dokumentu (<!DOCTYPE html>), która informuje przeglądarkę, że ma do czynienia z dokumentem HTML (we współczesnych stronach zawsze używamy tej krótkiej deklaracji dla HTML5). Następnie otwierający tag <html lang="pl"> rozpoczyna właściwy dokument HTML i ustawia atrybut lang określający język zawartości (tu: polski). Wszystko, co znajduje się poniżej, jest częścią tego elementu <html> aż do zamykającego </html> na końcu pliku.

Sekcja <head> (nagłówek dokumentu) służy do umieszczenia informacji o stronie, które nie są bezpośrednio wyświetlane w treści. W naszym przykładzie w sekcji <head> znajdują się meta-dane o kodowaniu znaków (<meta charset="UTF-8">, co zapewnia prawidłowe wyświetlanie polskich znaków) oraz tytuł strony określony przez znacznik <title>. Tytuł ten pojawia się na karcie (zakładce) przeglądarki lub w jej belce tytułowej, ale nie w samej treści strony.

Część <body> (ciało dokumentu) zawiera właściwą treść strony, która będzie widoczna dla użytkowników. W powyższym przykładzie w <body> umieszczono nagłówek pierwszego poziomu <h1> z tekstem „Witamy!” oraz akapit tekstu <p>. Wszystko, co ma być wyświetlone na stronie (teksty, obrazy, odnośniki, listy, itp.), powinno znajdować się właśnie wewnątrz znacznika <body>.

Elementy i znaczniki HTML

HTML składa się z wielu różnych elementów, z których każdy opisuje inny rodzaj treści lub struktury. Element HTML zazwyczaj składa się z otwierającego znacznika (tagu), zamykającego znacznika oraz treści pomiędzy nimi. Przykładowo element akapitu to otwierający tag <p>, dowolny tekst akapitu i zamykający tag </p>. Struktura takiego elementu wygląda następująco:

htmlKopiuj<p>Przykładowy tekst akapitu.</p>

Większość znaczników występuje w parach otwierający/zamykający, choć są też elementy samodomykające (np. znacznik obrazu <img> czy linia pozioma <hr>, które w HTML5 nie wymagają osobnego zamknięcia tagiem </img>). Ważne jest poprawne zagnieżdżanie elementów – np. jeśli w akapicie mamy pogrubiony fragment tekstu <strong>, to przed zamknięciem akapitu musimy najpierw zamknąć pogrubienie (</strong></p>). Przeglądarki internetowe zazwyczaj wybaczają drobne błędy w zagnieżdżaniu, ale pisząc kod HTML warto trzymać się ścisłej hierarchii elementów dla zachowania porządku.

Elementy HTML dzielą się na blokowe i inline (wewnątrz linii). Elementy blokowe (np. akapit, nagłówek, lista) zajmują całą szerokość dostępnego obszaru i zwykle rozpoczynają się od nowej linii. Z kolei elementy inline (np. link w tekście, pogrubienie, obraz w akapicie) są częścią bieżącej linii tekstu i nie przerywają jej ciągłości. Zrozumienie tego podziału pomaga w przewidywaniu, jak dane znaczniki wpłyną na układ strony.

Atrybuty HTML

Wiele elementów HTML może posiadać atrybuty, czyli dodatkowe informacje umieszczone wewnątrz znacznika otwierającego. Atrybut składa się z nazwy i przypisanej do niej wartości, rozdzielonych znakiem równości (np. nazwa="wartość"). Atrybuty pozwalają doprecyzować właściwości elementu – na przykład określić adres odnośnika, źródło obrazka, identyfikator elementu czy dodatkowe wskazówki dla przeglądarki.

Przykładowo, znacznik linku <a> (anchor) wykorzystuje atrybut href, aby wskazać adres URL, do którego ma prowadzić dany odnośnik:

htmlKopiuj<a href="https://przyklad.pl">Kliknij tutaj</a>

W powyższym przykładzie atrybut href zawiera adres strony, do której przeniesie nas kliknięcie w link tekstowy „Kliknij tutaj”. Inny powszechny atrybut to src (source) używany w znaczniku obrazu <img> do podania ścieżki do pliku obrazka, np. <img src="obrazek.jpg" alt="Opis obrazka">. Atrybut alt (alternative text) w elemencie <img> służy do podania tekstu alternatywnego dla obrazka, wyświetlanego gdy obraz nie może zostać załadowany lub odczytywanego przez technologie asystujące (co ma znaczenie dla dostępności strony).

Warto wspomnieć o atrybutach id oraz class, które nie wpływają bezpośrednio na wygląd czy treść elementu, ale służą do jego identyfikacji. Atrybut id nadaje elementowi unikalny identyfikator w dokumencie (przydatny np. do stylowania CSS lub obsługi przez skrypty JS), a atrybut class pozwala przypisać element do określonej klasy (grupy elementów) w celu zbiorczego stylowania lub obsługi skryptami.

Najważniejsze znaczniki HTML

Poniżej wymieniono kilka najważniejszych znaczników HTML i ich zastosowanie:

• Dokument HTML (<html>): Główny kontener dla całego dokumentu HTML. Wszelkie inne elementy strony znajdują się wewnątrz tego znacznika (poza deklaracją doctype).
• Nagłówek dokumentu (<head>): Sekcja przechowująca informacje o stronie (metadane, tytuł, odnośniki do stylów CSS, skryptów itp.). Zawartość <head> nie jest wyświetlana bezpośrednio na stronie.
• Tytuł strony (<title>): Określa tytuł dokumentu wyświetlany na karcie przeglądarki lub w wynikach wyszukiwania. Znacznik ten występuje wewnątrz <head>.
• Ciało strony (<body>): Zawiera zasadniczą treść strony, która będzie widoczna dla użytkownika w oknie przeglądarki.
• Nagłówki (<h1> do <h6>): Sześć poziomów nagłówków, gdzie <h1> oznacza tytuł najwyższego poziomu (najważniejszy), a <h6> najmniejszy nagłówek. Służą do tytułowania sekcji i rozdziałów tekstu.
• Akapit (<p>): Definiuje akapit tekstu. Przeglądarki domyślnie oddzielają kolejne akapity odstępem pionowym.
• Odnośnik (hiperłącze) (<a>): Tworzy link (hipertekstowy odnośnik) do innej strony lub miejsca w dokumencie. Wymaga atrybutu href z adresem URL docelowym. Tekst lub obraz zawarty między <a> a </a> staje się klikalnym odnośnikiem.
• Obraz (<img>): Wstawia obrazek w treści strony. Główne atrybuty to src (ścieżka do pliku graficznego) oraz alt (opis alternatywny).
• Lista nieuporządkowana (<ul>) i lista uporządkowana (<ol>): Pozwalają tworzyć listy wypunktowane (<ul>) lub numerowane (<ol>). Poszczególne pozycje listy oznacza się znakiem <li> (list item).
• Tabela (<table>): Umożliwia tworzenie tabel do prezentacji danych w układzie wierszy i kolumn. Wewnątrz <table> definiujemy wiersze (<tr>) oraz komórki tabeli (<td>). Nagłówki tabeli można oznaczyć znacznikiem <th>.
• Sekcja/Grupa (<div> i <span>): Uniwersalne znaczniki do grupowania elementów. <div> jest elementem blokowym (np. do wydzielenia większego bloku zawartości), a <span> to element inline (np. do zaznaczenia fragmentu tekstu). Służą głównie do celów stylowania lub skryptów, gdy brak jest bardziej semantycznego znacznika dla danej treści.

Oczywiście HTML posiada wiele innych elementów (takich jak formularze, znaczniki semantyczne, elementy multimedialne i inne), o których wspomnimy w dalszej części artykułu. Powyższe należą jednak do absolutnych podstaw i znajomość ich jest niezbędna przy tworzeniu nawet najprostszej strony internetowej.

Zaawansowane techniki HTML

Semantyczny HTML

We wczesnych latach rozwoju internetu deweloperzy często używali ogólnych znaczników (takich jak <div> czy <span>) do tworzenia struktury strony, nadając im znaczenie poprzez klasy lub identyfikatory. Semantyczny HTML to podejście, w którym wykorzystujemy znaczniki zgodnie z ich przeznaczeniem semantycznym – czyli znaczenie wynika już z samej nazwy elementu. Zamiast nadużywać pustych kontenerów, HTML5 wprowadził wiele nowych elementów semantycznych, które opisują określone fragmenty strony w sposób znaczący dla przeglądarek i innych narzędzi.

Przykładowo, zamiast używać wielu <div> do podziału strony na sekcje, możemy skorzystać z elementów takich jak <header> (nagłówek strony lub sekcji), <nav> (nawigacja), <main> (główna treść), <section> (sekcja tematyczna), <article> (np. samodzielny artykuł lub wpis), <aside> (treści poboczne, np. panel boczny) czy <footer> (stopka). Te nazwy jasno wskazują, jaką rolę pełni dany fragment zawartości. Ułatwia to zarówno czytelność kodu, jak i działanie automatów przetwarzających strony (np. wyszukiwarek internetowych czy czytników ekranu dla osób niewidomych).

Semantyczne podejście dotyczy nie tylko struktury strony, ale także pojedynczych elementów tekstu. Na przykład dla podkreślenia ważności tekstu powinniśmy użyć znacznika <strong> (oznaczającego silne zaakcentowanie), zamiast czysto wizualnego <b> (który tylko pogrubia tekst, nie nadając mu dodatkowego znaczenia). Podobnie <em> (emfaza) jest preferowane wobec <i> (kursywa) w celu wyróżnienia fragmentu tekstu. Dzięki temu przeglądarki i narzędzia asystujące mogą właściwie interpretować i przedstawiać zawartość – np. czytnik ekranu odczyta tekst oznaczony <strong> z odpowiednią intonacją jako istotny.

Stosowanie semantycznego HTML sprawia, że strona jest bardziej przyjazna dla SEO (wyszukiwarki lepiej rozumieją strukturę informacji) oraz łatwiejsza w utrzymaniu i rozwoju. Gdy kod HTML niesie informację o znaczeniu treści, można go efektywniej stylować za pomocą CSS i obsługiwać skryptami, a także zapewnić lepszą dostępność dla wszystkich użytkowników.

Integracja z CSS i JavaScript

Nowoczesne strony internetowe rzadko ograniczają się do czystego HTML – zazwyczaj towarzyszą mu arkusze stylów CSS nadające wygląd oraz skrypty JavaScript zapewniające interaktywność. HTML został zaprojektowany tak, by łatwo integrował się z tymi technologiami.

CSS (Cascading Style Sheets) – Arkusze stylów służą do definiowania wyglądu strony (kolorów, czcionek, układu itp.). HTML umożliwia włączenie CSS na kilka sposobów: poprzez dołączenie zewnętrznego pliku .css za pomocą znacznika <link> w sekcji <head>, osadzenie stylów w kodzie HTML w sekcji <style> lub użycie atrybutu style bezpośrednio w znaczniku elementu (choć ostatnia metoda jest odradzana z uwagi na utrudnioną konserwację kodu). Dzięki CSS możemy oddzielić warstwę prezentacji od struktury – ten sam HTML może być prezentowany w różny sposób poprzez podmianę arkusza stylów. Przykładowo, możemy nadać wszystkim akapitom <p> określony kolor i marginesy, albo ustawić tło nagłówka strony, bez modyfikowania samego HTML, a jedynie poprzez reguły CSS.

JavaScript – Jest to język skryptowy uruchamiany po stronie klienta (w przeglądarce), który pozwala tchnąć życie w statyczne strony HTML. Za pomocą JavaScript można reagować na działania użytkownika (np. kliknięcia, wprowadzanie tekstu), modyfikować dynamicznie strukturę dokumentu (dodawać lub usuwać elementy HTML), wykonywać obliczenia, pobierać dane z serwera bez przeładowania strony (AJAX) i wiele więcej. W HTML integracja JavaScript odbywa się przez umieszczenie kodu w znaczniku <script> (bezpośrednio w HTML lub poprzez odwołanie w atrybucie src do zewnętrznego pliku .js). Najczęściej skrypty umieszczane są na końcu sekcji <body> lub w <head> z atrybutem defer, aby najpierw załadować strukturę strony, a dopiero potem wykonywać skrypty. Przykładowy fragment HTML z osadzonym skryptem może wyglądać tak:

htmlKopiuj<button onclick="alert('Witaj!')">Kliknij mnie</button>

W powyższym kodzie umieszczono przycisk <button> z atrybutem onclick, który powoduje wykonanie funkcji alert() (wyświetlającej okienko z komunikatem) po kliknięciu. To prosty przykład interakcji za pomocą JavaScript. W praktyce skrypty są często bardziej rozbudowane i znajdują się w osobnych plikach, ale HTML dostarcza mechanizmy do ich łatwej integracji z treścią strony.

Elementy multimedialne

Współczesny HTML5 rozszerzył możliwości osadzania multimediów bez konieczności użycia zewnętrznych wtyczek. Do umieszczania na stronie filmów wideo służy element <video>, a do audio element <audio>. Pozwalają one odtwarzać odpowiednio pliki video i audio wprost na stronie, dając kontrolę nad odtwarzaniem (pauza, play, pasek postępu, głośność itp.) poprzez wbudowane w przeglądarkę kontrolki lub interfejs programistyczny JavaScript.

Przykład użycia elementu <video>:

htmlKopiuj<video src="przyklad.mp4" width="640" controls poster="placeholder.jpg">
  Twoja przeglądarka nie obsługuje elementu video.
</video>

W powyższym kodzie <video> osadza plik przyklad.mp4 o szerokości 640 pikseli i włącza domyślne kontrolki (atrybut controls). Atrybut poster określa obraz, który ma być wyświetlany przed rozpoczęciem odtwarzania (np. miniaturka filmu). Treść zawarta wewnątrz <video>...</video> („Twoja przeglądarka nie obsługuje elementu video.”) zostanie pokazana użytkownikom, których przeglądarka nie wspiera tego elementu (np. bardzo stara przeglądarka).

Element <audio> działa analogicznie dla dźwięku:

htmlKopiuj<audio controls>
  <source src="muzyka.mp3" type="audio/mpeg">
  <source src="muzyka.ogg" type="audio/ogg">
  Twoja przeglądarka nie obsługuje odtwarzania audio.
</audio>

Tutaj element <audio> zawiera wewnątrz znaczniki <source>, które podają różne formaty pliku dźwiękowego (MP3 i OGG). Przeglądarka wybierze pierwszy obsługiwany format. Treść tekstowa w środku <audio> pełni podobną rolę jak w <video> – pojawi się, jeśli przeglądarka nie potrafi odtworzyć żadnego ze źródeł.

Oprócz audio i wideo, HTML5 umożliwia też osadzanie innych zaawansowanych treści multimedialnych i interaktywnych. Na przykład element <canvas> zapewnia obszar, na którym za pomocą JavaScript można rysować grafiki i animacje generowane dynamicznie (np. wykresy, gry). Istnieje też obsługa grafiki wektorowej SVG poprzez bezpośrednie wstawienie kodu SVG do dokumentu HTML lub użycie znacznika <img> ze źródłem SVG. Dzięki tym możliwościom, wiele funkcjonalności, które kiedyś wymagały technologii Flash lub apletów Javy, obecnie można zrealizować czystym HTML5 wraz z CSS i JavaScript.

Formularze HTML

Formularze to kluczowy element interaktywny stron internetowych, umożliwiający zbieranie danych od użytkowników. HTML udostępnia rozbudowany zestaw elementów do tworzenia formularzy, które pozwalają na wpisywanie tekstu, wybieranie opcji, wysyłanie plików i wiele więcej.

Podstawę formularza stanowi znacznik <form>, który otacza całość formularza i określa m.in. adres docelowy danych (atrybut action z URL do skryptu obsługującego dane na serwerze) oraz metodę przesyłania (method, zazwyczaj GET lub POST). Wewnątrz <form> umieszczamy elementy formularza takie jak pola tekstowe, przyciski itp.

Najczęściej używanym elementem formularza jest <input>, który w zależności od atrybutu type może pełnić różne funkcje:

• type="text" – jednolinijkowe pole tekstowe do wprowadzania krótkich tekstów,
• type="password" – pole tekstowe do wpisywania haseł (znaki są maskowane),
• type="checkbox" – pole wyboru (checkbox) do zaznaczania opcji,
• type="radio" – przycisk radiowy pozwalający wybrać jedną opcję z grupy,
• type="submit" – przycisk wysyłający formularz.

HTML5 wprowadził wiele nowych typów input, które znacznie ułatwiają tworzenie i walidację formularzy po stronie klienta:

• type="email", type="url" – pola tekstowe z walidacją poprawności adresu email/URL,
• type="number", type="range" – pola numeryczne (liczbowe) lub suwak do wyboru zakresu,
• type="date", type="datetime-local", type="time" – specjalne kontrolki do wyboru daty i/lub czasu,
• type="color" – pole wyboru koloru (otwiera np. systemowy selektor palety barw).

Ponadto doszły pomocnicze atrybuty: placeholder (podpowiedź wyświetlana w pustym polu, np. szare hasło „Wpisz swój email…”), required (oznacza, że pole jest obowiązkowe i przeglądarka nie pozwoli wysłać formularza, dopóki nie zostanie wypełnione) oraz pattern (pozwala zdefiniować wyrażenie regularne dla walidacji zawartości pola). Dzięki nim wiele podstawowych sprawdzeń poprawności danych można wykonać po stronie klienta bez użycia JavaScript.

Oprócz pól <input>, w formularzach używa się także elementu <textarea> do wpisywania dłuższych tekstów (wieloliniowe pole tekstowe), <select> wraz z <option> do tworzenia list rozwijanych oraz <button> do definiowania przycisków (np. alternatywny sposób wysłania formularza lub przycisk resetujący pola).

Aby formularz był przyjazny użytkownikom i dostępny, istotne jest prawidłowe oznaczanie pól formularza. Służy do tego znacznik <label>, który etykietuje element (najczęściej pole formularza). Poprzez atrybut for w <label> można powiązać etykietę z konkretnym polem (należy wówczas nadać temu polu odpowiedni id), dzięki czemu kliknięcie na tekst etykiety ustawia fokus w odpowiednim polu. Dobrze zorganizowany formularz z opisanymi polami jest łatwiejszy w użyciu i lepiej rozumiany przez technologie asystujące.

Dostępność stron (Accessibility)

Tworząc strony internetowe, warto pamiętać o tym, aby były one dostępne dla jak najszerszego grona użytkowników, w tym osób z niepełnosprawnościami. HTML dostarcza szeregu możliwości, by poprawić dostępność (ang. accessibility) serwisu już na etapie pisania kodu.

Jednym z podstawowych zaleceń jest zapewnienie tekstów alternatywnych dla treści nie-tekstowych. Jak wspomniano wcześniej, atrybut alt w znaczniku <img> powinien zawierać opis obrazka – pozwoli to odczytać tę informację osobom niewidomym (korzystającym z czytników ekranu) lub wyświetlić ją, gdy obraz nie może się załadować. Podobnie dla elementów audio/wideo warto dostarczać transkrypcje lub napisy.

Kolejnym aspektem jest poprawne używanie nagłówków (<h1>…<h6>) do strukturyzowania zawartości. Sekwencyjne i logiczne stosowanie nagłówków sprawia, że osoba korzystająca z czytnika ekranu może łatwo przeskakiwać między sekcjami strony i rozumieć hierarchię informacji. Nie należy pomijać nagłówków (np. nie zaczynamy od <h3> pomijając <h2>) czysto dla celów wizualnych – jeśli jakiś fragment jest wizualnie pomniejszonym nagłówkiem, lepiej użyć CSS do zmniejszenia jego wyglądu, zamiast zaburzać kolejność znaczników nagłówkowych.

Formularze również wymagają dbałości o dostępność: każdy element formularza powinien mieć powiązaną etykietę (<label>), jak opisano wyżej, co ułatwia zrozumienie jego funkcji. Dodatkowo można używać atrybutów ARIA (Accessible Rich Internet Applications) dla dynamicznych lub nietypowych komponentów interfejsu – na przykład oznaczać role elementów (navigation, button, main itp.) lub stany (np. expanded, disabled), aby użytkownicy korzystający z technologii asystujących otrzymali poprawne komunikaty.

Ważne jest także zapewnienie wystarczającego kontrastu kolorów między tekstem a tłem, aby osoby słabowidzące mogły bez trudu odczytać treść. Chociaż samo to zagadnienie leży już po stronie stylowania (CSS), rolą HTML jest właściwe oznaczenie struktury dokumentu – np. unikanie osadzania istotnych informacji wyłącznie w obrazkach, bez tekstowej alternatywy.

Podsumowując, pisząc kod HTML należy myśleć nie tylko o tym, jak strona wygląda, ale czy jest zrozumiała i użyteczna dla każdego. Stosowanie semantycznych znaczników, dostarczanie opisów alternatywnych i przemyślana struktura dokumentu sprawiają, że strona spełnia standardy dostępności, co często bywa również wymogiem prawnym dla witryn publicznych. Dzięki takiemu podejściu z naszej strony skorzysta więcej osób, a jej zawartość będzie lepiej interpretowana przez różnorodne urządzenia i oprogramowanie.

Różnice między wersjami HTML

HTML 3.2

HTML 3.2 (1997) był pierwszym standardem HTML wydanym przez W3C i stanowił ujednolicenie wielu dotychczas stosowanych rozszerzeń języka, które wykraczały poza wcześniejszą wersję 2.0. W porównaniu do HTML 2.0 (1995) wprowadzono obsługę tabel (<table> i powiązanych znaczników <tr>, <td>), co umożliwiło lepsze prezentowanie danych w układzie siatki. Dodano także znaczniki pozwalające na bardziej zaawansowane formatowanie tekstu i elementów na stronie – pojawił się m.in. znacznik <font> do zmiany kroju i koloru czcionki oraz <center> do centrowania zawartości. HTML 3.2 uwzględnił powszechnie używane w tamtym czasie rozszerzenia przeglądarek (np. elementy Netscape) i ujął je w oficjalny standard.

Mimo dodania nowych możliwości, HTML 3.2 wciąż opierał się głównie na znacznikach prezentacyjnych (dekoracyjnych) i nie rozdzielał wyraźnie struktury od wyglądu. Arkusze stylów CSS dopiero raczkowały – specyfikacja HTML 3.2 wspominała o nich, ale pełne wsparcie dla stylowania za pomocą CSS miało nadejść w kolejnej wersji HTML. Nie istniało wówczas wsparcie dla ramek (podziału okna przeglądarki na niezależne okna), ta funkcjonalność miała dopiero zostać ustandaryzowana później.

HTML 4.01

HTML 4.0 (grudzień 1997) oraz jego poprawiona edycja HTML 4.01 (1999) przyniosły duże zmiany w stosunku do HTML 3.2. Przede wszystkim położono nacisk na rozdzielenie treści od prezentacji poprzez pełne wsparcie dla CSS. Wprowadzono wiele elementów i atrybutów związanych ze stylowaniem stron za pomocą arkuszy stylów, a jednocześnie uznano za przestarzałe (deprecated) część znaczników czysto prezentacyjnych z poprzednich wersji. Na przykład zachęcano do niestosowania <font> czy <center> (choć w trybie zgodności wstecznej nadal były one dozwolone), zalecając zamiast tego użycie CSS do formatowania tekstu i układu.

HTML 4 dodał również mechanizmy zwiększające interaktywność i multimedialność stron. Pojawiły się ramki – za pomocą znaczników <frameset> i <frame> można było dzielić ekran na kilka niezależnie przewijanych sekcji (choć z perspektywy czasu ramki okazały się ślepą uliczką projektowania web). Wprowadzono znacznik <iframe> umożliwiający osadzanie jednej strony w innej (np. do wstawienia zawartości z zewnętrznego źródła w ramach strony). Rozbudowano możliwości formularzy – dodano elementy takie jak <fieldset> (grupowanie pól formularza z podpisem <legend>) czy przycisk <button> (alternatywa dla <input type="submit"> dająca więcej możliwości formatowania zawartości przycisku).

HTML 4 poszerzył też zakres semantyczny i strukturalny języka. Pojawiły się kontenery <div> i <span> – uniwersalne znaczniki blokowe i liniowe, które nie niosły własnego znaczenia semantycznego, ale były przeznaczone do celów stylowania (wraz z CSS) i skryptów. Dodano atrybut id (unikalny identyfikator elementu) oraz class (klasyfikacja elementu), które odegrały kluczową rolę w zastosowaniu CSS i JavaScript. HTML 4 ujednolicił również podejście do obsługi międzynarodowych znaków i języków – umożliwiając m.in. określenie języka dokumentu czy kodowania znaków (poprzez znacznik <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> w HTML 4.01 lub odpowiednie nagłówki HTTP).

Istotną nowością w HTML 4 było zdefiniowanie trybów zgodności dokumentu poprzez różne definicje typu dokumentu (DTD). Autor strony mógł wybrać doctype Strict (bezwzględnie zgodny z nowym standardem, bez starych elementów), Transitional (pozwalający używać starszych, przestarzałych znaczników dla łatwiejszej migracji) lub Frameset (dla stron wykorzystujących ramki). W zależności od wybranego DTD, przeglądarki renderowały stronę w trybie standardowym lub w trybie wstecznej kompatybilności (quirks mode), co wpływało na interpretację modelu pudełkowego i innych aspektów. HTML 4.01 stał się bardzo kompletnym, dopracowanym standardem i przez wiele lat stanowił podstawę tworzenia stron WWW.

XHTML 1.0

Na przełomie wieków nastąpił zwrot w kierunku większej rygorystyczności składni. XHTML 1.0 (2000) to zasadniczo HTML 4.01 przepisany zgodnie z regułami XML. Oznaczało to, że dokument XHTML musiał być bezbłędnie zbudowany niczym dokument XML: każdy otwarty znacznik musiał zostać zamknięty (np. <br /> zamiast samodzielnego <br>), atrybuty powinny mieć zawsze wartości w cudzysłowach, tagi zagnieżdżone musiały być poprawnie ułożone hierarchicznie, a nazwy znaczników pisane były małymi literami.

Z punktu widzenia dostępnych elementów i funkcjonalności, XHTML 1.0 nie dodawał nic nowego względem HTML 4.01 – był to ten sam zestaw tagów i atrybutów. Różnica tkwiła w podejściu do pisania kodu. Dokumenty XHTML 1.0 Strict pozbawione były wszystkich przestarzałych elementów (analogicznie do HTML 4.01 Strict), a wersje Transitional i Frameset umożliwiały ich stosowanie podobnie jak w HTML 4. Ważnym aspektem było jednak to, że kod musiał być poprawny składniowo, inaczej przeglądarka XML (a także narzędzia przetwarzające XML) nie wyświetli dokumentu wcale, zgłaszając błąd. Zmuszało to twórców do większej dyscypliny (np. nie można było zapomnieć o zamknięciu akapitu czy cudzysłowie w atrykucie, co w starym HTML często uchodziło na sucho).

Wprowadzenie XHTML 1.0 miało przygotować grunt pod przyszłe, jeszcze bardziej XML-owe wersje (planowany XHTML 2.0). W praktyce jednak wiele stron implementowało XHTML 1.0 tylko częściowo – wykorzystując nową, stricte poprawną składnię, ale nadal serwując strony z nagłówkiem text/html i traktując je przez przeglądarki jak zwykły HTML. Dzięki temu niezachowanie pełnej poprawności XML nie zawsze skutkowało błędem (bo przeglądarki w trybie zgodności wciąż tolerowały drobne uchybienia). XHTML 1.0 zyskał popularność wśród twórców stron jako bardziej „czysty” sposób pisania HTML, jednak okazało się, że jego zalety nie zawsze równoważyły dodatkową surowość.

HTML5

Po porzuceniu koncepcji XHTML 2.0, społeczność web deweloperów skupiła się na dalszym rozwijaniu HTML, czego efektem jest HTML5. Oficjalnie opublikowany w 2014 roku (pierwsze szkice pojawiały się od 2008), HTML5 diametralnie różni się podejściem od swoich poprzedników z początków lat 2000. Przede wszystkim uproszczono definicję struktury dokumentu – zamiast odwoływania się do zewnętrznych DTD, doctype HTML5 to po prostu <!DOCTYPE html> (ta krótka deklaracja wystarcza do określenia trybu standardowego we wszystkich nowoczesnych przeglądarkach). Również deklaracja kodowania znaków została skrócona do nieskomplikowanego <meta charset="utf-8">. Dzięki temu rozpoczęcie tworzenia strony w HTML stało się łatwiejsze i mniej podatne na błędy konfiguracji.

HTML5 wprowadził bardzo wiele nowych elementów i API, dostosowując język do potrzeb dynamicznych aplikacji webowych XXI wieku. Dodano semantyczne elementy strukturalne, takie jak <header>, <nav>, <section>, <article>, <aside>, <footer> (upraszczając tworzenie czytelnej struktury strony). W obszarze multimediów, zamiast polegać na zewnętrznych wtyczkach, język otrzymał natywne elementy <video> i <audio> do osadzania mediów, a także <canvas> do rysowania grafiki. Formularze wzbogacono o nowe typy pól i atrybuty (omówione wcześniej, np. pola daty, e-mail, podpowiedzi), co ułatwiło tworzenie interaktywnych formularzy bez konieczności użycia dodatkowych skryptów.

Istotną zmianą było odejście od bycia aplikacją SGML – HTML5 definiuje własną, luźniejszą gramatykę. Oznacza to, że przeglądarki mają jasno określony algorytm parsowania nawet niezbyt poprawnego kodu HTML5, co zwiększa szanse, że strona wyświetli się „jak należy” mimo drobnych błędów. W przeciwieństwie do XHTML, niewymagane jest rygorystyczne zamykanie każdego tagu czy pisanie ich małymi literami (choć w dobrym tonie jest zachowywać pewną dyscyplinę). HTML5 stara się łączyć zalety podejścia XHTML (uporządkowanie, jednoznaczność) z elastycznością tradycyjnego HTML. Dzięki temu twórcy mogą korzystać z nowych możliwości bez obawy, że drobne pomyłki spowodują całkowite zepsucie strony.

Wraz z HTML5 zmienił się też model rozwoju standardu – stał się on tzw. „żywym standardem”. Oznacza to, że HTML5 nie jest ostatnią wersją, lecz bazą, która jest stale rozwijana. Nowe funkcjonalności (jak kolejne elementy, atrybuty czy API – np. dla grafiki 2D/3D, komunikacji w czasie rzeczywistym, przechowywania danych w przeglądarce itp.) są dodawane sukcesywnie. Jednak rdzeń pozostaje ten sam, a nazwa HTML5 często używana jest po prostu w kontekście współczesnego HTML. Kluczową różnicą między HTML5 a poprzednimi wersjami jest więc filozofia ewolucyjnego rozwoju zamiast publikowania całkowicie oddzielnych wersji języka.

Podsumowując, HTML5 jest znacznie bogatszy semantycznie, multimedialnie i funkcjonalnie niż HTML 4.01/XHTML, a jednocześnie bardziej przyjazny dla twórców dzięki uproszczonej składni i większej tolerancji na błędy. Stanowi fundament nowoczesnego tworzenia stron i aplikacji internetowych, integrując się ściśle z CSS3 i zaawansowanym JavaScriptem, co otwiera zupełnie nowe możliwości niedostępne we wcześniejszych epokach rozwoju sieci.