Hyper Text Markup Language (HTML) jest językiem znaczników służącym do tworzenia stron internetowych. Strony internetowe są zazwyczaj przeglądane w przeglądarce internetowej. Mogą one zawierać teksty, linki, obrazy, a nawet dźwięk i wideo. HTML jest używany do oznaczania i opisywania każdego z tych rodzajów zawartości, aby przeglądarka internetowa mogła je poprawnie wyświetlić. HTML może być również używany do dodawania meta informacji do strony internetowej. Meta informacje zazwyczaj nie są wyświetlane przez przeglądarki internetowe i są to dane o stronie internetowej, np. nazwisko osoby, która stworzyła stronę. Kaskadowe arkusze stylów (CSS) służą do stylizacji elementów HTML, a JavaScript jest używany do manipulowania elementami HTML i stylami CSS.
Pierwotnie język HTML opracował Tim Berners‑Lee. Aktualne specyfikacje i rozwój standardu są prowadzone przez organizacje takie jak World Wide Web Consortium (W3C) oraz WHATWG. Wersja nazwana HTML5 wprowadziła wiele nowych elementów i funkcji ułatwiających tworzenie nowoczesnych, semantycznych i multimedialnych stron internetowych.
Co to jest HTML i do czego służy?
HTML to zestaw znaczników (tagów), które opisują strukturę dokumentu: nagłówki, akapity, listy, obrazy, odnośniki, formularze, multimedia i inne elementy. Przeglądarka odczytuje kod HTML i na jego podstawie renderuje zawartość widoczną dla użytkownika. HTML nie jest językiem programowania — nie wykonuje logiki aplikacji — pełni funkcję strukturalną i semantyczną. Działanie i interaktywność dodaje się zwykle przy pomocy CSS (wygląd) i JavaScript (zachowanie).
Podstawowa struktura dokumentu HTML5
Prosty dokument HTML5 ma następującą strukturę:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tytuł strony</title> <meta name="description" content="Krótki opis strony"> <link rel="stylesheet" href="styles.css"> </head> <body> <header>...</header> <main>...</main> <footer>...</footer> <script src="app.js"></script> </body> </html> Elementy semantyczne
HTML5 wprowadził elementy semantyczne, które opisują przeznaczenie fragmentów treści, co poprawia czytelność kodu i dostępność:
- <header> — nagłówek strony lub sekcji.
- <nav> — nawigacja (menu).
- <main> — główna zawartość strony (jeden na dokument).
- <article> — samodzielna treść, np. artykuł blogowy.
- <section> — logiczny rozdział strony.
- <aside> — treści uzupełniające, np. boczny panel.
- <footer> — stopka dokumentu lub sekcji.
Formularze i walidacja
Formularze to kluczowy element interakcji. HTML5 rozszerzył typy pól input (np. email, tel, date, number) oraz dodał atrybuty do walidacji po stronie klienta (required, pattern, min/max). Mimo to nie należy polegać wyłącznie na walidacji po stronie klienta — ważne jest także sprawdzanie danych po stronie serwera.
Multimedia
Bez wtyczek przeglądarki obsługują elementy multimedialne:
- <audio> — odtwarzanie dźwięku.
- <video> — odtwarzanie wideo z atrybutami takimi jak controls, autoplay, muted, poster.
- <picture> i <source> — responsywne obrazy i obsługa różnych formatów/kodowań.
Przy multimediach warto pamiętać o kodowaniu plików i obsłudze backupowych formatów dla różnych przeglądarek oraz o dołączaniu napisów (np. <track>) dla wideo, co poprawia dostępność.
Meta informacje i SEO
Meta tagi w <head> są ważne dla wyszukiwarek i urządzeń:
- <meta charset="utf-8"> — kodowanie znaków.
- <meta name="viewport" — responsywność na urządzeniach mobilnych.
- <meta name="description" — krótki opis strony widoczny w wynikach wyszukiwania.
- Tagi Open Graph i Twitter Cards ułatwiają udostępnianie treści w mediach społecznościowych.
Dostępność (accessibility)
Dostępność to projektowanie tak, by strony mogły korzystać osoby z różnymi potrzebami. Najważniejsze praktyki:
- Używanie atrybutu alt dla obrazów.
- Logika nagłówków (<h1>–<h6>) i poprawna hierarchia.
- Semantyczne elementy i ARIA tam, gdzie to potrzebne.
- Kontrast kolorów, obsługa klawiatury i czytelne etykiety formularzy.
Narzędzia, walidacja i debugowanie
Do pracy z HTML przydatne są edytory (np. VS Code), narzędzia deweloperskie w przeglądarkach (inspektor DOM, konsola), a także walidatory (np. walidator W3C), które pomagają znaleźć błędy składniowe i zgodność z dobrymi praktykami.
Najlepsze praktyki
- Stosuj semantyczne znaczniki zamiast nadmiernego używania <div>.
- Seperuj strukturę (HTML), wygląd (CSS) i zachowanie (JavaScript).
- Pamiętaj o optymalizacji obrazów i zasobów, by przyspieszyć ładowanie.
- Twórz responsywne strony przy pomocy meta viewport i elastycznych układów.
- Testuj stronę w różnych przeglądarkach i na urządzeniach mobilnych.
Pliki HTML zwykle mają rozszerzenie .html lub .htm i są serwowane z nagłówkiem MIME text/html. HTML pozostaje fundamentem sieci — znajomość jego zasad, elementów semantycznych oraz dobrych praktyk to podstawa tworzenia nowoczesnych, wydajnych i dostępnych stron internetowych.