Czym się różni HTML od HTML5? Co nowego wprowadza?

Jeśli choć raz próbowałeś stworzyć stronę internetową, to na pewno spotkałeś się z pojęciem HTML. To absolutna podstawa każdej witryny — coś jak cegły w budowie domu. Ale pewnie też słyszałeś o HTML5. No właśnie… co to tak naprawdę jest? Czy to zupełnie nowy język, czy tylko ulepszona wersja starego HTML-a? I co takiego wprowadza HTML5, że wszyscy o nim mówią?

Co to jest HTML?

Zacznijmy od początku.
HTML (HyperText Markup Language) to język znaczników, który opisuje strukturę strony internetowej. Dzięki niemu przeglądarka wie, co ma wyświetlić — gdzie ma być tekst, nagłówek, obrazek czy przycisk.

Nie jest to język programowania (jak np. JavaScript), tylko język opisowy. Oznacza to, że mówi on przeglądarce jak coś wygląda, a nie jak ma działać.

Przykładowy kod HTML może wyglądać tak:

<!DOCTYPE html>
<html>
  <head>
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Witaj w świecie HTML!</h1>
    <p>To jest mój pierwszy akapit.</p>
  </body>
</html>

Ten prosty przykład tworzy mini-stronę z tytułem i nagłówkiem.
I właśnie tak wyglądała większość stron internetowych przez długie lata.

Krótka historia HTML-a

Pierwsza wersja HTML-a pojawiła się w 1991 roku, stworzona przez Tima Bernersa-Lee – twórcę samego internetu!
Później język ten był wielokrotnie rozwijany: HTML 2.0, 3.2, 4.01… aż w końcu w 2014 roku pojawił się HTML5, który do dziś jest standardem.

Dlaczego HTML5 był tak ważny?
Bo świat się zmienił. Kiedyś strony były statyczne — trochę tekstu, obrazki i kilka linków. Dziś mamy filmy, animacje, interaktywne aplikacje, gry w przeglądarce, mapy i mnóstwo multimediów.
Stary HTML po prostu nie dawał już rady.

HTML vs HTML5 — główne różnice

HTML5 to nie tylko „nowsza wersja” HTML-a. To raczej ewolucja, która przystosowała sieć do nowoczesnych potrzeb.
Poniżej zobaczysz najważniejsze różnice między nimi.

1. Wideo i audio bez wtyczek

Pamiętasz jeszcze czasy, gdy żeby obejrzeć filmik w przeglądarce, trzeba było instalować Flash Playera albo inne wtyczki?
HTML5 to zmienił na zawsze.

Wprowadził nowe znaczniki:

<video src="film.mp4" controls></video>
<audio src="muzyka.mp3" controls></audio>

Dzięki nim możesz odtwarzać multimedia bez żadnych dodatków.
Przeglądarka sama wie, jak sobie z tym poradzić.
Proste, szybkie i — co najważniejsze — bezpieczniejsze.

2. Nowe znaczniki semantyczne

HTML4 miał problem — wszystko było wrzucane do tagów <div>, co utrudniało odczytywanie struktury strony przez roboty Google czy osoby korzystające z czytników ekranu.

HTML5 wprowadził semantyczne tagi, które jasno określają rolę poszczególnych części strony:

<header> – nagłówek strony lub sekcji  
<nav> – menu nawigacyjne  
<article> – samodzielny artykuł lub wpis  
<section> – część tematyczna strony  
<aside> – boczna sekcja (np. reklamy, linki)  
<footer> – stopka strony

Dzięki temu kod stał się czytelniejszy, lepiej pozycjonowany (SEO) i bardziej przyjazny dla użytkowników.

Przykład:

<header>
  <h1>Blog o programowaniu</h1>
  <nav>
    <a href="#">Start</a> | <a href="#">Artykuły</a> | <a href="#">Kontakt</a>
  </nav>
</header>

<article>
  <h2>Czym się różni HTML od HTML5?</h2>
  <p>Dowiedz się, co nowego wprowadza HTML5!</p>
</article>

<footer>
  <p>© 2025 Blog o programowaniu</p>
</footer>

To nie tylko wygląda lepiej — to też pomaga robotom Google zrozumieć, o czym jest strona, co pozytywnie wpływa na SEO.

3. Formularze z nowymi typami danych

HTML5 dodał nowe typy pól formularzy, które automatycznie walidują dane i poprawiają użyteczność strony.

Przykład:

<form>
  <label>Email:</label>
  <input type="email" required><br>

  <label>Data urodzenia:</label>
  <input type="date"><br>

  <label>Kolor ulubiony:</label>
  <input type="color"><br>

  <label>Liczba:</label>
  <input type="number" min="0" max="10"><br>

  <input type="submit" value="Wyślij">
</form>

Przeglądarka sama sprawdzi, czy adres e-mail jest poprawny, czy data ma właściwy format, i nie pozwoli wysłać formularza z błędami.
Dzięki temu nie trzeba pisać tylu skryptów w JavaScript.

