Definicja #
HTML (HyperText Markup Language) to standardowy język znaczników (markup language) definiujący strukturę i semantykę dokumentów webowych. Wraz z CSS (wygląd) i JavaScript (interaktywność) tworzy trójkę fundamentalnych technologii Internetu. Aktualną wersją jest HTML5, standaryzowany przez W3C i WHATWG.
Struktura dokumentu HTML — elementy (tagi) tworzą hierarchiczne drzewo DOM:
- Semantyczne elementy HTML5 —
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>— przekazują znaczenie przeglądarce i czytnikom ekranu - Formularze —
<form>,<input>(text, email, password, checkbox, radio, file),<select>,<textarea>,<button>; walidacja HTML5 bez JavaScript - Media —
<img>zsrcset(responsive images),<video>,<audio>,<picture> - Linki i nawigacja —
<a href>z atrybutamitarget,rel="noopener" - Tabele —
<table>,<thead>,<tbody>,<th>,<td>
Ważne aspekty HTML5:
- Dostępność (Accessibility) — atrybuty ARIA (
aria-label,role), poprawna semantyka dla czytników ekranu - SEO — tagi meta (
<meta name="description">), Open Graph, nagłówki H1-H6, atrybutyaltna obrazach - Web APIs — HTML5 wprowadził Geolocation API, Web Storage, Canvas, WebSockets
Zastosowania #
HTML stosuje się do:
- Tworzenia każdej strony internetowej — absolutna podstawa frontendu; bez HTML nie ma strony www
- Strukturyzowania treści pod SEO — poprawna hierarchia nagłówków, meta tagi, structured data (JSON-LD) przekładają się na widoczność w Google
- Budowania formularzy zbierających dane od użytkowników — kontakty, rejestracja, checkout w e-commerce
- Dostępności cyfrowej (a11y) — WCAG 2.1 wymaga poprawnej semantyki HTML dla użytkowników z niepełnosprawnościami
- Email marketingu — szablony emaili HTML (ograniczone wsparcie CSS, specyficzne tagi)
Ścieżka nauki #
HTML jest najłatwiejszym punktem wejścia do programowania webowego. Można nauczyć się podstaw w kilka dni.
Zacznij od:
- Podstawowe tagi:
<html>,<head>,<body>,<h1>-<h6>,<p>,<a>,<img>,<ul>/<li>,<div>,<span> - Semantyczne HTML5:
<header>,<nav>,<main>,<section>,<article>,<footer> - Formularze HTML: typy inputów, walidacja, atrybuty required/pattern
- Zasoby: MDN Web Docs (developer.mozilla.org) — kompletne i darmowe
Następnie połącz z:
- CSS — stylizacja: selektory, box model, Flexbox, Grid, media queries (RWD)
- JavaScript — manipulacja DOM, obsługa zdarzeń, fetch API
- Dostępność: atrybuty ARIA, kontrast kolorów, nawigacja klawiaturą
- SEO basics: meta tagi, Open Graph, canonical, structured data (JSON-LD)
- Framework: Angular, React lub Vue korzystają z HTML jako szablonów — znajomość HTML jest wymagana
FAQ #
- Czym różni się HTML od CSS i JavaScript?
- HTML definiuje strukturę i treść strony (szkielet), CSS odpowiada za wygląd i styl (szata graficzna), JavaScript dodaje interaktywność i dynamiczne zachowanie. Wszystkie trzy są potrzebne do zbudowania nowoczesnej strony internetowej.
- Co to jest HTML5?
- HTML5 to aktualna wersja języka HTML, wprowadzona w 2014 roku. Dodała semantyczne elementy (header, nav, article, section), wsparcie dla audio/video bez pluginów, formularze z walidacją, Canvas do grafiki 2D i Web APIs (Geolocation, Web Storage, WebSockets).
- Czy HTML to język programowania?
- Nie — HTML to język znaczników (markup language), nie język programowania. Nie zawiera instrukcji warunkowych, pętli ani zmiennych. Do programowania logiki strony służy JavaScript. HTML definiuje strukturę dokumentu, a nie algorytmy.
- Ile zarabia Frontend Developer?
- Junior Frontend Developer w Polsce zarabia od 6 000 do 10 000 zł brutto. Mid-level od 10 000 do 16 000 zł, Senior od 16 000 do 25 000 zł. HTML to wiedza absolutnie podstawowa — wyróżnikami są CSS (Tailwind, Sass), JavaScript i frameworki (React, Angular, Vue).