HTML czy XHTML? cz.1

Obecnie w internecie obowiązują dwa języki: starzejący się już HTML oraz zastępujący go XHTML. Którego z nich używać? Jak przygotowywać strony WWW zgodne ze standardami?

Język HTML

Rozwój języka HTML został wstrzymany w roku 1999. Wtedy ukazała się jego ostatnia specyfikacja, zatytułowana HTML 4.01 Specification, opisująca język HTML w wersji 4.01. Dokument ten sygnalizował trendy, które zaczynały obowiązywać w dziedzinie publikacji internetowych. Głównie chodzi o oddzielenie prezentacyjnych cech witryny od jej struktury (poprzez stosowanie stylów).

Specyfikacja definiuje trzy dialekty języka: strict, transitional oraz frameset. Wprawdzie w żadnym miejscu dokumentu nie jest to jasno powiedziane, ale moim zdaniem należy się skupić na języku HTML 4.01 w wersji strict. Jest to szczególnie ważne, gdy myślimy o tworzeniu witryn WWW i planujemy publikowanie stron zgodnych ze standardami.

Treść dokumentów HTML 4.01 strict oraz XHTML 1.0 strict różni się ośmioma szczegółami.

Język XHTML

Specyfikacja języka XHTML 1.0 jest datowana na 26 stycznia 2000 roku. Język XHTML nie jest nowym językiem, a jedynie modyfikacją języka HTML. We wstępie specyfikacji XHTML stwierdzono, że w specyfikacji języka XHTML nie opisano żadnego ze znaczników.

Szukając opisu elementów, ich atrybutów oraz zdarzeń musimy zajrzeć do specyfikacji języka HTML. Specyfikacja XHTML 1.0 definiuje jedynie zmiany, które należy wprowadzić w dokumencie HTML, by stał się on dokumentem XHTML.

Podobnie jak HTML 4.01, również język XHTML 1.0 zawiera trzy dialekty: strict, transitional oraz frameset (najlepiej stosować wersję strict). Dostępne wersje języka XHTML to: 1.0, 1.1 oraz 2.0. Z racji na surowe wymagania (każdy dokument XHTML 1.1 musi być wysyłany jako application/xhtml+xml, XHTML 2.0 nie jest zgodny w dół z poprzednimi językami) powszechnie stosowana jest wyłącznie wersja 1.0 języka XHTML.

XHTML zgodny z HTML-em

Powszechnie stosowanym rozwiązaniem (zalecanym również przez W3C) jest przygotowywanie dokumentów w języku XHTML w taki sposób, by były one – na ile to możliwe – poprawnymi dokumentami HTML.

Wprawdzie pełna zgodność nie jest możliwa, jednak w zasadniczej części (czyli pomiędzy znacznikami {html}{/html} oraz {html}{/html}) dokumenty w języku XHTML 1.0 strict różnią się od dokumentów HTML 4.01 strict ośmioma szczegółami. Podane rozwiązania możemy stosować zarówno w językach XHTML, jak i HTML.

Wielkość liter

W języku HTML nazwy znaczników oraz atrybutów mogły być zapisywane dowolnymi literami. Wszystkie poniższe przykłady są poprawne w języku HTML:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

white
black
gray
silver

Specyfikacja HTML stosuje konsekwentnie do zapisu nazw znaczników duże litery, a do atrybutów małe. Nie jest to jednak wymóg; decydują o tym jedynie względy estetyczne i upodobanie autorów specyfikacji. W języku XHTML nazwy znaczników oraz atrybutów muszą być zapisywane małymi literami.

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

white
black
Indeks
nothing
Menu

Wartości atrybutów, takich jak id czy href, mogą być zapisywane literami dowolnej wielkości. Jednak powyższe ograniczenie dotyczy również wartości atrybutów wyliczeniowych. Na przykład typ elementu input należy koniecznie zapisywać małymi literami:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Poniższy zapis jest poprawny wyłącznie w HTML-u:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

Trzeba także uważać na wielkość liter w encjach heksadecymalnych. Zapis:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

A

jest niepoprawny w XHTML-u. Należy stosować małą literę x:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

A

Jako ciekawostkę warto zapamiętać, że jednym z niewielu miejsc, gdzie wielkość liter odgrywa rolę są – w języku HTML – właśnie encje. Znak {stala}Å{/stala} jest różny od {stala}å{/stala}!

Elementy puste i niepuste

W języku HTML pojawiło się pojęcie elementu pustego. Elementami pustymi są między innymi img, br, hr, link oraz meta. Przykłady elementów niepustych to p, em, span czy table.

Elementy puste należy w języku XHTML kończyć dwoma znakami /> zamiast pojedynczego >. Zatem należy pisać:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

zamiast:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

Zwróćmy uwagę na spację występującą przed znakami />. W XHTML-u, który ma być zarazem poprawnym HTML-em, jest ona konieczna (część przeglądarek HTML-owych nie zrozumie zapisu {html}
{/html}). Natomiast pomiędzy końcowymi znakami / oraz > nie może wystąpić spacja.

Elementy niepuste nie mogą być pisane w taki sposób. Nawet jeśli ich zawartość jest pusta. Zatem zapisem poprawnym jest:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Zapisami niepoprawnymi są:

HTML 4.01 strict – niepoprawny 
XHTML 1.0 strict – niepoprawny

