XHTML – odkazy

16. ledna 2003

•

Dnes si budeme povídat o odkazech – řekneme si, jak je vytvářet, ale především jak je správně používat. Tento článek ve skutečnosti předchází minulému článku, při jeho korekturách však bylo jejich vzájemné pořadí přehozeno, za což se vám redakce Intervalu omlouvá.

Co jsou to odkazy?

Odkaz (nebo také hyperlink či zkráceně link) je obecně místo v XHTML dokumentu, pomocí kterého může uživatel přejít na jiné místo, které se nachází buď v aktuálním dokumentu nebo kdekoli jinde na internetu (v takovém případě může jít například o jiný XHTML dokument, obrázek, video…). K přemístění na nové místo dojde po aktivaci odkazu, například kliknutím myší, stiskem klávesy nebo hlasovým příkazem.

Jako uživatelům webu jsou vám odkazy určitě důvěrně známé. Jedná se o jeden ze základních kamenů webu, je to jakási specialita webových dokumentů – to, co dělá z jednotlivých dokumentů umístěných ve všech koncích světa jednu velkou „pavučinu“.

Jakou funkci mají odkazy?

Uživatel se pomocí nich může pohodlně pohybovat po webu.
Odkazy slouží ke zvýraznění textu. Weboví uživatelé, známí svou nechutí číst dlouhé texty, často skáčou očima po jednotlivých odkazech. Pokud jsou texty odkazů zajímavé a jednoduché, potom přikročí k detailnějšímu čtení stránky. Pokud jsou ale nicneříkající (např. „zde“, „dále“ apod.), potom je stránka přestává zajímat.
Odkazy specifickým způsobem obohacují styl psaní na webu. Představte si, jak by vypadala předcházející věta, kdyby v ní chyběl odkaz a stála sama o sobě. Ano, hloupě, protože nijak neobhajuje tvrzení, které je jejím obsahem. Pokud ji ale uvedeme s odkazem, hned je vidět, že za tvrzením stojí ještě nějaké argumenty – dokonce potom věta vypadá tajemně, vybízí uživatele podívat se, co se skrývá za daným odkazem.
Pomocí odkazů se po webu pohybují roboti vyhledávačů, a proto je třeba volit je citlivě a konzistentně.
Zdroje, které uvádíte pomocí odkazů, jsou součástí dojmu, který budou mít uživatelé z vašeho webu.

Samozřejmě, že jsem neuvedl všechny vlivy, které mají odkazy na vaší stránku. Chtěl jsem pouze ilustrovat, o jak důležitou součást stránky se jedná. Odkazům byste měli věnovat tu největší námahu, protože to za to jednoduše stojí a vydané úsilí se vám nepochybně vrátí.

Element a – vytváření odkazů