4. Nowe API — czyli HTML5 to już nie tylko „język znaczników”

Największą rewolucją HTML5 było dodanie API (interfejsów programistycznych), które pozwalają stronom działać jak aplikacje.

Oto kilka z nich:

Canvas API – rysowanie grafiki i animacji 2D/3D bez Flash’a.
Geolocation API – pobieranie lokalizacji użytkownika (np. dla map).
Web Storage (localStorage, sessionStorage) – przechowywanie danych w przeglądarce.
Drag and Drop API – przeciąganie elementów na stronie.
WebSockets – komunikacja w czasie rzeczywistym (np. czaty online).

Przykład prostego rysowania na canvasie:

<canvas id="rysunek" width="200" height="200"></canvas>

<script>
  const canvas = document.getElementById("rysunek");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 100, 100);
</script>

Ten kawałek kodu narysuje niebieski kwadrat.
A jeśli dorzucisz kilka linijek więcej – możesz zrobić prostą grę albo wizualizację danych!

5. Przechowywanie danych po stronie przeglądarki

W starym HTML dane użytkownika można było przechowywać głównie za pomocą ciasteczek (cookies).
HTML5 wprowadził localStorage i sessionStorage, czyli małe „bazy danych” w przeglądarce.

Przykład:

<script>
  // Zapis danych
  localStorage.setItem("imie", "Kasia");

  // Odczyt danych
  const imie = localStorage.getItem("imie");
  console.log(imie); // "Kasia"
</script>

Dzięki temu strona może zapamiętywać użytkownika lub jego ustawienia — bez konieczności komunikacji z serwerem.

6. Responsywność i mobile-first

HTML5 został stworzony z myślą o urządzeniach mobilnych.
Dodał np. znacznik:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dzięki niemu strona automatycznie dopasowuje się do rozmiaru ekranu.
To absolutna podstawa responsywnego designu, bez którego dzisiejsze strony nie mają racji bytu.

7. Lepsza wydajność i bezpieczeństwo

HTML5 nie tylko wprowadził nowe funkcje — zadbał też o wydajność.
Strony ładują się szybciej, kod jest prostszy, a przeglądarki potrafią lepiej optymalizować zasoby.

Dodatkowo zniknęła potrzeba używania zewnętrznych wtyczek (jak Flash), które często stanowiły dziurę bezpieczeństwa.
Mniej wtyczek = mniej problemów = większe bezpieczeństwo użytkowników.

Co jeszcze nowego wprowadza HTML5?

Oto kilka mniejszych, ale równie ciekawych nowości:

Offline Web Apps – możliwość działania strony bez internetu (dzięki Application Cache lub Service Workers).
Nowe atrybuty jak placeholder, autofocus, required – które ułatwiają życie użytkownikom formularzy.
Tag <figure> i <figcaption> – idealne do opisywania zdjęć lub wykresów.
Tag <progress> i <meter> – do wizualnego pokazywania postępu.

Przykład:

<figure>
  <img src="kot.jpg" alt="Śpiący kot">
  <figcaption>Mój kot w trybie oszczędzania energii 💤</figcaption>
</figure>

<progress value="70" max="100"></progress>

Jak sprawdzić, czy używasz HTML5?

To banalnie proste.
Wystarczy spojrzeć na pierwszą linijkę Twojego kodu HTML:

<!DOCTYPE html>

Jeśli właśnie tak wygląda – gratulacje, korzystasz z HTML5! 🎉
Wcześniejsze wersje miały dużo dłuższe deklaracje (np. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">), a HTML5 postawił na prostotę i minimalizm.

HTML5 + CSS3 + JavaScript = potężne trio

HTML5 to tylko jedna część układanki.
Dopiero w połączeniu z CSS3 (czyli stylem strony) i JavaScriptem (czyli interakcjami) tworzy nowoczesne aplikacje webowe.

Wspólnie pozwalają budować:

gry przeglądarkowe,
aplikacje mobilne,
interaktywne dashboardy,
responsywne strony firmowe.

To dlatego HTML5 jest dziś fundamentem współczesnego internetu.

Podsumowanie — czym się różni HTML od HTML5?

Cecha	HTML	HTML5
Rok wprowadzenia	1991	2014
Obsługa multimediów	wymaga wtyczek (np. Flash)	wbudowana obsługa `<video>` i `<audio>`
Struktura strony	głównie `<div>`	semantyczne znaczniki (`<header>`, `<section>`, itd.)
Formularze	proste typy (`text`, `password`)	nowe typy (`email`, `date`, `color`, `number`)
API i interakcje	brak	Canvas, Geolocation, Web Storage, WebSockets
Responsywność	brak wsparcia	wsparcie dla urządzeń mobilnych
Bezpieczeństwo	niskie (wtyczki)	wyższe (bez Flash’a, HTTPS-ready)

Na koniec…

HTML5 to ogromny krok naprzód.
Nie tylko uprościł tworzenie stron, ale też otworzył drogę do nowoczesnych aplikacji webowych działających bez instalacji, bez wtyczek i bez bólu głowy.