XHTML – základní atributy, element head

V dalším díle našeho seriálu o XHTML si představíme základní atributy typické pro většinu elementů a také se začneme zabývat hlavičkou dokumentu, konkrétně elementem head.

Entita %coreattrs; – základní atributy

Do této entity řadíme několik atributů, které se dají použít u většiny elementů. V případě, že lze u elementu použít všechny čtyři, jsou zastupovány zmiňovanou entitou, jinak se vyskytují jednotlivě. Jsou to:

id       ID       #IMPLIED

Pomocí tohoto atributu lze elementu přiřadit jméno, které musí být jedinečné pro celý dokument (tzn. jméno mujElement můžeme přiřadit v dokumentu pouze jednomu elementu). V hodnotě tohoto atributu nejsou rozpoznávány znakové entity, tzn. element se jménem mujΔElement budete vždy používat jen jako mujΔElement, ne jako mujΔElement. Tomu, jak lze toto jméno využít, se věnujeme o něco níže.

class       CDATA       #IMPLIED

Pomocí tohoto atributu můžeme element přiřadit do jedné nebo více tříd. Jako hodnota je udáváno jméno třídy – pokud chceme element přiřadit do více než jedné třídy, musíme je od sebe oddělit bílými místy (mezera, zlom řádky, tabulátor) a na jejich pořadí nezáleží (tzn. class="trida1 trida2" je stejné jako class="trida2 trida1"). Stejná třída může být přiřazena libovolnému počtu elementů. Tímto atributem se dnes také ještě budeme zabývat.

style       %StyleSheet;       #IMPLIED

Díky tomuto atributu můžete danému elementu nastavit vizuální, popřípadě hlasové vlastnosti pomocí nějakého stylového jazyka – dnes je jím v podstatě výhradně CSS, protože jiný současné prohlížeče neovládají. I tak ale, pokud chcete tento atribut využívat, musíte udat používaný stylový jazyk, a to pomocí elementu meta – ještě se tím budeme zabývat. V tomto atributu jsou rozpoznávány znakové entity. Citlivost na velikost písmen závisí na použitém stylovém jazyku, např. CSS citlivé na velikost písmen není. V případě použití CSS u tohoto atributu je syntaxe vlastnost: hodnota, přičemž jednotlivé vlastnosti jsou odděleny středníkem – nepoužívají se zde tedy selektory, složené závorky ({}) ani @-pravidla.

Atribut style popírá jednu ze základních myšlenek XML a XHTML, tedy oddělení struktury (reprezentované XHTML) a vzhledu (reprezentovaného nějakým stylovým jazykem, např. zmiňovaným CSS) – proto je od něj dnes upouštěno a ani já vám jeho používání nedoporučuji. Daleko lepším řešením je odkazovat se v XHTML souboru na soubor s externí definicí stylů – o tom bude řeč v jednom z následujících dílů.

title       %Text;       #IMPLIED

Tento atribut specifikuje popis elementu, který může uživateli pomoct v orientaci na stránce. Většina vizuálních prohlížečů ho interpretuje jako tzv. tooltip – tedy informaci, která se zobrazí u kurzoru myši v momentě, kdy ji uživatel podrží nad daným elementem. Hlasové prohlížeče obsah tohoto atributu čtou, takže ani jejich uživatelé nebudou připraveni o vaše sdělení – naopak, tento popisek je pro podobné prohlížeče velmi důležitý – to z toho důvodu, že uživatel zde vaši stránku nevidí celou, a proto se na ní hůře orientuje.

Vřele vám tedy doporučuji tento atribut používat co možná nejčastěji, např. ke kontextové nápovědě, sdělení klávesové zkratky pro daný element (pokud element umožňuje její nastavení), popisu obsahu odkazů (to je obzvlášť důležité – u každého odkazu by mělo být jasné kam vede, i když je vytržen z kontextu stránky – tedy když uživatel vidí pouze jeho text a popisek).

Nejdříve se budeme věnovat atributu id, který zajišťuje jedinečné pojmenování elementu. Tohoto pojmenování můžeme využít v mnoha situacích:

• K odkazování se na element v CSS pro přiřazení jedinečného stylu danému elementu.
• Jako cíl odkazu (pokud se chceme odkázat přesně na daný element), odkazy se ještě budeme zabývat.
• Pro odkazování se na element ve skriptech.
• K odkazování se na předdeklarovaný objekt (tímto se ještě také budeme zabývat).
• Pro účely případného přetransformování (např. do databázové tabulky, jiného formátu).

Využití tříd přiřazených elementu pomocí atributu class je potom následující:

