Bezproblémový přechod na XHTML

Nacházíte se zde: Novinky » Články » Bezproblémový přechod na XHTML

Úvod do XHTML

Co je to XHTML?

XHTML (angl. eXtensible Hyper Text Markup Language) je nástupce HTML 4, postavený na bázi jazyka XML (angl. eXtensible Markup Language). XHTML (verze 1.0) vzniklo začátkem roku 2000, jako odpověď na „anarchii“, která panovala okolo HTML 4.01 (a webu vůbec).

Proč se XHTML vyplatí

Kód napsaný v XHTML je oproti zastaralému HTML přehlednější, sémantičtější a lépe se v něm orientuje. XML dokument můžete transformovat (XSLT, XPath), modularizovat anebo jej jednoduše přetvořit pro WAP (angl. Wireless Aplication Protocol). Velice dobře si také rozumí s vyhledávači (viz závěr). Je toho mnoho — XHTML je vkladem do budoucna!

Specifikace

První krůčky

DTD (angl. Document Type Definition)

XHTML 1.0 používá 3 typy DTD:

Strict — Nejpřísnější norma, vyjímá formátovací prvky

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

Transitional — „Přechodná“ norma, snaží se zachovat zpětnou kompatibilitu, proto je poměrně mírná — v současné době nejrozšířenější XHTML.

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

Frameset — Norma určená pro stránky s rámci (angl. frames).

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

XHTML 1.1 definuje pouze:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Identifikace dokumentu

Ještě před hlavičkou je nutné definovat použitý jazyk a odpovídající kódování.

XHTML 1.0

<?xml version="1.0" encoding="iso-8859-2"?>
<!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">

XHTML 1.1

<?xml version="1.0" encoding="iso-8859-2"?>
<!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="cs">

XHTML 1.0 Strict a XHTML 1.1 se téměř neliší a tak v tomto případě u XHTML 1.1 jedinou změnou (krom pochopitelně odlišného DTD) nepřítomnost lang="cs".

Poznámka: Pokud je stránka v kódování UTF-8 nebo UTF-16, lze XML deklaraci zkrátit: <?xml version="1.0"?> — můžete tedy vynechat encoding.

Dobrá rada: Kvůli starším prohlížečům Vám doporučuji definovat jazyk ještě meta tagem, např.: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />.

Zapamatujte si

  1. Vše malými písmeny
  2. Hodnoty musí být v uvozovkách
  3. Každý tag musí být uzavřen
  4. Tagy se nesmí křížit
  5. Některé skripty se vkládají jako CDATA
  6. Nepoužívejte minimalizaci atributů
  7. Styly nepatří do komentářů
  8. Ampersand se píše entitou

Zapomeňte

  • Na tagy, které nesou pouze formátovací informaci — align, font, b apod. (podrobněji se tomu budu věnovat ke konci článku).

Naučte se CSS!

Většina překonaných (angl. deprecated) příkazů z dob HTML 4.01 (příp. HTML 4.0, HTML 3.2) se v XHTML řeší pomocí CSS, proto je znalost tohoto formátovacího jazyka nezbytná.

Výuku CSS má nejlépe zpracovanou Dušan Janovský, vynikající je také 18 dílný seriál Kaskádové styly CSS od Petra Staníčka.

Krok za krokem

1. Vše malými písmeny

Názvy tagů, atributů a hodnot musí být malými písmeny, jinak je XHTML nepochopí (netýká se to velikosti písma u názvu souborů). (Element and atribut names must be in lower case)

Špatně: <IMG SRC="…" ALT="…">
Správně: <img src="…" alt="…" />

Všimněte si lomítka u správného řešení, uzavírá se jím nepárový tag img, ale to trochu předbíhám (podrobnější informace v bodu 3).

Poznámka: Psaní malých písmen se týká také CSS.

2. Hodnoty musí být v uvozovkách

Specifikace HTML 4.0 vypustila podmínku uzavírat hodnoty bez znamének „+“ a „−“ do uvozovek (např. <font size=5> bylo v té době v pořádku), s XHTML se tato podmínka vrací — všechny parametry musí být v uvozovkách. (Attribute values must always be quoted)

Špatně: <img src=… alt=… />
Správně: <img src="…" alt="…" />

3. Každý tag musí být uzavřen

V HTML se rozlišují dva typy tagů — párové a nepárové. Párový je např. p, nepárový img. Specifikace XHTML požaduje důsledné uzavírání obou typů. (For non-empty elements, end tags are required)

