XHTML – základní pojmy a prvky

31. července 2002

•

Ztrácet se v XHTML hned na začátku není nejlepší, proto vysvětlím pojmy, se kterými se budete setkávat, a hned po první stránce v XHTML představím také základní prvky XHTML – elementy a atributy.

Nejdříve si tedy upřesněme pojmy, na které budeme v průběhu seriálu často narážet, a proto není vhodné se k nim neustále vracet:

Interpret XHTML – ve specifikacích je používán výraz User Agent (UA). Jedná se o zařízení, které nějakým způsobem interpretuje XHTML. Řadíme sem prohlížeče (jak vizuální, zobrazující obsah stránky, tak nevizuální, interpretující stránku zvukově nebo třeba jako braillovský výstup) nebo různé vyhledávací a analyzační roboty. Zde je důležitá poznámka, že by interpret XHTML měl ignorovat prvky XHTML, které nezná, což zaručuje, že bude moci zobrazovat i stránky, které vychází z modernějších standardů než on sám.
Zavržený (deprecated) – jako zavržený je označen v XHTML každý prvek, který je již zastaralý, jeho význam byl nahrazen jiným prvkem. V budoucích specifikacích bude tento prvek vypuštěn, vyskytuje se zde kvůli zpětné kompatibilitě. Specifikace XHTML 1.0 Transitional je oproti XHTML 1.0 Strict bohatší právě o tyto zavržené prvky. Většinou se jedná o prezentační prvky, které nemají v XHTML co dělat, a jsou důležité jenom kvůli starým vizuálním prohlížečům nepodporujícím CSS.

Základní prvky XHTML si vysvětlíme na následujícím příkladu XHTML stránky:

<?xml version=“1.0″ encoding=“iso-8859-2″?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“>
<head>
 <meta http-equiv=“content-language“ content=“cs“ />
 <meta http-equiv=“content-type“ content=“text/html; charset=iso-8859-2″ />
 <title>Naše první XHTML stránka</title>
</head>
<body>
 Tady je naše první XHTML stránka!
</body>
</html>

Můžete si zkusit tento kód zkopírovat do textového souboru, uložit ho s příponou html (mohli byste použít i příponu xhtml, ale některé prohlížeče se v takovém případě musí ještě zvlášť nastavovat, a proto používání této přípony příliš nedoporučuji) a zobrazit v prohlížeči. Měli byste vidět text „Tady je naše první XHTML stránka!“ a v nadpisu okna by se měl nacházet text „Naše první XHTML stránka“. Pokud používáte Windows, je také možné, že budete mít problémy s kódováním češtiny (tomuto tématu se ještě budeme dopodrobna věnovat) u této stránky, proto si ji můžete prohlédnout správně kódovanou.

Nyní se již konečně dostaneme k vysvětlení základních prvků XHTML. Zatím se nebudeme věnovat prvním dvěma řádkům, necháme si je na později. XHTML dokument se skládá z hlavičky (mezi <head> a </head>) a těla (mezi <body> a </body>). Text, který se nachází v hlavičce, prohlížeč přímo nezobrazuje, může ho zpřístupnit jiným způsobem. Nachází se zde informace o dokumentu (například kódování a jazyk dokumentu, informace o autorovi stránky a copyrightu nebo shrnutí toho, co dokument obsahuje). Samotný obsah stránky se nachází v těle dokumentu.

Elementy

Nyní se ještě jednou podívejte na tělo dokumentu. Nachází se zde text obklopený sekvencí znaků  a . Této sekvenci znaků společně s textem uzavřeným uvnitř se v XHTML říká element (někdy se setkáte i s nesprávným označením tag). Element je většinou tvořen otevírací částí (v našem příkladu ), obsahem (v našem příkladu text „Tady je naše první XHTML stránka!“) a uzavírací částí (v našem příkladu ).

Otevírací část je vždy tvořena znakem <, jménem elementu (v našem příkladu p), případnými atributy a znakem >.

