HTML / XHTML

Różnice między HTML 4 a XHTML 1.0

Czym różni się HTML 4 od XHTML 1.0?

Znaczniki należy zamykać obowiązkowo w kolejności odwrotnej do ich otwierania:

Poprawnie: <p>wewnątrz paragrafu jest <em>emfaza</em>.</p>
Niepoprawnie: <p>wewnątrz paragrafu jest <em>emfaza.</p></em>

Nazwy znaczników i atrybutów obowiązkowo muszą być pisane małymi literami.

Dla elementów niepustych znaczniki zamykające są obowiązkowe:

Poprawnie: <p>tutaj jest paragraf.</p><p>tutaj jest następny paragraf.</p>
Niepoprawnie: <p>tutaj jest paragraf.<p>tutaj jest następny paragraf.

Wartości atrybutów muszą być zawsze ujęte w cudzysłowy:

Poprawnie: <td rowspan="3">
Niepoprawnie: <td rowspan=3>

Nie można minimalizować atrybutów logicznych:

Poprawnie: <dl compact="compact">
Niepoprawnie: <dl compact>

Puste elementy muszą mieć znacznik zamykający albo ich znacznik otwierający musi się kończyć na />:
```
Poprawnie: <br/><br /><hr></hr>
Niepoprawnie: <br><hr>
```
Ze względu na kompatybilność wstecz lepiej jest używać formy ze spacją przed końcowym ukośnikiem: <br />. W celu zapewnienia kompatybilności zaleca się też nie używać formy zminimalizowanej, a tradycyjnej metody dla znaczników, których zamykanie w HTML 4 było opcjonalne, tzn. np. tak: <p> </p>, a nie tak: <p />.
Wartości atrybutów są przetwarzane następująco:
- Białe znaki na początku i na końcu są usuwane.
- Kilka sąsiadujących białych znaków (w tym także znaki nowej linii) jest zamieniane na jeden.
Skrypty osadzone i wewnętrzne arkusze stylów (element style) należy wstawiać w następujący sposób:
```
<script type="text/javascript">
<![CDATA[
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
]]>
</script>
```
Jest to konieczne, jeśli wewnętrzny skrypt lub arkusz stylów zawiera znaki: <, >, &, ponieważ w takim przypadku procesor XML potraktuje je jako znaczniki lub początek encji (znaków specjalnych).
Uwaga! Przeglądarki mogą nie obsługiwać tej metody. Dla zapewnienia zgodności z językiem XHTML skrypty i arkusze stylów, które zawierają znaki: <, &, ]]> lub -- można umieścić w zewnętrznym pliku.
Jeżeli nie jest możliwe umieszczenie skryptu bądź arkusza CSS w zewnętrznym pliku, co jest zalecane, można wykorzystać następującą metodę:
```
<style type="text/css">
/* <![CDATA[ */
...zawartość arkusza CSS (może zawierać bezpośrednio znaki: <, >, &)...
/* ]]> */
</style>

<script type="text/javascript">
// <![CDATA[
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
// </script>

albo

<script type="text/javascript">
/* <![CDATA[ */
...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)...
/* ]]> */
</script>
```
Nie należy ukrywać osadzonych skryptów ani wewnętrznych arkuszy stylów przed starszymi przeglądarkami w komentarzach HTML . W języku XML istnieje zasada, że przed etapem właściwego parsowania dokumentu, można z niego usunąć wszystkie komentarze. Oznaczałoby to, że tego typu skrypty i arkusze w ogóle nie byłyby brane pod uwagę przy renderowaniu strony!
Oczywiście w takim przypadku w przestarzałych przeglądarkach cała zawartość takiego arkusza bądź skryptu wyświetli się na ekranie, ponieważ nie jest ukryta w komentarzach HTML. Nie ma się co jednak zbytnio tym przejmować, ponieważ obecnie właściwie wszystkie popularne przeglądarki od dawna obsługują zarówno skrypty jak i style CSS. Po raz kolejny trzeba jednak zwrócić uwagę, że zapisanie skryptu czy arkusza w zewnętrznym pliku całkowicie eliminuje ten problem. Starsze przeglądarki po prostu nie pobiorą takiego pliku, a na ekranie nie wyświetli się żadna niepotrzebna treść.
Nie wolno zagnieżdżać (umieszczać jeden w drugim) następujących znaczników (dotyczy wszystkich poziomów zagnieżdżania, tzn. wszystkich potomków elementu):
a
nie może zawierać innych elementów a.
pre
nie może zawierać elementów: img, object, big, small, sub, sup.
button
nie może zawierać elementów: input, select, textarea, label, button, form, fieldset, iframe, isindex.
label
nie może zawierać innych elementów label.
form
nie może zawierać innych elementów form.
Atrybut name dla znaczników a, applet, form, frame, iframe, img, map jest zdeprecjonowany. Należy stosować zamiast niego atrybut id.
W celu zapewnienia kompatybilności wstecz można używać jednocześnie obu atrybutów, np.:
```
<a id="identyfikator" name="identyfikator">...</a>
```
W przypadku konfliktów ważniejsza będzie wartość id.
Wartości atrybutów domyślnych są zawsze definiowane małymi literami. Na przykład jeśli nie podamy jawnie atrybutu type dla znacznika input, zostanie dla niego przyjęta wartość type="text", a nie type="TEXT".
Znaki specjalne (tzw. encje) w języku HTML można zapisywać używając wartości szesnastkowych (HEX), np.: &#Xnn; lub &#xnn;, gdzie "nn" to liczba szesnastkowa. XHTML pozwala tylko na drugą wersję, tzn. &#xnn;.

