Jakie są różnice między deklaracją HTML4 a HTML5?

programowanie HTML web development

różnice między HTML4 HTML5 deklaracja DOCTYPE w HTML semantyka znaczników HTML5

Gość (83.4.*.*)

1 dzień temu

Odpowiedź:

Jeśli kiedykolwiek zaglądałeś w kod źródłowy strony internetowej, na pewno zauważyłeś pierwszą linię zaczynającą się od słowa DOCTYPE. Choć dla laika może to brzmieć jak czarna magia, to właśnie ten krótki zapis definiuje, w jakim języku "rozmawia" z nami przeglądarka. Przejście z HTML4 na HTML5 było jednym z najważniejszych momentów w historii internetu, zmieniając sieć z prostych dokumentów tekstowych w interaktywne platformy, które znamy dzisiaj.

Najbardziej widoczna zmiana: Deklaracja DOCTYPE

Największą i najbardziej rzucającą się w oczy różnicą jest stopień skomplikowania samej deklaracji. W czasach HTML4 (a konkretnie HTML 4.01), język ten opierał się na standardzie SGML (Standard Generalized Markup Language). Oznaczało to, że każda strona musiała zawierać odnośnik do konkretnej definicji typu dokumentu (DTD), aby przeglądarka wiedziała, jak interpretować kod.

W HTML4 deklaracja wyglądała zazwyczaj tak:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Było to długie, trudne do zapamiętania i podatne na błędy. HTML5 całkowicie zerwał z tą tradycją. Ponieważ HTML5 nie jest już oparty na SGML, nie wymaga odsyłacza do DTD. Deklaracja stała się banalnie prosta:
<!DOCTYPE html>

To nie tylko ułatwienie dla programistów, ale też sygnał dla przeglądarki, by pracowała w trybie standardowym, zapewniając najlepsze możliwe renderowanie nowoczesnych elementów.

Semantyka, czyli nadawanie znaczenia treści

W HTML4 większość układów stron budowano w oparciu o wszechobecne kontenery <div>. Aby odróżnić nagłówek od stopki czy menu, programiści nadawali im klasy lub identyfikatory, np. <div id="header"> czy <div class="footer">. Problem polegał na tym, że dla wyszukiwarek (takich jak Google) te nazwy były czysto umowne – robot nie zawsze wiedział, co jest faktyczną treścią artykułu, a co jedynie linkami bocznymi.

HTML5 wprowadził rewolucję semantyczną. Zamiast bezpłciowych "divów", otrzymaliśmy dedykowane tagi, które niosą ze sobą konkretne znaczenie:

<header> – dla nagłówka strony lub sekcji.
<footer> – dla stopek.
<nav> – dla menu nawigacyjnego.
<article> – dla samodzielnych treści, jak wpisy na blogu.
<section> – do logicznego dzielenia dokumentu.

Dzięki temu kod jest czystszy, lepiej czytelny dla programistów i – co najważniejsze – znacznie bardziej przyjazny dla SEO oraz technologii wspomagających (np. czytników dla osób niewidomych).

Multimedia bez wtyczek

Pamiętasz czasy, gdy do obejrzenia filmu na stronie potrzebna była instalacja Adobe Flash Player? To była era HTML4. Multimedia nie były natywną częścią języka, więc przeglądarki musiały polegać na zewnętrznych wtyczkach, które często spowalniały system i były dziurawe pod względem bezpieczeństwa.

HTML5 zmienił zasady gry, wprowadzając tagi <video> oraz <audio>. Dzięki nim odtwarzanie filmów czy muzyki odbywa się bezpośrednio w przeglądarce, bez potrzeby instalowania czegokolwiek. To właśnie HTML5 "zabił" Flasha, czyniąc internet bezpieczniejszym i szybszym miejscem.

Ciekawostka: Dlaczego HTML5 wygrał z Flashem?

Jednym z kluczowych momentów był list otwarty Steve'a Jobsa z 2010 roku ("Thoughts on Flash"), w którym ogłosił, że urządzenia Apple (iPhone, iPad) nie będą wspierać technologii Flash, stawiając właśnie na otwarte standardy, takie jak HTML5. To przyspieszyło adopcję nowego standardu na całym świecie.

Grafika i interaktywność: Canvas i SVG

W HTML4 tworzenie dynamicznych grafik wymagało skomplikowanych skryptów lub wspomnianego Flasha. HTML5 wprowadził element <canvas>, który pozwala na rysowanie grafiki 2D (a nawet 3D za pomocą WebGL) bezpośrednio za pomocą JavaScriptu. To otworzyło drogę do tworzenia zaawansowanych gier przeglądarkowych i narzędzi do wizualizacji danych.

Dodatkowo HTML5 oferuje pełne wsparcie dla grafiki wektorowej SVG (Scalable Vector Graphics), która nie traci na jakości przy powiększaniu – co jest kluczowe w dobie ekranów o wysokiej rozdzielczości (Retina).

Formularze i przechowywanie danych

HTML5 znacząco ułatwił życie twórcom formularzy. W HTML4 mieliśmy do dyspozycji tylko podstawowe typy pól. Jeśli chcieliśmy sprawdzić, czy użytkownik wpisał poprawny adres e-mail, musieliśmy pisać dodatkowy kod w JavaScript.

W HTML5 mamy nowe typy pól, takie jak:

type="email" – automatycznie sprawdza format adresu.
type="date" – wyświetla kalendarz.
type="number" – pozwala na wpisywanie tylko cyfr.
type="color" – otwiera próbnik kolorów.

Kolejną różnicą jest sposób przechowywania danych. HTML4 polegał głównie na ciasteczkach (cookies), które mają ograniczoną pojemność i są przesyłane z każdym zapytaniem do serwera. HTML5 wprowadził Web Storage (LocalStorage i SessionStorage), co pozwala na bezpieczne przechowywanie znacznie większej ilości danych bezpośrednio w przeglądarce użytkownika, bez obciążania serwera.

Podsumowanie różnic

Przejście z HTML4 na HTML5 to nie tylko zmiana deklaracji na początku pliku. To ewolucja z prostego języka znaczników w potężne narzędzie do budowania aplikacji. HTML5 jest bardziej intuicyjny, wspiera urządzenia mobilne, dba o dostępność i pozwala na tworzenie bogatych wizualnie stron bez konieczności korzystania z zewnętrznych narzędzi. Dzisiaj HTML5 to absolutny standard, bez którego nowoczesny internet po prostu przestałby istnieć.

Jakie masz pytanie?