Rozdział 9.
HTML a XHTML
Co to jest XHTML?
XHTML to EXtensible HyperText Markup Language
XHTML jest niemal identyczny z HTML 4.01
XHTML ma czystszą formę niż HTML
XHTML jest aplikacją XML
XHTML 1.0 jest od 26 stycznia 2000 oficjalnym standardem sieciowym. Rekomendacja W3C
oznacza, że specyfikacja jest stabilna i przetestowana.
Po co XHTML?
W sieci umieszczanych jest coraz więcej stron WWW, rośnie też liczba „złych” stron – stron,
napisanych niepoprawnie. Taki kod HTML:
<html>
<head>
<title>Bł
ę
dny kod HTML!</title>
<body>
<h1>TU JEST EWIDENTNY BŁ
Ą
D!
</body>
będzie wyświetlany poprawnie w większości przeglądarek, mimo, że zawiera błąd składni –
brakuje w nim znacznika zamykającego
</h1>
.
XML nie dopuszcza takich wpadek. Dlatego połączenie języków XML i HTML daje nadzieję na
stworzenie dobrego i stabilnego narzędzia. Dokumenty XHTML są interpretowane przez
wszystkie urządzenia radzące sobie z językiem XML. XHTML pozwala tworzyć dokumenty o
poprawnej strukturze, które działają we wszystkich przeglądarkach i są kompatybilne wstecznie.
Czy XHTML wymaga specjalnych przygotowa
ń
?
XHTML to kolejna generacja języka HTML, ale niewątpliwie trochę czasu upłynie zanim ludzie i
urządzenia do niej się dostosują. Trochę, lecz niezbyt wiele. Należy pamiętać, że między HTML
4.01 a XHTML nie ma wiele różnic, nie będzie więc to trudny proces.
Podstawowe wymagania to kod pisany małymi literami i zamykanie znaczników – chyba możesz
je spełnić.
Jakie s
ą
najwa
ż
niejsze ró
ż
nice mi
ę
dzy XHTML a HTML?
Elementy XHTML muszą być poprawnie zagnieżdżane
Dokumenty XHTML muszą mieć poprawną formę
Nazwy znaczników muszą być pisane małymi literami
Wszystkie elementy XHTML muszą być zamknięte
Co to oznacza konieczno
ść
poprawnego zagnie
ż
d
ż
ania elementów?
W języku HTML wymaganie prawidłowego zagnieżdżania nie musi być restrykcyjnie spełniane.
Na przykład wyrażenie sformułowane w HTML tak:
<b><i>Tekst pogrubiony i pisany kursyw
ą
...</b></i>
będzie w XHTML absolutnie niepoprawne. W XHTML zagnieżdżenie musi być prawidłowe:
<b><i>Tekst pogrubiony i pisany kursyw
ą
... </i></b>
Na przykład częstym błędem w zagnieżdżonych listach jest zapominanie, że lista zagnieżdżona
musi być umieszczona w obrębie elementu
li
. Oto zły zapis:
<ul>
<li>Punkt 1</li>
<li>Punkt 2
<ul>
<li>Zagnie
ż
d
ż
ony 1</li>
<li>Zagnie
ż
d
ż
ony 2</li>
</ul>
<li>Punkt 3</li>
</ul>
A tutaj poprawny odpowiednik błędnego kodu:
<ul>
<li>Punkt 1</li>
<li>Punkt 2
<ul>
<li>Zagnie
ż
d
ż
ony 1</li>
<li>Zagnie
ż
d
ż
ony 2</li>
</ul>
</li>
<li>Punkt 3</li>
W poprawnym przykładzie znacznik
</li>
został wstawiony za znacznikiem
</ul>
listy
zagnieżdżanej.
Co oznacza,
ż
e dokument musi mie
ć
poprawn
ą
form
ę
?
Oto wymagania, które określają poprawność formy. Wszystkie elementy XHTML muszą być
zagnieżdżone w podstawowym elemencie
html
. Elementy podrzędne danych elementów
stosowane są w parach i są prawidłowo zagnieżdżone w elemencie nadrzędnym. Podstawowa
struktura dokumentu prezentuje się tak:
<html>
<head> ... </head>
<body> ... </body>
</html>
Dlaczego nale
ż
y stosowa
ć
małe litery?
Konieczność stosowania małych liter wynika z tego, że dokumenty XHTML są aplikacjami XML,
a XML to język czuły na wielkość znaku. Tak więc znaczniki
<br>
i
<BR>
zostaną
zinterpretowane jako różne.
Zgodnie z tym, zapisz kodu w takiej formie:
<BODY>
<P>Tekst</P>
</BODY>
jest niepoprawny. Poprawna postać powinna wyglądać tak:
<body>
<p>Tekst</p>
Dlaczego nale
ż
y pami
ę
ta
ć
o znacznikach zamykaj
ą
cych?
Wszystkie elementy, które nie są puste, muszą mieć znaczniki zamykające.
Zgodnie z tym, zapisz kodu w takiej formie:
<p>Tekst
<p>Kolejny akapit
jest niepoprawny. Poprawna postać powinna wyglądać tak:
<p>Tekst</p>
<p>Kolejny akapit.</p>
A co z elementami pustymi?
Elementy puste muszą także zostać zaopatrzone w znacznik zamykający lub znacznik otwierający
musi kończyć się znakami
/>
.
Oto nieprawidłowa postać wyrażenia:
Tu dodamy łamanie wiersza<br>
A tu pojawi si
ę
linia pozioma<hr>
Poprawny zapis wygląda tak:
Tu dodamy łamanie wiersza<br />
A tu pojawi si
ę
linia pozioma<hr />
lub
Kolejna linia <hr></hr>
Dodatkowa spacja w zapisie znacznika zamykającego,
<br />
, jest konieczna, aby zachować
zgodność z obecnymi przeglądarkami.
Co oznacza stwierdzenie,
ż
e XHTM ma czystsz
ą
form
ę
?
XHTML nie dopuszcza dowolności. Nazwy znaczników i atrybutów muszą być pisane małymi
literami, wartości atrybutów muszą być podawane w cudzysłowach, skracanie definicji atrybutu
jest niedopuszczalne, atrybut
id
zastępuje nazwę atrybutu, a DTD definiuje w dokumentach
XHTML elementy obowiązkowe.
Skoro tak, to zapis:
<table WIDTH=100%>
będzie nieprawidłowy z dwóch powodów: nazwa atrybutu pisana jest wielkimi literami, a wartość
nie została ujęta w cudzysłowach. Oto zapis poprawny:
<table width=”100%”>
Rezygnacja z możliwości skróconego zapisu atrybutów oznacza, że nie wolno zapisać tak:
<input checked>
<input readonly>
<input disabled>
<option selected>
Należy zastosować pełną postać zapisu:
<input checked=”checked”>
<input readonly=”readonly”>
<input disabled=”disabled”>
<option selected=”selected”>
Co oznacza,
ż
e atrybut id zast
ę
puje nazw
ę
?
W HTML 4.01 stosowany jest atrybut
name
, który definiuje nazwy następujących elementów:
a
,
frame
,
iframe
,
img
i
map
. W XHTML jego rolę przejmuje atrybut
id
.
Taki zapis będzie w XHTML niepoprawny:
<img src="obraz.gif" name="obraz" />
A tu postać prawidłowa:
<img src="obraz.gif" id="obraz" />
W celu zachowania zgodności z obecnymi wersjami przeglądarek, na razie należy stosować oba
atrybuty,
name
i
id
, z tymi samymi wartościami. Na przykład:
<img src="obraz.gif" id="obraz" name="obraz" />
Należy także pamiętać o dodatkowej spacji przed
/>
(patrz uwaga o znacznikach zamykających w
XHTML).
Co to jest atrybut lang?
Atrybut
lang
jest stosowany niemal z każdym elementem XHTML. Określa on język, w jakim
zdefiniowana została zawartość:
<div lang="no" xml:lang="no">Kici kici!</div>
Jakie s
ą
obowi
ą
zkowe elementy XHTML?
Wszystkie dokumenty XHTML muszą zawierać deklarację
DOCTYPE
. Obowiązkowe są także
elementy
html
,
head
i
body
, a element
title
musi być zawarty w obrębie elementu
head
. Oto
podstawowy szablon dokumentu XHTML:
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Tytuł dokumentu</title>
</head>
<body>
Zawarto
ść
dokumentu
</body>
</html>
Deklaracja
DOCTYPE
nie jest częścią samego dokumentu XHTML, nie jest też elementem XHTML
i nie może mieć znacznika zamykającego. Deklaracja
DOCTYPE
jest zawsze umieszczana w
pierwszym wierszu kodu dokumentu XHTML.
Jak wygl
ą
da przykładowy dokument XHTML?
Oto przykład dokumentu XHTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Dokument XHTML</title>
</head>
<body>
<p>Tekst</p>
</body>
</html>
Deklaracja DOCTYPE określa typ dokumentu:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Reszta dokumentu wygląda jak zwykły dokument HTML:
<html>
<head>
<title>Dokument XHTML</title>
</head>
<body>
<p>Tekst</p>
</body>
</html>
Deklaracje typu dokumentu zostały zawarte w dodatku A.