xHTML 2.0 kontra HTML 5

Dziesięć lat temu... nie było Firefoxa, Ajax'a, nie było XmlHttpRequest, nie było nawet XML'a. Przeglądarki takie jak Natscape Navigator oraz Internet Explorer dominowały na rynku przy wyraźnym wskazaniu na tą pierwszą. W tamtym czasie została wydana specyfikacja HTML 4.0 jako rekomendacja stowarzyszenia W3C.

Od tamtego czasu wiele się zmieniło ale HTML 4 trzyma sie bardzo dobrze, pomimo że obecną rekomendacją W3C jest xHTML 1.1. Dzieje się tak ponieważ xHTML nie jest należycie wspierany. Firefox naprzykład zaczyna wyświetlać dokument xHTML dopiero po pełnym załadowaniu drzewa DOM (zostało poprawione w nadchodzącym Firefoxie 3), a z koleji najbardziej popularna rodzina przegładarek czyli IE6 i IE7 wogóle nie wyświetlają dokumentów xHTML. Dlatego też bardzo rzadko można trafić w internecie na strony napisane w xHTML.

Oto prosty test pozwalający stwierdzić czy dana strona wyświetla się w trybie xHTML czy HTML 4 (w xHTML każdy element może być zamkniety w miejscu, w HTML4 - nie):

<p style="color: green;"><span style="color: red;" />Jeżeli ten tekst jest zielony to jest to xHTML</p>

Aby dana strona była wyświetlona w trybie xHTML nalęży do przeglądarki przekazać odpowiednie nagłówki np. w php:

header("Content-Type: application/xhtml+xml; charset=utf-8");

Spowoduje to jednak próbę pobrania takiej strony jako plik w rodzinie MS Internet Explorer.

Z tych właśnie względów xHTML tak naprawdę istnieje tylko teoretycznie i 99,9% stron jest wyświetlonych w trybie HTML4. Mogło by się zatem wydawać że nie ma potrzeby wymyślać nic nowego skoro nie są obsługiwane istniejące technologie. Jednak xHTML nie jest idealny i zawsze warto poszukiwać lepszych i bardziej efektywnych technologii.

Obecnie W3C przygotowuje dwie nowe specyfikacje: xHTML 2.0 oraz HTML 5. Czymu dwie?
Po wydaniu xHTMLa 1.0 w roku 2004 spora grópa ludzi (webdeveloperów, twórców przegladarek, projektantów) niezadowolonych z tego jaki kierunek przybrał rozwój xHTML 2.0 oraz fakt hermetyczności na uwagi organizacji W3C postanowiła założyć własna społeczność nazwana WHATWG. Opracowani swoją własną specyfikacje nazwaną Web Applications 1.0. Jednak W3C w porę się spostrzegło i w 2007 postanowiło zaprosić osoby z WHATWG do współpracy nad wspólną specyfikacja. Nazwa została zmieniona na HTML 5. Tak więc zapewne już niedługo HTML 5 może stać sie rekomendacją W3C zupełnie niezależnie od xHTML 2.0.

Rzut oka na xHTML 2.0

Specyfikacja 2.0 rozwija dalej ideę xHTMLa 1.x. Bazuje wyłacznie na XMLu odrzucając całkowicie parsowanie w stylu SGML. Ma być jezykiem ogólnego zastosowania zawierającym tylko minimum domyślnych zachowań podczas gdy resztę można zdefiniować przy użyciu rozszerzenia funkcjolaności jaką daje CSS i inne technologie (xForms, zdarzenia XML). Dzieki takiej modółowej budowie pozwala lepiej skupić sie twórcom na zapewnieniu semantyki, łatwości użycia i czystości języka przerzucając jednocześnie prezentację, interakcję z użytkownikiem czy konstrukcje dokumentu na inne grópy zrzeszone w W3C. Twórcy postanowili nie zapewniać na siłę wstecznej kompatybilności z poprzednimi wcieleniami HTMLa.

Rzut oka na HTML 5

