HTML (HyperText Markup Language) jest podstawowym językiem do tworzenia stron internetowych, a HTML5 to jego najnowsza, znacząco rozbudowana wersja. HTML5 wprowadza szereg nowych funkcji, tagów oraz technologii, które usprawniają budowę nowoczesnych i interaktywnych serwisów WWW. Poniżej znajdziesz szczegółowe porównanie obu wersji wraz z przykładami zastosowań.
Najważniejsze różnice między HTML a HTML5
Deklaracja typu dokumentu (DOCTYPE)
- HTML – długa i skomplikowana deklaracja, np.
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">; - HTML5 – prosta deklaracja
<!DOCTYPE html>.
Obsługa multimediów
- HTML – brak natywnego wsparcia dla dźwięku i wideo (korzystano z zewnętrznych wtyczek, np. Flash);
- HTML5 – wsparcie natywne dzięki tagom
<audio>i<video>.
Przykład –
<!-- W HTML5 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje wideo.
</video>
Grafika wektorowa i rysowanie
- HTML – grafika możliwa jedynie przez zewnętrzne technologie (Flash, VML);
- HTML5 – wsparcie dla grafiki wektorowej SVG oraz dynamicznego rysowania 2D za pomocą
<canvas>.
Przykład –
<!-- Rysowanie prostokąta w HTML5 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 50);
</script>
Geolokalizacja
- HTML – brak możliwości pobierania bieżącej lokalizacji użytkownika;
- HTML5 – API geolokalizacji, umożliwiające dostęp do położenia użytkownika.
Przykład –
<script>
navigator.geolocation.getCurrentPosition(function(position) {
alert("Twoje współrzędne to: " + position.coords.latitude + ", " + position.coords.longitude);
});
</script>
Przechowywanie danych po stronie klienta
- HTML – możliwość przechowywania tylko w ciasteczkach (cookies);
- HTML5 – wprowadzenie Web Storage (
localStorageisessionStorage), Web SQL, IndexedDB oraz Application Cache.
Przykład –
<script>
// Zapisz wartość
localStorage.setItem("klucz", "wartość");
// Odczytaj wartość
alert(localStorage.getItem("klucz"));
</script>
Nowe i semantyczne tagi
- HTML – głównie ogólne znaczniki jak
<div>,<span>; - HTML5 – nowe, semantyczne znaczniki do lepszej struktury i czytelności kodu:
<header>,<nav>,<article>,<section>,<footer>,<aside>.
Przykład –
<article>
<header>
<h1>Tytuł artykułu</h1>
<p>Autor: Jan Kowalski</p>
</header>
<section>
<p>Treść artykułu...</p>
</section>
<footer>
<p>Opublikowano: 2025-08-07</p>
</footer>
</article>
Usprawnione deklaracje kodowania znaków
- HTML – dłuższa deklaracja kodowania, np.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">; - HTML5 – krótsza i czytelniejsza deklaracja, domyślnie UTF-8
<meta charset="utf-8">.
Kompatybilność mobilna
- HTML – ograniczone wsparcie dla urządzeń mobilnych;
- HTML5 – projektowany z myślą o urządzeniach mobilnych i responsywności.
Wsparcie dla nowych API
- HTML – brak wsparcia dla nowoczesnych interfejsów programistycznych (API);
- HTML5 – wsparcie m.in. dla Web Workers (przetwarzanie wielowątkowe), WebSocket (komunikacja pełnodupleksowa z serwerem), Drag & Drop API, Form API (lepsza walidacja formularzy).
Kompatybilność przeglądarek
- HTML – szerokie wsparcie w praktycznie wszystkich przeglądarkach;
- HTML5 – część funkcjonalności obsługiwana wyłącznie przez nowsze wersje przeglądarek.
Zastosowania HTML i HTML5
- HTML – proste strony informacyjne, elementarne zastosowania bez zaawansowanych multimediów i interakcji użytkownika.;
- HTML5 – wszystkie nowoczesne aplikacje webowe, gry przeglądarkowe, portale społecznościowe, serwisy wideo, aplikacje SPA (Single Page Application), rozwiązania offline, projekty z rozbudowaną obsługą mediów, grafiki i interaktywności.
Podsumowanie różnic w formie tabeli
| Cecha | HTML | HTML5 |
|---|---|---|
| Deklaracja DOCTYPE | Długa | Krótka |
| Multimedia | Brak natywnego wsparcia | Natywne wsparcie <audio>, <video> |
| Grafika | Zewnętrzne wtyczki | <canvas>, SVG |
| Przechowywanie danych | Ciastka | localStorage, sessionStorage, Web SQL, IndexedDB |
| Nowe znaczniki semantyczne | Brak | Tak: <header>, <footer>, <nav>, itd. |
| Obsługa geolokalizacji | Brak | Tak, przez Geolocation API |
| Mobilność i responsywność | Ograniczona | Optymalizacja pod urządzenia mobilne |
| Formularze | Podstawowa walidacja | Zaawansowana walidacja, nowe typy pól |
| Rysowanie wektorowe | Flash, VML, Silverlight | <canvas>, SVG |
| Nowe API | Brak | Tak (Web Workers, WebSocket, Drag & Drop) |
Wprowadzenie HTML5 otworzyło nowe możliwości dla twórców stron i aplikacji, usprawniając zarówno wydajność, jak i możliwości interaktywne stron WWW. Zachęca się do stosowania HTML5 w nowych projektach, aby w pełni wykorzystać obecne standardy internetowe oraz zapewnić lepszą dostępność i ergonomię użytkownikom.
