Wprowadzenie

Choć HTML kojarzy się z prostymi znacznikami, jego piąta wersja to prawdziwa rewolucja. HTML5 wprowadził semantykę, obsługę multimediów, API oraz nowe narzędzia dla deweloperów.

Dla kogo

• Dla front-end developerów, którzy chcą pisać nowoczesny kod.
• Dla projektantów stron dbających o SEO i dostępność.
• Dla studentów informatyki.

Czego się nauczysz

1. Nowe znaczniki semantyczne – <header>, <footer>, <section>, <article>.
2. Canvas API – tworzenie grafiki 2D i animacji.
3. Web Storage – Local Storage i Session Storage.
4. IndexedDB – lokalne bazy danych w przeglądarce.
5. API geolokalizacji – np. do aplikacji pogodowych.
6. Obsługa multimediów bez wtyczek – <audio>, <video>.

Praktyczny start

Spróbuj zbudować prostą stronę portfolio:

• nagłówek <header> z imieniem i nazwiskiem,
• sekcja <section> z projektami,
• <article> z blogiem,
• <footer> z danymi kontaktowymi.

Zadbaj o poprawną hierarchię nagłówków i semantykę.

Mini-projekt – aplikacja pogodowa

Wykorzystaj geolokalizację do pobrania współrzędnych i wyświetlaj prognozę z API pogodowego. Zapisuj wyniki w Local Storage, aby użytkownik mógł sprawdzić ostatnie wyszukiwania.

Najczęstsze błędy

• Nadużywanie div zamiast semantycznych znaczników.
• Brak alt w obrazkach.
• Źle zagnieżdżone nagłówki H1–H6.

Materiały

• MDN Web Docs (mozilla.org).
• Kursy HTML5 na freeCodeCamp i YouTube.
• Oficjalne specyfikacje W3C.

TIP: Przećwicz Canvas, Local Storage i znaczniki semantyczne, sprawdzając stronę w Lighthouse pod kątem dostępności i SEO.

Podsumowanie: HTML5 to fundament nowoczesnego front-endu. Warto dobrze opanować semantykę i API, zanim przejdziesz do frameworków typu React czy Angular.

Daria Zazon