• K odkazování se na elementy z dané třídy v CSS.
• K odkazování se na danou skupinu elementů ve skriptech.
• Pro rozřazení elementů pro účely přetransformování.

Nyní se podívejme na příklad využití atributů id a class. Řekněme, že provozujeme internetový obchod s motorovými vozidly a chceme umístit na hlavní stránku stručný výčet naší nabídky. Kromě toho, že bychom měli uzavřít celý výčet do příslušných elementů (dl, dt a dd – v jednom z příštích dílu si je ještě probereme), můžeme výrobky roztřídit do různých skupin tvořených třídami a navíc každý výrobek pojmenovat:

<dl>
<dt id=“skoda“ class=“osobni tuzemske“>Osobní automobily Škoda</dt>
  <dd>Malý vůz s malou spotřebou.</dd>
<dt id=“karosa“ class=“hromadna-preprava tuzemske“>Autobusy Karosa</dt>
  <dd>Mnoho autobusů přesně pro Vaši potřebu.</dd>
<dt id=“tatra“ class=“nakladni tuzemske“>Nákladní automobily Tatra</dt>
  <dd>Nákladní automobily vhodné pro tuzemskou i mezinárodní dopravu.</dd>
<dt class=“osobni nakladni hromadna-preprava zahranicni“>Zahraniční vozidla</dt>
  <dd>Pokud Vám nevyhovují tuzemské výrobky…</dd>
</dl>

V praxi většinou bývají zápisy tříd jednodušší, málokdy potřebujete složitější rozřazení. Nicméně tento zápis nám umožní provádět s výčtem celou řadu věcí, např. v CSS můžeme zahraniční výrobky vykreslit kurzívou, tuzemské tučně, osobní auta modře, autobusy zeleně, nákladní auta červeně, tuzemské nákladní větším písmem atd. Tímto vás samozřejmě nechci navádět k tomu, abyste ze svých stránek dělali cirkus. Jde pouze o to, abyste věděli, jaké možnosti díky správnému rozřazení do tříd máte. Podobné možnosti získáte i pokud chcete uložit informace ze svých stránek do databáze, pokud chcete integrovat na stránkách vlastní fulltextové vyhledávání aj.

Element head – hlavička dokumentu

Povolený obsah: (%head.misc;, ((title, %head.misc;, (base, %head.misc;)?) | (base, %head.misc;, (title, %head.misc;))))

Atributy:

%i18n;

Tato parametrická entita obsahuje atributy internacionalizace, tedy lang, xml:lang a dir.

id       ID       #IMPLIED

Obsahem tohoto atributu je jméno elementu.

profile       %URI;       #IMPLIED

Tento atribut obsahuje URI souboru s profilem meta-dat. Tento profil se potom používá pro všechny elementy meta a link uvnitř hlavičkové části. Pro interprety XHTML není povinné podporovat meta-data. Můžete použít i více URI oddělených bílým místem (mezera, zlom řádky, tabulátor), avšak interpreti XHTML pravděpodobně budou rozeznávat pouze první z nich.
URI zde uvedené může být bráno jako identifikátor nějakého obecně známého profilu, který je používán více webovými stránkami, a dokument tak může být interpretován na základě obecně známých konvencí tohoto profilu. Další možnost je, že interpret XHTML se podívá do profilu na uvedeném URI a na základě něj bude s dokumentem určitým způsobem pracovat.

Element head v XHTML 1.0 Strict DTD

Entita %head.misc; – elementy hlavičky dokumentu

Tato entita se poměrně hojně vyskytuje v deklaraci elementu head výše:

Obsah entity: (script|style|meta|link|object)*

Parametrická entita %head.misc; v XHTML 1.0 Strict DTD

Element head uzavírá celou hlavičkovou část dokumentu. Ta obsahuje informace o dokumentu (stručný popis, seznam klíčových slov, titulek dokumentu) a není vykreslena jako součást stránky, ale interpret XHTML ji může zpřístupnit uživateli jiným způsobem.

Možná jste se trochu zděsili při pohledu na úryvek z DTD reprezentující povolený obsah tohoto elementu – interpretace tohoto úryvku je přitom poměrně jednoduchá: obsahem mohou být elementy z entity %head.misc; (script, style, meta, link a object) v libovolném počtu (nemusí se ale vyskytovat vůbec), právě jeden element title (ten je jako jediný povinný pro každý dokument) a nejvýše jeden element base (nemusí se ale vyskytovat vůbec). Všechny uvedené elementy mohou následovat v libovolném pořadí.