Obsah elementu může být tvořen textem nebo dalšími elementy. Pokud je tvořen textem, je tento text určen k interpretaci (zobrazení prohlížečem, indexace robotem…), přičemž ta je závislá na jménu elementu a jeho atributech. Jestliže tedy zůstaneme u našeho příkladu, měl by být text v prohlížeči zobrazen v odstavci (protože element p značí odstavec) a podle případných CSS vlastností. V našem příkladu ale žádné takové nejsou – kdybychom například v CSS definovali, že odstavce se mají zobrazovat zarovnané na střed a že element se jménem prvni_odstavec (jména se elementům udělují pomocí atributu id) se má zobrazit červeně, musel by ho prohlížeč takto zobrazit.

Uzavírací část je vždy tvořena znakem <, /, jménem elementu a znakem >. Zde již nejsou povoleny žádné atributy, tato část slouží pouze k vymezení působnosti elementu.

Poznámka: Pokud chceme označit pouze otevírací nebo uzavírací část elementu, můžeme použít slovo tag – otevírací tag (start tag) nebo uzavírací tag (end tag).

Pokud do sebe vnořujeme více elementů, není je možné křížit mezi sebou – vše si budeme ilustrovat na tomto příkladu:

můžete také navštívit náš <a href=“shop.html“>on-line obchod</a> // špatně
můžete také navštívit náš <a href=“shop.html“>on-line obchod</a> // dobře

Pokud se prostě nějaký element nachází uvnitř jiného elementu, musí se tam nacházet celý, tedy jeho otevírací část, obsah i uzavírací část.

V XHTML existují také elementy, které nemají povolen žádný obsah (empty elements). V našem příkladu je zástupcem této skupiny element meta, ale řadíme sem například i element pro vytvoření oddělovací čáry, přechod na novou řádku a podobně. Tyto elementy mohou proto obsahovat jen otevírací a uzavírací část, tedy <jmenoelementu></jmenoelementu>. Tento zápis, i když naprosto správný, je ale zbytečně dlouhý, proto ho můžeme zkrátit tak, že na konec otevírací části přidáme znak / a uzavírací část vypustíme. Vznikne nám tedy <jmenoelementu/> (jen dodávám, že i elementy bez obsahu mohou obsahovat atributy). Tento zápis je syntakticky správný a nedělá problémy novým prohlížečům. U starých prohlížečů ale mohou nastat problémy, proto je třeba před / přidat ještě mezeru, čímž vznikne zápis <jmenoelementu />

Atributy

Atributy, někdy nazývané též parametry či vlastnosti, se nachází v otevírací části elementu, oddělené alespoň jednou mezerou jak od jména elementu, tak od ostatních atributů. Slouží k upřesnění významu elementu nebo k přiřazení různých vlastností elementu (například u elementu sloužícího k vyznačení odkazu mohu pomocí atributu definovat, kam má odkaz vést). Každý atribut je tvořen jménem atributu, dále následuje znak = a hodnota atributu, obklopená uvozovkami (") nebo apostrofy (') – tedy jmenoatributu="hodnotaatributu" nebo jmenoatributu='hodnotaatributu'. Kolem znaku = se navíc může nacházet libovolný počet mezer.

U atributů nezáleží na jejich pořadí, následující dva zápisy mají tedy stejný význam:

Text
Text

Citlivost na velká a malá písmena

Jak už víte, XHTML je podmnožinou XML, proto musíte psát jména elementů a atributů přesně tak, jak jsou definována, včetně malých a velkých písmen. V XML jsou, narozdíl od SGML, elementy se jmény Element a element dva zcela odlišné elementy. Jména elementů a atributů v XHTML jsou definována malými písmeny, a proto je to jediný přípustný zápis.

U hodnot atributů záleží na konkrétním případě (u každého atributu si řekneme, jestli je citlivý na velká a malá písmena) a u obsahu elementu záleží už jen na vás, protože se jedná o obsah stránky, a ten je pouze vaší starostí.

Příště si představíme komentáře v XHTML, znakové entity a vysvětlíme si XML deklaraci, Definici typu dokumentu (DTD) a Deklaraci typu dokumentu.