Zarówno w języku HTML jak i XHTML w kodzie strony nie powinien pojawić się bezpośrednio znak & - zamiast niego trzeba zawsze wpisywać &. Reguła ta dotyczy nie tylko zwykłej treści dokumentu, ale również wartości atrybutów:

Poprawnie: <a href="http://example.org/index.php?var1=1&amp;var2=2">...</a>
Niepoprawnie: <a href="http://example.org/index.php?var1=1&var2=2">...</a>

Aby zapewnić zgodność z językiem XML, przy wstawianiu wewnętrznego arkusza stylów trzeba się posłużyć następującą metodą (pierwsza linia kodu dołącza zewnętrzny arkusz stylów):

<?xml-stylesheet href="zewnetrzny.css" type="text/css"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>Przykład wewnętrznego arkusza CSS</title>
<style type="text/css" id="internalStyle">
	code {
		color: green;
		font-family: monospace;
		font-weight: bold;
	}
</style>
</head>
<body>
<p>
	To jest tekst, który używa naszego
	<code>wewnętrznego arkusza stylów</code>.
</p>
</body>
</html>

W MSIE 6.0 i starszych, w przypadku wpisania deklaracji XML, zawartość od początku dokumentu do otwarcia znacznika <html... nie może przekroczyć 250 bajtów (wliczając białe znaki - w tym znaki nowej linii). W przeciwnym razie dokument zostanie wyświetlony jako XML, bez względu nawet na wysłany nagłówek HTTP. W MSIE 7.0 wszystko jest już w porządku.

Wyświetlenie dokumentu XHTML jako czystego XML wywoła tak duże błędy w prezentacji strony, że właściwie będzie ona zupełnie nieczytelna: większość elementów błędnie wystylizowanych, a cały tekst umieszczony w jednym długim akapicie! W niektórych przypadkach dokument może w ogóle utracić formatowanie i zostanie wyświetlony jak drzewo elementów XML. Pamiętaj, że w systemie Windows znak nowej linii ma długość dwóch bajtów. Ponadto w przypadku kodowania UTF-8 niektóre znaki, jak np. polskie litery, składają się z dwóch bajtów, a w UTF-16 wszystkie znaki mają długość dwóch bajtów.

Znak ' przedstawiający apostrof (') pojawił się dopiero w XML 1.0, a nie występuje w HTML. W celu zapewnienia kompatybilności wstecz, zamiast bezpośredniej nazwy znaku można stosować '.

Źródło: XHTML 1.0 The Extensible HyperText Markup Language