Nepárové tagy uzavírejte mezerou a lomítkem (dle specifikace sice můžete mezeru vynechat, já Vám to ale nedoporučím — je tam opět z důvodu zpětné kompatibility). Již zmíněný img, tak bude vypadat takto: <img src="…" />. Tímto způsobem „ošetřete“ všechny nepárové tagy — meta, link, hr, input, br atd.

Poznámka: Zalomení řádku (tag br) můžete zapsat i takto: <br></br> — je to správně — prohlížeče to však nepochopí a zalomí řádek nadvakrát. Použijte <br />.

4. Tagy se nesmí křížit

Křížení (nelogické zanoření) tagů ztěžuje hledání případných chyb v kódu a tak Vám toto pravidlo usnadní práci. (Document must be well-formed)

Špatně: <p> … <strong> … </p> … </strong>
Správně: <p> … <strong> … </strong> … </p>

5. Některé skripty se vkládají jako CDATA

Skripty (JavaScripty, Flash aj.) obsahující nepovolené znaky „<“ nebo „&“ (ampersand) vkládejte jako tzv. „CDATA“. (Script and Style elements)

<script type="text/javascript">
     <![CDATA[
          …              
     ]]>
</script>

Dobrá rada: Doporučil bych Vám raději umístit klientské skripty do externího souboru, odpadne Vám řada pozdějších nepříjemností.

6. Nepoužívejte minimalizaci atributů

XML (a tudíž ani XHTML) nepodporuje minimalizaci atributů, proto musí být hodnota atributů zapsána v „rozvitém“ tvaru. (Attribute Minimization)

Špatně: <dl compact>
Správně: <dl compact="compact">

Další příklad:

Špatně: <input type="radio" checked>
Správně: <input type="radio" checked="checked">

Týká se to ještě tagu input (atribut checked) a option (atribut selected).

7. Styly nepatří do komentářů

Poměrně často se používá vkládání CSS zápisu nebo skriptů do komentářů. V XHTML se tomu vyhněte, obsah by nemusel být prohlížečem zpracován. (Embedded Style Sheets and Scripts)

8. Ampersand se píše entitou

U dynamicky generovaných stránek (např. PHP) se často předává v řetězci několik parametrů spojených znakem „&“ (ampersand). V XHTML musíte tento znak převést na entitu (alternativní kód) &amp;.

Např.: http://www.server.cz/stranka.php?uid=123&amp;od=15

Zakázané atributy povolených tagů

Celá řada povolených tagů má pro změnu zákaz některých atributů (týká se to zejména striktní verze). Je to logické, téměř vše co je zakázané lze totiž plně zastat kaskádovými styly. Nejlépe toto téma zpracoval Marek Prokop v článku XHTML — buďte striktní. Za návštěvu stojí také: XHTML: Differences between Strict & Transitional.

Problematiku přehledně vysvětluje také Comparison of Strict and Transitional XHTML.

Nová okna v XHTML

Kolem vyjmutí atributu target pro odkaz (i formulář) se vedly bouřlivé diskuse. Mimo jiné to znamená, že standardní cestou nelze v XHTML otevřít odkaz do nového okna. Řešení však existují. Gez Lemon používá modularizaci: Standards-Compliant New Windows. Tyler Queen sedmiřádkový JavaScript: target="_blank".

Nejjednodušší postup:

<a href="http://www.example.com" 
onclick="window.open(this.href); return false;">Example</a>

Lepší postup (zaslal JohnyB):

<a href="http://www.example.com" 
onclick="return!window.open(this.href);">Example</a>

Optimalizace pro vyhledavače

Není tajemstvím, že dobře napsané XHTML stránky se umisťují ve vyhledávačích poměrně vysoko. Je to dáno tím, že u nich dochází k podstatnému oddělení obsahu od formy (ta se shrne do externího CSS souboru). vyhledavače tak při prohlížení stránky nečtou pouze „nepoživatelný“ kód, ale především obsah — a ten jim chutná!

Nechci tím říct, že Vám XHTML kód zaručí přední pozice ve vyhledávačích. Jsem si ale jist, že kdybyste měli dvě (co do obsahu) naprosto stejné stránky, z nichž jedna by byla v XHTML a druhá v HTML (s použitím tabulek a všeho co to obnáší), tak se XHTML stránka umístí líp.

Relevantní odkazy:

Vloženo: 1.1.2004, aktualizováno: 17.1.2004


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4