W odróżnieniu od xHTML 2.0 twórcy HTML 5 stawiają bardziej na ewolucję a nie na rewolucję traktując HTML 5 jako rozbudowę aktualnej specyfikacji HTML4/xHTML1.x o funkcjonalności których brakuje na codzień webdeveloperom. HTML5 jest bardziej przyjazny dla dzisiejszych rozbudowanych aplikacji Web'owych oferując wiekszą paletę rozwiązań nie będących tylko funkcjami do edycji i pozycjonowania tekstu np.: zestaw API (drag&drop za pomocą atrybutu dragable, element canvas, trwały magazyn danych - tablice danych, bazy danych, historia)

Wspólne cechy

Nikogo nie powinno dziwić że w obu specyfikacjach jest dużo podobnych elementów. Próbują zapewnić przecież to czego brakuje lub co jest zle zaimplementowane. Oto krótka lista wspólnych elementów:

Usuniecie czysto prezentacyjnych elementów

Dokumentay xHTML 2.0 i HTML 5 nie mogą zawierać następujących elementów: basefont, big, font, s, strike, tt oraz u. Ponadto w xHTML 2.0 nie mogą występować:small, b, i i hr podczas gdy HTML5 usuwa z nich znaczenie prezentacyjne. W xHTML 2.0 hr zostaje zastapiony elementem separator.

Listy nawigacji

W xHTML 2.0 zostaje wprowadzona lista nawigacji w której pierwszy element musi być typu label elementy li mogą mieć atrybut href tak jak każdy inny element w xHTML'u 2.0:

<nl>
	<label>Kategoria</label>
	<li href="/">Wszystkie</li>
	<li href="/news">Wiadomości</li>
	<li href="/videos">Wideo</li>
	<li href="/images">Zdjęcia</li>
</nl>

W HTML 5 element nav jest tylko pewnym kontenerem z jasnym znaczeniem:

<nav>
	<h3>Kategoria</h3>
	<ul>
		<li><a href="/">Wszystkie</a></li>
		<li><a href="/news">Wiadomości</a></li>
		<li><a href="/videos">Wideo</a></li>
		<li><a href="/images">Zdjęcia</a></li>
	</ul>
</nav>

Rozbudowane formularze

w xHTML'u wbudowany zostanie standard xForms który jest dużo bardziej rozbudowany i ma więcej możliwości niż zwykłe formularze w HTML 4. Jednak na tyle różnia się one od standartowych formularzy że webdeveloperzy bedą musieli od nowa nauczyć sie pisać kontrolki tego typu. Myslę że warto bo sa dużo bardziej funkcjonalne i uprraszczają ubsługę formularzy.
W HTML 5 zostały natomiast dodane nowe atrybuty type dla elementu input takie jak email, numeric, datetime, url, range oraz wsparcie dla walidacji.

Semantyczna składnia

W obu specyfikacjach możemy opisywać znaczenie elementów. Podczas gdy w xHTML'u jest globalny atrybut role w HTML 5 istnieją predefiniowale klasy (np.: error, warning, example, note, search) które możemy przypisać dowolnemu elementowi w znaczniku class.

Tylko w HTML 5

API dla aplikacji Web'owych

Zestaw API dla aplikacji Web jest rzeczą która bardzo przybliża HTML 5 do języka który mogłby być efektywniej wykorzystany w rozbudowanych aplikacjach. Nie trzeba będzie pisać tak dużo JavaScript'u lub używać wtyczek pokroju Flash'a ponieważ te API pozwolą wykonać sporo z zadań jakie stoją przed dzisiejszymi serwisami. Oto kilka z nich:

• API do rysowania 2D wykorzystujące element canvas.
• API do odtwarzania plików audio i wideo korzystające z wielu formatów - nowe znaczniki audio i video.
• Trwały magazyn danych po stronie klienta oferujący wsparcie dla tablic klucz/wartość oraz dla baz danych SQL.
• API do Drag&Drop które może być użyte z nowym atrybutem draggable.
• API pozwalające komunikować sie przez TCP.
• [...]

Nowe znaczniki