Element pusty nie może być zapisywany jako:

HTML 4.01 strict – niepoprawny
XHTML 1.0 strict – niepoprawny

Znaczniki opcjonalne

W języku HTML niektóre znaczniki, na przykład {html}

{/html} oraz {html}

{/html}, były opcjonalne. W języku XHTML nie ma znaczników opcjonalnych. Wszystkie znaczniki są obowiązkowe. Zatem przykład:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

Red
Green
Blue

jest niepoprawny w języku XHTML. Należy dodać znaczniki zamykające {html}

{/html}:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Red
Green
Blue

Cudzysłowy otaczające wartości atrybutów

Wartości atrybutów w języku HTML możemy pisać otaczając je znakami cudzysłowu lub apostrofami:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Indeks
Nowa

W języku HTML, w niektórych sytuacjach, cudzysłowy i apostrofy są zbędne. Poniższy przykład jest poprawny w języku HTML:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

Indeks
Nowa

Specyfikacja HTML 4.01 wyraźnie zalecała stosowanie cudzysłowów, nie był to jednak wymóg, a jedynie zalecenie. W języku XHTML cudzysłowy lub apostrofy są zawsze konieczne (w odniesieniu do każdego atrybutu!):

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Indeks
Nowa

Minimalizacja atrybutów logicznych

Niektóre atrybuty są nazywane atrybutami logicznymi. Należy do nich, na przykład, atrybut selected elementu option (dodatek). W języku HTML atrybuty logiczne mogą być zapisywane w zminimalizowanej postaci:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

Pink colour

Z racji na zgodność ze starszymi przeglądarkami, specyfikacja HTML 4.01 zalecała stosowanie zminimalizowanej postaci atrybutów logicznych. W języku XHTML atrybuty logiczne należy zawsze zapisywać w pełnej postaci, tzn. jako parę atrybut=\”wartosc\”:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

Pink colour

Identyfikator fragmentu

W języku HTML możemy stosować dwa rodzaje atrybutów do identyfikacji fragmentu dokumentu. Atrybutami tymi są id (dowolnego elementu) oraz name (elementu a):

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

...
...

W języku XHTML atrybut name jest niepoprawny. Stosujemy wyłącznie atrybut id:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

...

Style i skrypty

Style CSS oraz skrypty JavaScript zawierające jedną z czterech poniższych kombinacji znaków: {html}<, &, ]]>{/html}, — należy w języku XHTML zapisywać w zewnętrznych plikach .css, .js lub stosować CDATA:

Pamiętajmy jednak, że CDATA nie może się pojawić w dokumencie HTML (ani w XHTML wysyłanym jako text/html).

Jeżeli zastosujemy CDATA w statycznym dokumencie .html, to bez względu na to, czy go przygotujemy w języku HTML czy XHTML, takie style nie będą działały (pierwsza reguła będzie ignorowana przez MSIE). Jedynym rozwiązaniem, które zadziała zarówno w HTML-u, jak i XHTML-u są zewnętrzne pliki .css oraz .js.

Encje

Znaki wykorzystywane do zapisu kodu HTML, czyli <, > oraz &, należy zapisywać wyłącznie w postaci encji {stala}<{/stala}, {stala}>{/stala} oraz {stala}&{/stala}.

W języku HTML również było to wymagane, jednak przeglądarki w wielu różnych sytuacjach potrafiły poprawnie zinterpretować znaki <, > oraz &. W XHTML-u możemy stosować wyłącznie encje. Pamiętajmy o adresach definiujących zmienne w PHP!

HTML 4.01 strict – poprawny
XHTML 1.0 strict – niepoprawny

index.php?imie=Jan&nazwisko=Nowak

Powyższy przykład należy zapisać jako:

HTML 4.01 strict – poprawny
XHTML 1.0 strict – poprawny

index.php?imie=Jan&nazwisko=Nowak

Pamiętajmy również, że encje nazwane mogą w XHTML-u przysporzyć wielu kłopotów. Zawsze poprawnymi znakami są jedynie {stala}<{/stala}, {stala}>{/stala}, {stala}&{/stala} oraz {stala}"{/stala}. Zamiast pozostałych najlepiej stosować unikod lub encje numeryczne.

Błędy HTML 4.01 strict

Już w języku HTML 4.01 strict wprowadzono liczne obostrzenia, które przybrały formę nakazu. Są nimi:

• stosowanie wyłącznie dopuszczonych znaczników – w kodzie nie może pojawić się żaden przestarzały czy nieznany znacznik (np. font, center),
• stosowanie wyłącznie dopuszczonych atrybutów – w kodzie nie może pojawić się żaden przestarzały czy nieznany atrybut (np. align),
• znaczniki muszą być poprawnie zamykane, nie mogą na siebie nachodzić,
• niektóre zagnieżdżenia elementów, na przykład table w h1 czy hr w pre, są niedozwolone. (Niestety, takie ograniczenia były możliwe w języku SGML. Język XML nie ma możliwości wykluczenia zagnieżdżania elementów. W tym względzie XML jest krokiem wstecz w stosunku do języka SGML.)

Ponadto w formie zaleceń pojawiły się wymogi:

• rezygnacji ze stosowania elementów b, i, tt, big, small,
• otaczania wartości atrybutów znakami cudzysłowu,
• rezygnacji z wykorzystania tabel do tworzenia układu strony.