Dokument XHTML
Opublikowano: 18 sierpnia 2006 2006 22:33 w kategorii » (X)HTML/CSS, StandardySpis treści:
Nie jestem maniakiem stosowania najnowszych standardów za wszelką cenę. HTML sprawdza się na wielu stronach WWW, jednak jest już standardem nieco leciwym (co wcale nie znaczy, że przestał być aktualny) i moim skromnym zdaniem dawno nadszedł już czas, by zacząć stosować nowy obowiązujący standard, następcę HTMLa - jego „starszego brata” XHTML. Dlatego chciałbym pokazać wam, jak stworzyć poprawy dokument XHTML.
Czym jest XHTML?
Najpierw może zacznę od wyjaśnienia (przypomnienia?), czym jest HTML. HTML (ang. HyperText Markup Language - hipertekstowy język znaczników) jest to składający się ze znaczników (tzw. tagów) język służący do pisania stron WWW. HTML jest aplikacją SGML. Ostatnią wersją języka HTML jest wersja 4.01, która próbuje oddzielić strukturę dokumentu od warstwy prezetacyjnej przy pomocy kaskadowych arkuszy stylów (CSS). Ponieważ wsparcie większości przeglądarek dla CSS było przez wiele lat niepełne, HTML 4.01 nie okazał się sukcesem w dziedzinie standardyzacji internetu.
Obecnie W3C zaprzestało rozwoju HTML (ostatnia poprawka została wprowadzona 24 grudnia 1999 roku) i postanowiło dostosować go do XML. W wyniku powstał XHTML, dla którego istnieje tryb zgodności z HTML, który to umożliwia wyświetlenie kodu XHTML w przeglądarkach zgodnych z HTML 4. Zmiana ta ma zapewnić większą rozszerzalność i dostępność języka. Z tego powodu właśnie XHTML jest obecnym zalecanym standardem tworzenia stron WWW. Trwają prace nad wersją 2.0, która w przeciwieństwie do wersji 1.0 wnoszącą wiele zmian.
Podstawowe reguły XHTML
Zasady konstruowania dokumentów XHTML – najważniejsze różnice w porównaniu z HTML:
- Dokument powinien rozpoczynać się od deklaracji XML (np. <?xml version=”1.0″ encoding=”ISO-8859-2″?>); nie jest ona wymagana, gdy dokument ma kodowanie znaków UTF-8 lub UTF-16, albo gdy odpowiednie kodowanie zostało określone w nagłówkach HTTP (jednak nawet wtedy warto dołączać deklarację XML, gdyż pozwala ona ustalić kodowanie np. w przypadku zapisania strony na dysku)
- Element główny (<html>) musi zawierać atrybut xmlns określający przestrzeń nazw XHTML: http://www.w3.org/1999/xhtml
- Znacznikowi otwierającemu każdego niepustego elementu powinien odpowiadać znacznik zamykający (np. <li> … </li>)
- Puste elementy muszą także być zamykane (np. zamiast <br> musi być albo <br />, albo ewentualnie <br></br>)
- Elementy muszą być zagnieżdżane w odpowiedni sposób (np. zamiast <p>Tekst z <em>wyróżnieniem</p></em> – <p>Tekst z <em>wyróżnieniem</em></p>); wprawdzie w HTML także istniał taki wymóg, lecz nie był egzekwowany przez przeglądarki
- Nazwy elementów i atrybutów XHTML muszą być pisane małymi literami
- Wszystkie wartości atrybutów muszą być ujęte w cudzysłów (podwójny, np. <td rowspan=”3″> lub pojedynczy, np. <td rowspan=’3′>)
- Niedozwolona jest minimalizacja atrybutów (np. zamiast <textarea readonly> musi być <textarea readonly=”readonly”>)
- Wewnątrz elementów script i style nie można używać komentarzy XML (<!– –>), chyba że zostaną one umieszczone w odrębie sekcji CDATA
- Jeśli zawarte wewnątrz dokumentu arkusze stylów lub skrypty zawierają znaki & lub <, zawartość elementów style i script trzeba umieścić w sekcji CDATA (np.: <style type=”text/css”><![CDATA[ arkusz stylów ]]></style>); alternatywnie można użyć zewnętrznego arkusza stylów / skryptu
- Ze względu na trudności z parsowaniem, nie powinno się używać w XHTML-u javascriptowej metody document.write() i właściwości innerHTML; jednak niektóre przeglądarki już obsługują te konstrukcje także w dokumentach XML.
Struktura dokumentu XHTML
W przeciwieństwie do HTML, w XHTML istnieją trzy elementy, których nie można pominąć: do nich zalicza się deklaracja (prolog) XML, wersja DTD oraz znacznik <html> z odpowiednimi atrybutami. Ma to pomagać w klasyfikacji dokumentu przez przeglądarki i w jego walidacji. W HTML znaczniki nazywano tagami - w XHTML nazywa się je elementami.
Prolog XML
Na początku każdego dokumentu XHTML powinień znaleźć się prolog XML. Prolog to zadeklarowanie zgodności z XML. A wygląda tak:
<?xml version="1.0" encoding="UTF-8"?>
Jeżeli tworzymy stronę z użyciem PHP i prolog XML znajduje się w pliku z rozszerzeniem .php należy wpisać go w formie zrozumiałej dla parsera PHP:
<?php echo '<'.'?xml version="1.0" encoding="UTF-8"?'.'>'."\r\n"; ?>
Prolog XML nie jest wymagany, jeżeli dokument XHTML ma kodowanie znaków UTF-8 lub UTF-16, albo jeśli odpowiednie kodowanie zostało określone w nagłówkach HTTP. Jednak dołączenie deklaracji XML ppozwala ustalić kodowanie, np. przy zapisywaniu strony na dysku.
DOCTYPE - definicja typu dokumentu (DTD)
Następnym ważnym znacznikiem jest <DOCTYPE> - Document Type Definition (DTD) - definiacja typu dokumentu. Jeżeli chodzi o XHTML 1.0 to istnieją w nim trzy wersje DTD: Transitional, Strict oraz Framest.
Najczęściej stosowaną wersją DTD jest Transitional. Jest to forma przejściowa pomiędzy leciwym już HTML a jego nowszym „bratem” XHTML. Wersja ta zezwala na używanie znaczników i atrybutów, które mają status deprecated czyli wycofane.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Należy unikać wersji Transitional - zaleca się używanie wersji Strict.
Wersja Strict, do której powinien dążyć każdy webmaster, wygląda tak:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Trzecia wersja definicji DTD,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Dla XHTML 1.1 istnieje tylko jedna wersja DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
„http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Dokument XHTML bez zdefiniowanego odpowiedniego <DOCTYPE> może być niepoprawnie wyświetlany.
Element HTML
Element <html> jest kolejnym znacznikiem, którego nie można pominąć tworząc dokument XHTML. <html> jest znacznikiem rozpoczynającym dokument XHTML. Powinien on wyglądać tak:
<html xmlns="http://www.w3.org/1999/xhtml">
Dodatkowo, w znaczniku <html> można zadeklarować język dokumentu. Dla dokumentu XHTML 1.0 robi się to za pomocą atrybutu xml:lang=”pl” lang=”pl”, w dokumencie XHTML 1.1 xml:lang=”pl”
Zatem cały znacznik <html> dla HTML 1.0 będzie wyglądał następująco:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
bądź dla XHTML 1.1:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
Element HEAD
Element <head> jest nagłówkiem dokumentu zawierającym informacje o dokumencie i plikach używanych do jego wyświetlenia.
Wewnątrz nagłówka <head> powinny znajdować się takie znaczniki jak <title>, <meta>, <link> czy <script>.
Element TITLE
W elemencie <title> umieszczamy tytuł strony
<title>Tytuł dokumentu</title>
Element META
W każdym dokumencie hipertekstowym powinny znaleźć się metadane. Metadane to dane informujące o autorze, dacie utworzenia dokumentu, klasyfikacji dokumentu, słowach kluczowych itp. Z metadanych korzystają między innymi wyszukiwarki internetowe (choć niektóre meta-informacje są już pomijane).
Metadane umieszcza się w nagłówku <head> w elemencie <meta> umieszczamy np. słowa kluczowe, opis strony, autora strony…
<meta name="Keywords" content="słowa kluczowe" />
<meta name=”Description” content=”opis strony” />
<meta name=”Author” content=”autor strony” />
Element LINK
Element <link> służy do dołączania zewnętrznych arkuszy stylów. Jest to metoda najczęściej spotykana. Daje ona najwięcej możliwości i w pełni wykorzystuje funkcje stylów. Po stworzeniu zewnętrznego pliku CSS można go wykorzystać w kilku stronach, dzięki czemu zyskacie naprawdę dużo czasu…
<link rel="stylesheet" href="styl.css" type="text/css" />
Arkusze CSS można też importować:
<style type="text/css">
@import url(http://www.mojastrona.pl/style.css)
</style>
W XHTML 1.1 atrybut <style> jest w statusie Deprecated.
Dlatego w XHTML powinno dołączać się również arkusz stylów tak samo jak w XML:
<?xml-stylesheet type="text/css" href="style.css"?>
W celu zachowania zgodności z HTML w dokumentach XHTML zaleca się stosowanie górnego zapisu i równocześnie stosowanie znacznika <link>:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<?xml-stylesheet type=”text/css” href=”style.css” ?>
</head>
Dopuszcza się deklarowanie arkusza na samym początku dokumentu:
<?xml version="1.1" encoding="iso-8859-2"?>
<?xml-stylesheet type=”text/css” href=”style.css” ?>
Element BODY
w <body> zawarta jest cała widoczna struktura dokumentu. Jest to tak zwane ciało dokumentu.
Każdy poprawny dokument XHTML posiada tylko jeden znacznik <body> i powinien on znaleźć się wewnątrz znacznika <html>.
Zaleca się, aby atrybut xml:lang=”pl” i lang=”pl” znajdował się właśnie w tym elemencie.
Na koniec zamykamy ciało dokumentu a następnie cały dokument HTML za pomocą elementów </body> i </html>.
Tak w zasadzie powinien wyglądać poprawny dokument XHTML (jeżeli się mylę, lub o czymś zapomniałem proszę mnie poprawić). Po złożeniu wszystkiego w jedną całość będzie to wyglądać mniej więcej tak:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.1//EN”
„http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>
<head>
<title>Tytuł dokumentu</title>
<meta name=”Keywords” content=”słowa kluczowe” />
<meta name=”Description” content=”opis strony” />
<meta name=”Author” content=”autor strony” />
<link rel=”stylesheet” href=”styl.css” type=”text/css” />
</head>
<body>
<p>Pierwszy dokument XHTML</p>
</body>
</html>
Jeszcze jedna uwaga na koniec:
Jakość wykonania strony zależy nie tylko od samego szablonu strony. Dobrą stronę WWW bardzo łatwo można odróżnić od złej - zaledwie po jednej rzeczy: zawartości wewnątrz elementu <body>…
Bo niestety - ciągle jeszcze jednym z głównych błędów przy tworzeniu stron WWW jest umieszczenie treści niezrozumiałej, nieczytelnej, niedostępnej i nieużytecznej…
„Obecnie W3C zaprzestało rozwoju HTML ”
http://www-128.ibm.com/developerworks/xml/library/x-futhtml1/
„jeżeli się mylę, lub o czymś zapomniałem proszę mnie poprawić” xhtml 1.1 wymaga serwowania jako application/xhtml+xml
reod: nie, nie wymaga. Specifikacja wskazuje, ze tak _powinno_ sie serwowac, ale nie mowi o tym, ze _trzeba_.
http://pornel.net/xhtml#sec21
reod:
primo: W3C zaprzestało rozwijać HTML, co nie znaczy, że firmy współpracujące/wspierające W3C nie mogą go rozwijać dalej…
secundo: pornel napisał: XHTML powinien być wysyłany jako application/xhtml+xml - w specyfikacji też jest SHOULD a nie MUST…
Znam różnicę miedzy schould i must. IMHO wysyłanie 1.1 jako taxt/html mija się z celem. Ktoś pragnie xhtml, niech wybierze 1.0 i serwuje jak chce - 1.1 zostawmy dla nowoczencych przegladarek. W FAQ radzą wysyłać jako application/xhtml+xml.
redo: dlatego w swoim artykule pominąłem wzmiankę o application/xhtml+xml - dużo jeszcze wody w Wiśle upłynie zanim sytuacja się poprawi i wszystkie przeglądarki będą sobie z tym radziły…
Faq to nie specyfikacja…
Bellois: nie broń tych co przesyłają XHTML1.1 jako ‚text/html’, bo tylko szkodzisz. No, a jeśli naprawdę uważasz, że to nic złego, to doczytaj w odpowiednim RFC co znacz ’should’ - XHTML1.1 NIE PRZESYŁAMY JAKO TEXT/HTML, o ile nie ma to dobrego uzasadnienia, robimy to tylko w wyjątkowych sytuacjach. Wyjątkową sytuacją nie jest widzimisie łebmajstra.
ffreak: a potrafisz wskazać ten RFC?? Czy to jest jakiś oficjalny dokument wydany przez W3C??
za di:
http://di.com.pl/news/15123,1.html
ludwikc: Spoźniłeś się :D Napisałem już o tym w króciutkim artykule HTML - reaktywacja :D