100 lat – tyle już minęło, odkąd zacząłem dłubać w webdevie. Moją pierwszą przeglądarką był… Internet Explorer 5.5 na Windowsie 98. To były czasy, w których CSS pokazywano jako ekstrawagancką ciekawostkę i technologię, która może kiedyś się przyjmie. Style otaczało się komentarzami HTML, żeby przypadkiem nie wysypać starszych przeglądarek… To były czasy, kiedy Sieć rozdzierała walka między XML-em a HTML-em, Firefox dopiero powstawał, Chrome’a nie było choćby w planach, Alladyn pokazywał, jak się robi animacje, a stara gwardia nie była jeszcze stara.
Gdy już ostatnie zasieki XML-a padły i było wiadomo, iż to HTML5 jest przyszłością, Jon Duckett napisał swoje wiekopomne dzieło, HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera. A iż wciąż jest ono w sprzedaży, nasuwa się oczywiste pytanie: jak dobrze ta książka przetrwała próbę czasu?
Ogólne wrażenia
To, co książka robi naprawdę dobrze, to wprowadzenie do odpowiedniego sposobu myślenia. Już w samym wprowadzeniu wspomniane są choćby czytniki ekranu jako jeden z wielu sposobów obcowania ze stronami WWW. Wyjaśnione też jest, iż ludzie mogą używać różnych urządzeń, by wyświetlać strony WWW. Tym samym już na wstępie zahaczony jest temat responsywności. We wprowadzeniu znaleźć też można proste wyjaśnienie, jak działa Internet (wpisujemy adres, DNS wyszukuje IP, itd.). Zatem już na starcie jest lepiej, niż w przypadku wielu innych pozycji.
Natomiast to, co od razu rzuca się w oczy, to to, jak stare są wszystkie screenshoty w książce. W pierwszym rozdziale widzimy choćby starą wersję Worda (2007 czy wręcz 2003) uruchomioną na Windowsie Vista. Wszystkie te programy od dawna wypadły z obiegu i ich widok raczej nie napawa optymizmem co do aktualności treści.
Rozdział 1: Struktura
Znów: bardzo podoba mi się to, w jaki sposób książka nakierowuje na odpowiedni sposób myślenia. Rozdział zaczyna się od porównania strony WWW do artykułu w gazecie oraz dokumentów w Wordzie. To porownanie, które bardzo lubię w przypadku stron WWW i które sam stosuję.
Kolejnym plusem jest też poprawne rozróżnianie elementów HTML od znaczników HTML. W książce jest to ładnie pokazane na schematach, dzięki czemu o wiele łatwiej przyswoić jest zarówno terminologię, jak i podstawową składnię HTML-a.
Natomiast na spory minus należy zaliczyć polecanie systemowego Notatnika na Windowsie i TextEdita na macOS-ie do pisania stron WWW. Mimo wszystko poleciłbym jakieś bardziej zaawansowane programy, typu Visual Studio Code. Samo kolorowanie składni sprawia, iż komfort pracy z kodem jest nieporównywalnie lepszy. Do tego dobre edytory pozwalają łatwo wykryć i naprawić błędy z kodem, takie jak źle zamknięte elementy czy literówki. Co prawda są wspomniane Notepad++ dla Windowsa i TextWrangler dla macOS-a, ale właśnie – są wspomniane. Myślę, ze lepiej byłoby, jakby było na odwrót (Notepad++ i TextWrangler jako główne edytory, a systemowe odpowiedniki raptem wspomniane jako niezalecane alternatywy).
Rozdział 2: Tekst
Nie zgodzę się z podziałem na znaczniki strukturalne i znaczniki semantyczne. Każdy element jest semantyczny – bo jego znaczenie jest opisane w specyfikacji. Niemniej nie da się ukryć, iż w momencie, gdy książka powstawała, semantyczne elementy były powszechnie używanym terminem. Dodatkowo pojawia się tutaj problem z rozróżnieniem znaczników i elementów (coś, za co pochwaliłem pierwszy rozdział). To elementy mogą być semantyczne (bo mają znaczenie jako całość), nie ich znaczniki!
Natomiast na plus należy wskazać, iż elementy b oraz i zostaly opisane poprawnie, jako wyróżnienie wizualne fragmentu tekstu oraz terminy techniczne, naukowe itp.
Warto też odnotować wspomnienie mikroformatu hCard przy okazji omawiania elementu address. Mało kto pamięta o jego istnieniu!
Rozdział 3: Listy
Bardzo fajnie, iż jest wspomniany element dl. Niemniej jest używana jego dawna nazwa (lista definicji) zamiast nowej (lista opisowa, lista klucz–wartość). Brakuje też wspomnienia o możliwości wykorzystania elementu div wewnątrz elementu dl. Ta pojawiła się raptem kilka lat temu.
Rozdział 4: Łącza
Duży plus za wspomnienie o tym, iż wypada dobrać odpowiednią treść łącza, by ułatwić nawigację choćby osobom korzystającym z czytników ekranu. To jeden z wymogów WCAG.
Bardzo podoba mi się też pomysł z tym, żeby wytłumaczyć względne adresy URL przy pomocy grafu ze strukturą katalogów. Dzięki temu zdecydowanie łatwiej zrozumieć, jak ścieżki w systemie plików mają się do ścieżek w URL-ach.
Rozdział 5: Obrazy
W tym rozdziale dobrze widać, jak bardzo ząb czasu nadgryzł tę książkę. Po pierwsze, poleca ona trzy formaty graficzne: JPEG, PNG oraz GIF. Dzisiaj mamy już lepsze alternatywy: AVIF, WebP czy JPEG XL.
Brakuje tutaj też wszystkich rzeczy związanych z responsywnymi obrazkami. W 2012 (a więc rok po premierze książki) przy W3C powstała Responsive Images Community Group (przemianowana potem na Responsive Issues Community Group), która dała podwaliny pod element picture oraz atrybut [srcset]. Innymi słowy: pod fundamenty responsywnych obrazków. w tej chwili trudno nie używać tych rozwiązań przy umieszczaniu obrazków na stronie WWW, a z oczywistych względów cały ten temat jest pominięty w tej książce.
Rozdział 6: Tabele
Duży plus za wspomnienie o nagłówkach i stopkach tabeli. Bardzo rzadko kursy wspominają o tych elementach, a przecież tak naprawdę stanowią one podstawę dostępnych tabeli.
Rozdział 7: Formularze
To kolejny rozdział naznaczony zębem czasu. Brakuje tutaj sporej liczby nowości, które pojawiły się po 2011, jak choćby możliwości dołączania większej liczby plików przy pomocy pola input[type=file] czy naprawionych pól dla dat i czasu. Również natywna walidacja jest dość skąpo opisana, bo w momencie pisania książki była obsługiwana tylko w dwóch przeglądarkach (Chrome i Operze). A to naprawdę rozbudowany i trudny temat.
Znajduje się tutaj też (s. 164) nieprawdziwa informacja:
Ten atrybut języka HTML5 [[required]] nie wymaga określania wartości, co odróżnia go od atrybutów w języku HTML 4, w którym określanie wartości atrybutów było konieczne.
W HTML 4 również nie było konieczności określania wartości atrybutów. Ten wymóg istnieje tylko w składni XML.
Rozdział 8: Dodatkowe elementy HTML
Pada tutaj stwierdzenie, iż XHTML to jedna z wersji HTML-a. Trudno się z tym zgodzić, zważając na to, iż cała oś konfliktu między WHATWG a W3C zasadzała się na tym, iż W3C chciało rozwijać XHTML (czyli język oparty o XML), podczas gdy WHATWG chciało dalej rozwijać HTML-a. Pojawia się też informacja, iż HTML5 wprowadzono w… 1997. To dość oczywisty błąd, bo HTML 4.01 wypuszczono w 1999. Specyfikacja HTML 5.0 ukazała się w 2014.
Dalej z kolei jest informacja o tym, iż DOCTYPE informuje o wykorzystywanej wersji HTML-a. To chyba najczęściej poprawiana nieprawdziwa informacja na WebKrytyku. Myślałem, iż pochodzi z W3Schools, ale być może pozostało starsza? W każdym razie – DOCTYPE aktywuje tryb renderowania w zgodności ze standardami. To jedyne, co robi.
W artykule znajduje się też informacja o atrybucie [seamless] dla ramek iframe. Ten atrybut już nie istnieje.
Rozdział 9: Flash, wideo i audio
Flash nie istnieje od lat. Z tego też powodu spora część tego rozdziału jest w tej chwili całkowicie bezużyteczna. Co więcej, w części poświęconej elementom video oraz audio książka wymienia formaty H.264, WebM, MP3 i Ogg Vorbis. Ta lista formatów mocno się zdezaktualizowała, bo mamy w tej chwili choćby format AV/1. MDN ma spory poradnik odnośnie dobierania formatów multimediów.
Rozdział 10: Prezentacja CSS
Kolejny rozdział, w którym widać upływ czasu. Książka wciąż pokazuje kod, w którym elementy link[rel=stylesheet] oraz style mają atrybut [type=text/css]. Od lat nie jest on wymagany i osobiście już niemal zapomniałem, iż kiedyś istniał. Dodatkowo, lista dostępnych selektorów również nie zawiera wiele nowszych wynalazków, takich jak choćby :where() czy :has().
Rozdział 11: Kolor
Od czasów powstania książki zmieniło się bardzo dużo z kolorami w CSS-ie. Nie dość, iż powstały nowe formaty, to jeszcze można używać innych przestrzeni kolorów. A i składnia opisywanych funkcji, takich jak rgba(), znacząco się zmieniła.
Rozdział 12: Tekst
Ten rozdział opisuje niestandardowe fonty i wspomina o takich antykach, jak technika SIFR czy format EOT. w tej chwili wystarczy używać formatu WOFF2. Można też skorzystać z tzw. system font stack (systemowego stosu fontów), a więc fontów wbudowanych w system.
W rozdziale jest też dość pobieżnie omówiony temat relatywnych jednostek. Są omówione w odniesienie do pikseli – a tak naprawdę są o wiele sensowniejsze w oderwaniu od nich. Dodatkowo książka wspomina tylko o jednostce em, bo… tylko ona w sumie istniała w momencie jej powstawania. Dzisiaj jest o wiele więcej jednostek.
Rozdział 13: Pudełka elementów
Wspomnę tylko własność CSS box-sizing. Model pudełkowy to jedna z nielicznych rzeczy, które IE robiło dobrze. I w tej chwili nie wyobrażam sobie już, iż mógłbym używać modelu proponowanego przez W3C. W książce, niestety, nie ma wzmianki o tej własności. Dosłownie rok po jej premierze pojawił się artykuł Paula Irisha o niej, od którego zaczęła się pudełkowa rewolucja.
Rozdział 14: Listy, tabele i formularze
Ostatnio sporo się zmieniło, jeżeli chodzi o stylowanie formularzy. Mamy z jednej strony choćby własność accent-color, z drugiej – stylowalne elementy select. Z oczywistych względów książka o tym nie wspomina.
Rozdział 15: Układ
Kolejny rozdział mocno nadgryziony zębem czasu. Opisuje tak naprawdę jedynie layouty tworzone przy pomocy własności float. Dzisiaj mamy flexbox, CSS grid czy choćby układ wielokolumnowy. Wszystkie te technologie powstały już po opublikowaniu książki.
Rozdział 16: Obrazy
W tym rozdziale poruszany jest temat gradientów. I znów natknąć się można na antyczne rozwiązania: prefiksy oraz starą składnię gradientów. Dzisiaj gradienty są o wiele bardziej rozbudowane.
Rozdział 17: Układ w HTML5
W tym rozdziale pojawiają się informacje o HTML5 Shiv – prastarym skrypcie, który miał dodawać obsługę nieznanych elementów HTML w starych wersjach IE. Od lat nie ma absolutnie żadnego powodu, żeby go stosować. IE (i to w wersjach niższych niż 9) jest martwe od lat. Co więcej, skrypt jest dołączany z usługi Google Code, która została zamknięta w 2016 roku.
Sam układ opisany w rozdziale jest przestarzały. Brakuje w nim elementu main, który pojawił się gdzieś około 2013 roku. Książka zawiera też stary opis elementu hgroup – a więc z czasów, gdy jeszcze wierzono, iż algorytm outline’u będzie działał. w tej chwili element hgroup nie powinien zawierać więcej niż jednego nagłówka. Zamiast tego powinien zawierać nagłówek oraz podtytuł w elemencie p.
Rozdział 18: Proces i projekt
Plus za to, iż w książce o tworzeniu stron jest wprowadzenie do tematyki UX. Chociaż przydałoby się trochę więcej punktów zaczepienia i odesłania do innych źródeł, które dogłębniej omawiają te rzeczy.
Rozdział 19: Informacje praktyczne
Ten rozdział też się mocno zestarzał. Opisane tutaj metody optymalizacji pod wyszukiwarki już praktycznie nie działają. Co więcej, w dobie AI, pojawiła się cała nowa gałąż optymalizacji, właśnie pod sztuczną inteligencję. Nie zaszkodzi dobrać odpowiednie słowa najważniejsze i dodać opisy do stron, ale to są całkowite podstawy. Dzisiejsze wyszukiwarki i sztuczna inteligencja „grzebią” zdecydowanie głębiej w stronach.
Podobnie jeżeli chodzi o FTP. Tak, wciąż można go używać do wrzucania strony na serwer. Ale istnieją lepsze sposoby, takie jak usługi typu Netlify czy Cloudflare Pages.
To nie jest zła książka…
Ba, powiem więcej: to najprawdopodobniej najlepsza książka o HTML-u w 2011 roku. Problem polega na tym, iż mamy ostatnie godziny 2025. Nie da się ukryć, iż przez te 14 lat sporo się zmieniło i treści z dzieła Ducketta już mało przystają do współczesnej webdevowej rzeczywistości. Chyba rozdział opisujący wstawianie animacji Flash najdobitniej to pokazuje. A równocześnie: to chyba najlepsza książka o HTML-u, jaką widziałem wydaną po polsku. Nie zawiera dużej liczby przekłamań, wprowadza poszczególne tematy w sposób przystępny dla osoby czytającej, porusza sporo różnych kwestii, a do tego wszystko to jest zamknięte w atrakcyjną formę wizualną. Gdyby ta pozycja została odświeżona, to nie miałbym żadnych problemów z jej polecaniem. Ale nie została…
I tym samym wracamy do tego samego problemu co zawsze: książki w branży IT są nieaktualne w momencie wydania. W tym przypadku to również jest prawdą, bo polskie tłumaczenie pojawiło się w 2014, czyli 3 lata po oryginale i jakieś 2 lata po pojawieniu się choćby elementu main czy upadku mitu outline’u. Z oczywistych względów w książce brak wzmianki o tym. A przecież to wpływa choćby na prezentowany w niej układ strony w HTML-u. I mimo iż książka uczy naprawdę dobrego sposobu myślenia, to trudno mi rekomendować coś, co jest tak bardzo do tyłu względem współczesnych dobrych praktyk. Dzisiaj książka Ducketta jest tak naprawdę kolejnym zabytkiem webdevu. Pięknym i wartym obejrzenia, ale wciąż zabytkiem. I tylko szkoda, iż w sumie nic lepszego dotąd nie powstało.
15 lat minęło
Jest jeszcze jedna stara rzecz, choćby starsza od tej książki o rok: WebKrytyk. Tak się składa, iż w tym roku (a dokładnie: 7 marca 2025) WebKrytyk obchodził 15 urodziny! To już 5 lat minęło od mojego gorzko-sentymentalnego tekstu. Od tamtego czasu WebKrytyk nieco podupadł, teksty zaczęły pojawiać się zdecydowanie rzadziej (średnio raz na kwartał zamiast raz w miesiącu), a i typowe krytyki ustąpiły miejsca przede wszystkim serii Wpadek i wypadków. Nie będę ukrywał, wkradło się pewne zmęczenie materiału – zwłaszcza, iż rodzaje błędów na stronach WWW niekoniecznie się zmieniały przez lata. W tym roku przypadło chyba apogeum zniechęcenia. Dotknęło ono jednak nie tylko WebKrytyka, ale także mojego prywatnego bloga oraz projektów na GitHubie. Dlatego postanowiłem podjąć działania sanacyjne i trzymam kciuki, iż dzięki nim w przyszłym roku znajdę więcej sił i chęci, by produkować wysokiej jakości treści.
Niemniej pozostało jedna kwestia, która sprawia, iż czuję niepokój o przyszłość WebKrytyka: AI, a dokładniej – LLMY-y. Ta technologia jest absolutnie wszędzie i nie da się ukryć, iż dzisiaj tworzenie prostych (oraz tych bardziej skomplikowanych) stron WWW sprowadza się do napisania prompta i poczekania, aż Claude Code czy inny Codex wyplują gotowy kod. W momencie, gdy za produkcję stron WWW odpowiada maszyna, kwestie związane z dostępnością i wysoką jakością kodu często spychane są na margines jako mało ważne lub wręcz całkowicie nieistotne. A przecież o to zawsze chodziło i wciąż chodzi w WebKrytyku – o pokazywanie, co można ulepszyć w webdeveloperskim fachu. O to, jak tworzyć lepsze strony WWW, zaczynając już od samego wyboru dobrego kursu. Od czasu wypowiedzenia wojny W3Schools i powstania serii Wpadek i wypadków, tak naprawdę rozpoczęła się era współczesnego WebKrytyka. Myślałem, iż skończy się wraz z zawieszeniem przeze mnie niebieskiej czapki na kołku. W najdzikszych snach nie przewidywałem, iż być może przedwcześnie zakończy ją maszyna… Pięć lat temu pozwoliłem sobie pompatycznie porównać misję WebKrytyka do fragmentu Testamentu mojego Słowackiego, w którym wspominał o przerobieniu zjadaczy chleba w anioły. A jaki to ma sens, gdy nie ma już kogo przerabiać…?
I mimo tego gorzkiego – choćby bardziej niż te 5 lat temu – nastroju, zostaje życzyć WebKrytykowi 100 lat! Przetrwał już tyle zawieruch, iż może i tę kolejną też przetrwa. Zobaczymy za kolejne 5 lat.
A na razie Nam wszystkim szczęśliwego – i spokojnego – Nowego 2026 Roku !