Povolený obsah: %a.content;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
%focus;: Tato parametrická entita obsahuje atributy specifické pro elementy, které mohou obdržet tzv. fokus – ten se uplatňuje obvykle při procházení stránky klávesnicí (typicky pomocí klávesy Tab). Řadíme sem atributy accesskey, tabindex, onfocus a onblur. Kromě odkazů mohou fokus obdržet také klikací mapy (forma odkazů pro efektivní používání obrázků) a prvky formulářů (k ouběma tématům se v seriálu ještě dostaneme). Touto entitou se budeme zabývat v příštím díle.
href %URI; #IMPLIED: Tento atribut specifikuje URI adresu odkazovaného zdroje. Můžeme zde použít i tzv. identifikátor fragmetu, pomocí kterého se odkážeme na určité místo v (X)HTML dokumentu – tomuto tématu se věnujeme níže.
charset %Charset; #IMPLIED: Tento atribut specifikuje kódování zdroje, na který je odkazováno. Uvádí se obvykle pouze pokud je zdrojem (X)HTML dokument, ale jeho použítí není nutné a leckdy ani možné.
type %ContentType; #IMPLIED: Pomocí tohoto atributu říkáte, jakého MIME-typu je zdroj, na který odkazujete. Interpret XHTML se pak může rozhodnout, jestli bude zdroj přenášet nebo ne (pokud tento MIME-typ nepodporuje).
name NMTOKEN #IMPLIED: Tento atribut pojmenovává daný odkaz, aby se na něj mohl odkazovat jiný odkaz. V XHTML 1.0 se nachází pouze kvůli kompatibilitě se staršími prohlížeči, ale v XHTML 1.1 se již nevyskytuje. Místo něj byste měli používat atribut id. Odkazováním se na konkrétní místa v dokumentu se zabýváme dále v článku.
hreflang %LanguageCode; #IMPLIED: Tento atribut určuje základní jazyk odkazovaného zdroje.
rel %LinkTypes; #IMPLIED: Tento atribut specifikuje vztah odkazovaného zdroje k aktuálnímu dokumentu. Např. pokud máme soubor druha-kapitola.html, který je druhou částí v nějaké souvislé sérii dokumentů, potom bychom odkaz z tohoto souboru na soubor treti-kapitola.html, který je třetí částí v té samé sérii, mohli doplnit o atribut rel="next" (tedy další dokument v sérii). Možným hodnotám tohoto atributu se budeme věnovat v příštím díle.
rev %LinkTypes; #IMPLIED: Tento atribut je podobný jako atribut rel, ovšem specifikuje vztah aktuálního dokumentu k odkazovanému dokumentu. Pokud bychom uvážili předchozí příklad, potom bychom mohli odkaz z druhého dokumentu na třetí dokument doplnit o atribut rev="prev" (tedy předchozí dokument z dané série), protože druhý dokument je předchozím dokumentem pro třetí dokument. Opět opakuji, že možným hodnotám tohoto atributu se budeme věnovat v příštím díle.
shape %Shape; "rect": Tento atribut se používá, pokud je odkaz používán jako obrázková mapa – proto se mu budeme věnovat až v díle o tomto tématu.
coords %Coords; #IMPLIED: Stejně jako předchozí atribut i tento se používá, pokud je odkaz používán jako obrázková mapa a stejně tak se mu budeme věnovat až v díle o tomto tématu.

Element a v XHTML 1.0 Strict DTD

Obsahem elementu a (z angl. anchor, tedy kotva) je text nebo externí objekt (například obrázek), který se má stát obsahem odkazu. Tento obsah je v DTD deklarován na speciální parametrickou entitu %a.content; – není na ní ale nic zvláštního, jedná se pouze o entitu %Inline; bez elementu a, protože není povoleno odkazy vnořovat do sebe. Parametrickou entitu %Inline; jsme si ještě nepředstavovali, ale již jsme se se ní setkali u elementů p a span, může obsahovat nejrůznější řádkové elementy. Sám může být element a obsažen pouze v těle dokumentu (ne ale přímo v elementu body):

…
<body>
<p><a href=“http://www.interval.cz“>Interval.cz – web, grafika a e-komerce</a></p>
</body>
…

Tento odkaz se zobrazí asi takto: Interval.cz – web, grafika a e-komerce

Další příklad, tentokrát s využitím několika atributů elementu a:

…
<html xmlns=“http://www.w3c.org/1999/xhtml“ lang=“cs“ xml:lang=“cs“>
…
<body>
…
<a href=“http://the-best-web-on-the-web.com“ hreflang=“en“ charset=“utf-8″ type=“application/xhtml+xml“
lang=“en“ xml:lang=“en“ title=“The Best Web on the Web“>an english page</a>
…
</body>
</html>

Každý odkaz by měl sám o sobě, bez jakéhokoli kotextu, popisovat zdroj, na který odkazuje, mělo by z něj být jasně patrné, kam vede. Je to kvůli tomu, že odkazy jsou často procházeny bez kontextu. Například hlasové prohlížeče často nejdříve předloží uživateli seznam odkazů a až poté případně prochází celou stránkou, opomenout nemůžeme ani vyhledávače. Není kvůli tomu naštěstí nutné dávat celý popis jako text odkazu, k úplnému popisu můžeme využít atribut title. Příklad:

