Dużo ludzi pisze kod w HTML, ale niewielu zgłębia ten temat. Jeśli nie wiesz, czym różni się <br> od <br/>, to ten artykuł jest dla ciebie.
Co było przed internetem?
SGML (Standard Generalized Markup Language) jest to format zapisu dokumentów tekstowych, w których oprócz samego tekstu są jeszcze dodatkowe informacje (tagi zwane też znacznikami). SGML stał się standardem ISO w 1986. Dokument SGML wygląda na przykład tak:
<tag1>
Some Text
<tag2 attribute otherattribute="value">
</tag1>
Standard ten definiuje składnię (ang. syntax) to jak dany dokument sparsować. Parser SGMLa wie, że mam tag o nazwie tag1 i że ma on dwoje dzieci: fragment tekstu i kolejny tag.
Ale standard nie definiuje co oznacza tag1 (tak zwana semantyka). Jest to język ogólnego przeznaczenia, stworzony jako baza dla innych języków jak na przykład
HTML
Upubliczniony w 1991 roku, HTML definiuje na przykład że <a> to link, a jego atrybut href zawiera adres url.
Poza HTMLem, sam SGML nie zdobył wielkiej popularności, dlatego niewiele ludzi nawet zna tą nazwę, ale osobiście uważam, że ważne jest by znać różnicę między składnią a semantyką.
XML i XHTML
W 1998 roku ukńczono pracę nad nowym standardem: Extensible Markup Language (XML). Jest to następca SGML’a, im tak samo jak on, zajmuje się tylko składnią dokumentu.
W 2000 roku W3C (organizacja standaryzująca) opublikowała specyfikację XHTML 1.0. Był to HTML 4.01, w którym składnia została podmieniona na XML. Oznacza to, że dokument XHTML jest 100% poprawnym dokumentem XML.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head>
<title>XHTML 1.0 Example</title>
</head>
<body>
<p>
This is an example
<br/>
of XHTML
</p>
<div id="empty"/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strictl//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>XHTML 1.0 Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>
This is an example
<br>
of HTML
</p>
<div id="empty"></div>
</body>
</html>
Oba dokumenty wyglądają dosyć podobnie, dlatego też wielu programistów nie zwraca na te szczegóły uwagi.
Pierwsza duża różnica jest taka, że XML nie toleruje błędów składni. SGML w sytuacji niepoprawnego zapisu spróbuje sparsować tyle ile jest w stanie, XML po prostu zwróci syntax error.
Każdy dokument XHTML zaczyna się od deklaracji XML, w której jest zapisana wersja samego XML’a oraz kodowanie znaków.
XML posiada mechanizm przestrzeni nazw (namespace), dzięki temu można mieszać różne formaty w jednym pliku. Na przykład możesz umieścić fragment XHTML’a wewnątrz pliku SVG albo RSS
Samozamykające się tagi
HTML posiada mechanizm automatycznego zamykania tagów. Na przykład tag <br> zawsze sam się zamyka i nie może mieć żanej treści. Inny przykład: tag <p> nie może zawierać w środku innego tagu <p>, więc gdy w kodzie pojawi się
<p>first
<p>second
<p>last</p>
paser wie, że otwarcie nowego <p> powinno automatycznie zamknąć wcześniejsze. Przy czym jak łatwo zauważyć, wymaga to, by parser znał indywidualne zachowanie każdego tagu. W przypadku XHTML musisz zamykać wszystkie tagi ręcznie, tak aby każdy parser XML powinien przetworzyć plik poprawnie bez znajomości tych tagów. jeśli czegoś nie domkniesz, dostaniesz syntax error.
Ale żeby kod był bardziej czytelny, w XML istnieje skrócony zapis <br/>, który jest równoznaczny <br></br>. Ale ważne, by pamiętać, że w zwykłym HTML znak / na końcu tagu jest ignorowany (jak cześniej wspomniałem, HTML stara się ignorować błędy) i nic nie robi.
Więc jeśli w kodzie napiszesz:
<body>
<div/>
<p>Some text</p>
</body>
to jeżeli test to fragment XHTML’a, zostanie to potraktowane jako:
<body>
<div></div>
<p>Some text</p>
</body>
a wewnątrz HTML’a jako:
<body>
<div>
<p>Some text</p>
</div>
</body>
Porzucony XHTML 2.0
Na samym początku XHTML 1.0 i 1.1 miały 2 duże problemy. Pierwszy: nie był wspierany przez Internet Explorera aż do wersji 9 (czyli roku 2011, 11 po wprowadzeniu standardu), a trzeba pamiętać, że w tamtych czasach od wydania nowej wersji, do momentu, gdy znaczna część użytkowników zaktualizowała przeglądarki potrafiły minąć kolejne lata. W takich warunkach nawet pisząc XHTML, pliki trzeba było serwować z content-type: text/html, tak aby IE sparsowalo to jako HTML, tym samym tracąc wszystkie zalety XML’a.
Drugi problem: programistom nie spodobała się idea, że syntax error spowoduje, że cała strona/aplikacja przestanie działać, a użytkownik zobaczy wielki komunikat o błędzie.
W3C pracowało nad specyfikacją XHTML 2.0, który miał zrywać z wsteczną kompatybilnością. Ten pomysł niezbyt podobał się developerom, więc w 2006 roku pomysł został porzucony. Ale wbrew temu, co niektórzy myślą, nie jest to koniec historii XHTML’a.
Teraźniejszość – HTML5
Po tym, jak W3C porzuciło XHTML 2.0, stworzono nowy standard – HTML 5. Jednym z głównych założeń było to, że HTML i XHTML będą rozwijane równolegle w ramach jednej specyfikacji. programista może wybrać, którą składnię woli, ale od momentu sparsowania przez przeglądarkę reszta jest już identyczna.
W3C zdecydowało, że HTML nie będzie już dalej pełni kompatybilne z SGML (bo komu to potrzebne). Wprowadzono też ficzery dotychczas znane tylko z XHTML’a, np. osadzanie MathML (wciąż nie wspierane przez Chrome 😡) czy SVG wewnątrz HTML’a.
Warto zauważyć, że nawet jeśli nie wpisujesz przestrzeni nazw (namespace) w kodzie, przeglądarka sama doda je w trakcie parsowania. Łatwo to sprawdzić z poziomu JavaScriptu:
var div = document.createElement('div');
div.innerHTML = '<p></p><svg></svg>';
console.log(div.children[0].namespaceURI);// -> "http://www.w3.org/1999/xhtml"
console.log(div.children[1].namespaceURI);// -> "http://www.w3.org/2000/svg"
Trzeba pamiętać, że gdy chcemy dynamicznie tworzyć elementy przez obiekty DOM musimy samemu podać przestrzenie nazw, inaczej tag nie zostanie potraktowany jako SVG, ale jako nieznany tag HTML, gdyż jak wspomniałem wyżej, po sparsowaniu przeglądarkarka traktuje HTML i XHTML identycznie (z wyjątkiem pola innerHTML, ale to wyjątek).
var badSvg=document.createElement("svg");
console.log(badSvg.namespaceURI);// -> "http://www.w3.org/1999/xhtml"
var goodSvg=document.createElementNS("http://www.w3.org/2000/svg","svg");
console.log(goodSvg.namespaceURI);// -> "http://www.w3.org/2000/svg"
TheBugger 
One thought on “[pl] HTML vs XHTML – czym to się różni”