• figure - reprezentuje obraz z podpisem. zawiera elementy img i legend.
• m - reprezentuje tekst który został w jakiś sposób wyróżniony. Dobry przykład: zaznaczenie wyników wyszukiwania.
• time - reprezentuje daty i czasu.
• meter - reprezentuje wszelkie miary
• datagrid - reprezentuje interaktywne drzewo albo dane podzielone za zakładki
• command - reprezentuje komendy jakie użytkownik może wydać
• event-source - używane aby przechwycić przesłane przez serwer zdarzenia.
• output - reprezentuje wynik jakiś operacji wykonanych przy pomocy skryptów
• progress - reprezentuje zaawansowanie w wykonywaniu jakiegoś zadania np.: ściagania pliku albo przy wykonywaniu akcji która zajmuje dużo czasu.

Atrybut ping

Atrybut ping mozna dodać do elementów a i area aby przy kliknieciu na nie przegladarka wysłała ping do podanych lokacji oddzielonych białym znakiem. Można tego użyć w wielu zastosowaniach.

Tylko w xHTML 2.0

Każdy element może być linkiem

Do każdego elementu możemy dopisać atrybut href co spowoduje że stanie się on hyperlinkiem. Upraszacza to bardzo składnie. Element a staje sie w wielu wypadkach zbędny ale został on zachowany ze względu na użyteczność wewnatrz bloków tekstu. Przykład:

<h3 href="http://www.w3c.org/">Tytul poziomu h3 ktoy linkuje do W3C</h3>

Każdy element może być obrazkiem

Element img został usunięty ale do każdego elementu możemy dopisać atrybut src co spowoduje że stanie się on obrazkiem lub innym zasobem (w zależności od rozszerzenia). Jeżeli z jakiś powodów dany zasób nie może zostać wyświetlony atrybut src zostanie pominięty. Upraszcza to niesamowicie pisanie dzisiejszych bardzo graficznych layoutów:

<h3 src="img/txtGraphicTitle.png">Tytul poziomu h3</h3>

Linie zastepują łamanie wiersza

Nowy element l zastępuje br. l zachowuje sie tak jak dzisiejszy span + br

Nowy składnia dla nagłówków

Nagłowki od h1 do h6 zostają usunięte. Miejsce po nich wypełnia h i section. Strukturę nagłówków należy budować poprzez zagnieżdzanie kolejnych elementów h i section w kontenerze jakim jest elment section.

h { font-family: sans-serif; font-weight: bold; font-size: 200% }
section h {font-size: 150%} /* Nagłówek drugiego poziomu */
section section h {font-size: 120%} /* Nagłówek trzeciego poziomu */

Nowe elementy

• blockcode - reprezentuje kod komputerowy.
• di - grupuje kilka powiązanych ze sobą terminów i definicji w liście definicji.
• handler - reprezentuje uchwyt dla zdarzenia. Używając atrybutu type można określić jakim językiem ma zostać obsługiwany. Jeżeli przegladarka nie rozumie danego jezyka przetworzy wszstkie jego dzieci w innym razie pominie je. Można zagnieżdzać te elementy w celu obsługi wielu języków.

Wnioski

Obie specyfikację są ciekawe. Wedłóg mnie xHTML 2.0 można uznać za bardziej akademickie rozwiazanie niż HTML 5 który zdaje sie wychodzić bezpośrednio naprzeciw potrzebom WebDeveloperów. HTML 5 posiada elementy takie jak rozbudowane API pisane specjalnie pod dzisiejsze aplikacje webowe. xHTML 2.0 posiada za to modółową budowę i jest bardzo elegancki i bezkompromisowy w rozwiazaniach jakie proponuje a jednocześnie posiada ciekawe elementy takie jak xForms czy XML Events które to pozwalaja pisać aplikacje webowe bez użycia skryptów. Zanim specyfikacje te zostaną wprowadzone minie zapewne jeszcze wiele czasu ale myśle że warto je poznać gdyż zaczynają one już być wdrażane (Safari obsługuje już część HTML 5). Moim zdaniem po wydaniu tych specyfikacji powinna pojawić się jedna która łaczyła by najlepsze cechy obu. Inaczej możemy być pewni niekończących się wojen o standardy i błędów w implementacji przez przeglądarki.

Krzysztof Suszyński © 2008