Tvorbou webu se zabývá mnoho serverů, ale jenom málo z nich <a href=“http://www.interval.cz“ title=“Interval.cz – web, grafika a e-komerce“>profesionálně</a>.

Ve vizuálních prohlížečích bývají odkazy podtržené a navíc odlišené barvou. Toto zobrazení můžete změnit pomocí stylů, ale rozhodně by i potom měly být odkazy dostatečně kontrastní vzhledem k normálnímu textu.

Atributy name a href můžete použít současně v jednom elementu a, což znamená, že jeden element a může být zároveň odkazem i cílem jiného odkazu. Pokud ale element a slouží pouze jako cíl jiného odkazu, potom byste zde neměli používat žádné z atributů pro bližší určení zdroje: charset, type, hreflang, rel a rev.

U atributů pro bližší určení zdroje ještě chvíli zůstaneme. Pokud je použijete, bude se vám zdát, že nemají v podstatě žádný praktický význam, vizuální prohlížeč interpretuje odkaz stejně, jako by tam nebyly. Nenechte se ale mýlit. Jejich důsledným používáním se zlepší logická struktura vašeho webu, což mimo jiné kladně ocení vyhledávací roboti. Navíc rozličná malá zařízení pro přístup na internet, která se již dnes prosazují, nemají tak skvělé výpočetní možnosti jako dnešní počítače, a proto nemohou, na rozdíl od dnešních počítačů, zobrazit každý soubor, na který odkazujete. Podobně jsou na tom i zařízení pro handicapované (i když zde se jedná spíše o to, co je schopen přijímat jejich uživatel). Uváděním těchto atributů jejich uživatelům velmi usnadníte práci. Posledním a možná nejpádnějším důvodem pro uvádění těchto atributů je možnost odlišit různé typy odkazů ve stylech (například pomocí atributových selektorů CSS).

Odkaz na konkrétní místo v dokumentu

Pokud si v dokumentu pojmenujeme určité místo, můžeme se na něj odkazovat tak, že v URI adrese za jménem dokumentu uvedeme znak „#“ (zvaný též „sharp“, „hash“ a pod.), následovaný jménem, které jsme místu přidělili (v tomto jménu bychom měli dodržet přesně velká a malá písmena). Pokud tedy máme soubor dokument1.html na serveru http://mujserver.cz, v kterém se nachází pojmenované místo tady, potom bychom mohli na toto místo vytvořit odkaz následujícím způsobem:

<a href=“http://mujserver.cz/dokument1.html#tady“>text odkazu</a>

Samozřejmě, pokud se dokument nachází na stejném serveru, můžeme použít i relativní URI. Pokud se chceme odkázat na nějaké místo v aktuálním dokumentu, stačí pouze uvést „#“ následované jménem místa:

…
<body>
<p><a name=“prvni_odstavec“ id=“prvni_odstavec“>ahoj!</a></p>
<p><a href=“#prvni_odstavec“>první odstavec</a></p>
</body>
…

Již jsme to nakousli, tak tedy jak vytvořit místo v XHTML dokumentu, na které se lze odkazovat? Musíme pojmenovat určitý fragment kódu, což se v XHTML dělá pomocí atributu id, který můžeme použít prakticky u všech elementů. Tedy například takto:

Takovéto odkazování je zcela v souladu s nejnovějšími standardy a ovládají ho všechny novější prohlížeče. Starší prohlížeče ovšem rozpoznají místo, na které se lze odkazovat, pouze pokud je tvořeno pomocí elementu a a jeho atributu name. Proto je v XHTML 1.0 tento atribut u elementu a zachován, ovšem je již zavržený a nedoporučovaný. Vždy, když ho u elementu a použijete, měli byste pužít i atribut id se stejnou hodnotou (jako jsme to udělali v příkladu výše). Také byste se měli vyhnout elementům a bez jakéhokoli obsahu – nejlépe je do něj uzavřít nějaký text (nemusíte se bát, že by ho vizuální prohlížeče v takovém případě interpretovaly jako běžný odkaz, protože zde není přítomen atribut href).