Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

Jak přejít na XHTML

Marek Prokop, vydáno/aktualizováno: 10.12.2001/21.04.2002

Nedávno jsem článkem "Co je XHTML" reagoval na vaše četné dotazy, co je XHTML a jaký má význam. Dnes bych chtěl poradit těm, kteří se rozhodnou na XHTML přejít. Na stránkách Sovy v síti jsme přechod na XHTML začali před více než týdnem, a protože nám to jde pomalu, ještě jsme neskončili. Nějaké zkušenosti, o které se nyní s vámi mohu podělit jsme však již přeci jen získali.

Abych co nejvíce pomohl s praktickým převodem stránek, rozdělil jsme článek do dvou částí. V první naleznete spíše teoretický a podrobnější výklad rozdílů mezi HTML a XHTML, druhá pak je stručný "checklist", který si můžete vytisknout a při převodu stránek jeho jednotlivé body postupně odškrtávat.

V příštím čísle se k tématu ještě vrátím a pro ty z vás, kteří si dělají, podobně jako Sova, zálusk na striktní typ dokumentu (místo obvyklého "transitional") ještě přidám rady, jak na to.

Rozdíly HTML a XHTML

Záhlaví a struktura dokumentu

Na první rozdíly narazíte již v záhlaví dokumentu. HTML zde mnoho povinných prvků nemělo, kdežto XHTML má.

  1. Před vlastním dokumentem předchází deklarace XML. U dokumentů kódovaných v UTF-8 nebo UTF-16 není sice povinná, ale používat by se raději měla. Pro češtinu v kódování Windows-1250 vypadá takto:

    <?xml version="1.0" encoding="windows-1250"?>

  2. Před kořenovým prvkem musí ještě předcházet deklarace typu dokumentu. Na výběr jsou 3 typy odpovídající klasickým třem typům HTML 4 (viz [2]) — striktní, přechodný a framset:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  3. Kořenem vlastního dokumentu je vždy prvek <html>. Ten musí ve svém atributu "xmlnames" určovat tzv. jmenný prostor (namespace) a jazyk dokumentu. Pro češtinu je to takto:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

  4. Uvnitř prvku <html> musí být vnořeny prvky <head> a <body>, přičemž <head> musí obsahovat prvek <title>. Pro starší prohlížeče je nadále vhodné deklarovat kódování i pomocí metatagu. Nejmenší možný (a smysluplný) dokument v XHTML tedy vypadá nějak takto:

    <?xml version="1.0" encoding="windows-1250"?>

    <!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="cs" lang="cs">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
        <title>Název dokumentu</title>
      </head>
      <body>
        <p>Text dokumentu.</p>
      </body>
    </html>

Rozdíly ve struktuře a syntaxi značek

Ve struktuře a syntaxi HTML značek všeobecně jsou především tyto rozdíly:

  1. Dokument musí být ve smyslu pravidel XML správně utvořený (well-formed). To znamená, že prvky musí být správně vnořovány a nesmí se překrývat. Příkladem správného vnoření budiž:

    <p>Toto je věta se <em>zdůrazněním</em>.</p>

    Nesprávné vnoření (překrývání) vypadá takto:

    <p>Toto je věta se <em>zdůrazněním.</p></em>

  2. Názvy prvků (tj. značky, tagy) a názvy atributů musí být malými písmeny. Správně je tedy <p id="XY">, kdežto <P ID="YX"> je špatně.

  3. Neprázdné prvky musí mít koncovou značku. Nelze tedy napsat tři odstavce takto:

    <p>První odstavec
    <p>Druhý odstavec
    <p>Třetí odstavec

    ale musí být napsány takto:

    <p>První odstavec</p>
    <p>Druhý odstavec</p>
    <p>Třetí odstavec</p>

  4. Z definice prázdné prvky (např. <hr>, <br>) musí mít také buď koncovou značku, nebo musí končit "/>". Vzhledem ke kompatibilitě se staršími prohlížeči se doporučuje druhá varianta, tedy např. <br />, <hr />, atd.

  5. Hodnoty atributů musí být v uvozovkách. To platí i pro číselné a jednoslovné hodnoty. Zápis <table width=100> je tedy v XHTML špatně a správně je <table width="100">.

  6. Minimalizace atributů je nepřípustná. To znamená, že atribut vždy musí mít explicitní hodnotu. Typicky se jedná např. o atributy checked (prvek input), selected (prvek option). Tyto atributy tedy musí být rozepsány takto:

    <dl compact="compact">

  7. Klientské skripty obsahující znaky < a & musí být vkládány do sekce CDATA takto:

    <script>
      <![CDATA[
        ... text skriptu ...
        ]]>
    </script>

    Protože s tímto zápisem mohou mít starší prohlížeče problémy, doporučuje se raději používat skripty z externích souborů.

  8. V žádném případě neukrývejte vkládané skripty či definice stylů do komentářů, jak se dělávalo v HTML. V XHTML může být obsah všech komentářů před zpracování odstraněn!

  9. Je-li v hodnotách atributů použit znak ampersand (&) — často bývá např. v URL — je třeba ho zapsat pomocí entity &amp;, tedy např. takto:

    <a href="http://www.xyz.cz/abc.php?a=1&amp;b=2">

Checklist

Při převodu každé své stránky postupujte podle následujících bodů a každý splněný si raději odškrtněte. Na závěr nezapomeňte provést validaci, např. na [3].

  1. Před vlastní dokument vložit deklaraci XML

    <?xml version="1.0" encoding="windows-1250"?>

  2. Za deklarací XML zaměnit, resp. vložit deklaraci typu dokumentu.

  3. Prvku <html> přidat atributy xmlns, xml:lang a lang.

  4. Zkontrolovat, zda prvním prvkem uvnitř <html> je <head>. Pokud ne, vložit.

  5. Zkontrolovat, zda je v <head> metatag označující kódování. Pokud ne, vložit.

  6. Zkontrolovat, zda je v <head> prvek <title>. Pokud ne, vložit.

  7. Zkontrolovat, resp. doplnit koncové značky. Zejména se týká <p>, <li>, <dd>, <dt>, <option>, <td>, <th>, <tr>.

  8. Doplnit uzavírací " /" do prázdných prvků <base>, <br>, <hr>, <img>, <input>, všech tagů meta a dalších.

  9. Převést názvy všech značek na malá písmena.

  10. Převést názvy všech atributů na malá písmena.

  11. Hodnoty všech atributů uzavřít do uvozovek.

  12. Rozvinout zápis všech minimalizovaných atributů (checked="checked").

  13. Ošetřit klientské skripty (buď použít CDATA, nebo externí soubor), odstranit HTML komentáře okolo vložených klientských skriptů.

  14. Odstranit HTML komentáře okolo vložené definice stylů (<style>), nebo převést tuto definici do externího souboru.

  15. Všechny znaky & v hodnotách atributů nahradit &amp;.

  16. Ověřit správnost stránky validátorem.

Související odkazy

  1. Co je XHTML
  2. Používáte správný typ HTML dokumentu
  3. Validátor W3C

Poznámka k auktualizovanému vydání: Oproti původnímu vydání ze 10.12.2001 byly do definic typů dokumentů doplněny absolutní cesty k DTD.

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.