Dva kroky - Vložení kotvy - Vložení odkazu - Příklad - Záludnosti - Výhody - Kombinace - Historie - Mechanismus funkčnosti - Odlišení prokliknuté kotvy - Odkaz na libovolný text ve stránce
Určitě jste se při procházení webu setkali s podivnými odkazy, které nepřepínaly do jiného textu, ale jenom trochu odrolovaly text někam dolů. Takovým odkazům se říká odkazy na kotvy (dříve též záložky, anglicky nejčastěji anchors, případně fragment). V češtině obecně přijaté pojmenování neexistuje, ale asi se ustálí ta kotva, protože slovo "záložky", kterou jsem pro pojmenování kotev používal, se dnes mnohem častěji používá pro různá okna v prohlížeči (též ouška, taby), případně pro oblíbené položky (bookmarks).
Kotvy jsou docela užitečná věcička. V následujících odstavcích se pokusím popsat, jak se to dá udělat, jak to používat a čeho se vyvarovat. Také budu pro ilustraci používat v textu kotvy více, než je obvyklé.
Předpokládám, že znáte použití odkazů v HTML.
K tomu, abych na stránce měl odkaz na kotvu, musím udělat dvě věci.
V HTML kódu vypadá kotva následovně:
<a name="jmeno_kotvy"></a>
Na první pohled to vypadá jako odkaz -- áčko na začátku, ale není to odkaz. Liší se to ve dvou věcech. Zaprvé odkaz neobsahuje cíl (atribut href), zadruhé je prázdný = neobsahuje žádný text (tedy, přesněji: může obsahovat, ale nemusí a pokud obsahuje, nemá to žádný význam, pokud vím). V zobrazení textu na stránce se tedy kotva nijak neprojeví. Jediný význam je tento:
Text, který bude v kotvě (nebo bezprostředně za ní), se po vyvolání kotvy (odkazem) přesune na začátek obrazovky.
Důležitý je u kotvy atribut name (jméno). Můžete také zadat atribut id, měl by funguvat stejně jako name. Text kotvy je dobré zadávat srozumitelně a logicky (ale bez mezer a diakritiky).
Všechny prohlížeče používané v roce 2005 už umějí skočit i na kotvu zadanou modernějším způsobem, totiž přes atribut id. Navíc nemusí být v tagu <a>. Například:
<h2 id="jmeno_kotvy">Nadpis</h2>
nebo třeba
<span id="ukazka">nějaká ukázka</span>
Odkazování na ídéčko má skvělé využití v případech, kdy chcete odkázat doprostřed nějakého cizího dokumentu, ale v tom cizím dokumentu nenajdete na patřičném místě žádnou kotvu zadanou přes <a name="...">. Je pak ještě určitá šance, že tam najdete něco, co má ID.
Je to jedno, ale raději doporučuji vkládat kotvy přes id. Takže např.:
<p id="kocicka">Odstavec o kočičce...</p>
Teď chci udělat odkaz, který uživatele odroluje tam, kde už mám umístěnou kotvu.
V kódu vypadá odkaz takhle:
<a href="#jmeno_kotvy">text odkazu</a>.
Zkušení autoři poznávají klasický odkaz (áčko na začátku + atribut href). Pouze v atributu href se na začátku vyskytuje onen magický křížek #. Křížek prostě znamená, že odkaz nevede na soubor, ale na kotvu. Nyní je také jasné, proč bylo tak důležité jméno kotvy (to je to slovo za křížkem).
(Pokud neumíte napsat znak #, tak na české klávesnici se dělá držením pravého altu a zmáčknutím klávesy X. Na anglické klávesnici je to trojka se shiftem.)
Na začátku této stránky je vložena kotva charakterizovaná tímto kódem:
<h1 id="zacatek">...
Následující odkaz má tento kód:
<a href="#zacatek">Zkuste to!</a>
Po kliknutí na něj byste se měli přepnout na začátek stránky (čili na tu kotvu). Zkuste to!
S používáním kotev jsou spojeny některé problémy.
Kotvy významně usnadňují orientaci v delších textech. Je dobré dát na začátek každého takového textu řádku s názvy kapitol nebo odstavců, které jsou aktivní. Když mám čas a náladu, tak to dělám. Mám předdefinované, že se mi budou zobrazovat kurzivou (pomocí CSS a třídy "kotva").
Google umí přímo ve snippetu odkazu vypsat důležité kotvy, které najde na stránce.
Wikipedia hodně používá na začátku všech delších textů obsah realizovaný kotvami namířené na nadpisy.
Mnoho autorů používá odkazů "Na začátek stránky". Hodí se to, občas. Já to nedělám, protože si myslím, že čtenáři nejsou tak tupí a umějí si tam odrolovat sami (třeba klávesou Home).
Používáte-li na tvorbu stránek Word, kotvy a odkazy na ně se dobře převedou. Stejně tak automatické obsahy (jen místo čísla stránek mají hvězdičku s odkazem).
Málo se to používá, ale dá se udělat, aby normální odkaz byl zároveň kotvou. Prostě se do odkazu přidá atribut name (a pro formu i id):
<a href="nekam.htm" id="jmeno_kotvy">Textodkazu</a>
Nebo se dá nastavit odkaz na kotvu na jiné stránce. Taková stránka se po zavedení odroluje na pozici kotvy:
<a href="nekam.htm#jmeno_tamni_kotvy">text odkazu</a>
To se používá mnohem častěji.
To, že se kotva i odkaz zadává stejným tagem (totiž áčkem) je dáno historickým vývojem. V pravěkém HTML (počátek devadesátých let dvacátého století našeho letopočtu) totiž existovalo velice málo znaků a kodifikátoři se zdráhali vytvářet zbytečně nové. Takže historicky máme pro dvě úplně rozdílné věci jeden tag <a>. Ale tuhle dvojakost odstraňuje vkládání kotev pomocí id.
Trocha teorie, můžete přeskočit.
Zatím jsem psal, že stránka "odroluje". Ve skutečnosti je odrolování jenom vedlejší příznak trochu složitějšího jevu. Prohlížeč kliknutí na odkaz chápe jako přechod na novou adresu. Tato adresa se načte do adresy prohlížeče.
Pokud odkaz vede na adresu, která začíná znakem #, tak se vezme aktuální adresa stránky a pouze se za ni doplní znak # a jméno kotvy. Vznikne tedy třeba takováto adresa:
https://www.jakpsatweb.cz/kotvy.html#mechanismus
(kde #mechanismus je příklad názvu kotvy).
Co s takovou adresou prohlížeč udělá? Prostě vezme všechno, co je před znakem # , vezme to jako adresu a přejde na ni (v případě, že na ni už jenom je, tak stránku načte z keše). Potom vezme všechno, co je za znakem #, pochopí to jako jméno kotvy a hledá ve zdroji stránky prvek, který má nastavenou hodnotu parametru id (nebo name) na jméno kotvy. Pokud to najde, tak na dané místo odroluje.
Když někdo proklikne na odkaz, který odroluje do poloviny stránky, tak občas neví, kde je. V takovém případě se hodí grafické zvýraznění, aby poznal, čeho si má všimnout.
V CSS existuje nová pseudotřída :target. Když se navěsí na prvek, který je použit pro kotvu, tak se pomocí této pseudotřídy dá prvek vybrat a formátovat. To je trochu kostrbatě řečeno, lepší bude příklad. V hlavičce dokumentu bude styl a v textu potom odstavec h2 s nastaveným id.
<style>
h2:target
{background-color: yellow;}
</style>
...
<a href="#kotva">odkaz na kotvu</a>
...
<h2 id="kotva">Nějaký
nadpis</h2>
Když se pak klikne na odkaz, v URL se na konci objeví #kotva. To je signál pro stránku, že se má jednak odrolovat na prvek s id kotva. Za druhé styl projde dokument, jestli nějaký prvek h2 náhodou nemá nastavené id stejné, jako je hodnota kotvy v URL. Pokud ano, tak tento prvek zformátuje (konkrétně mu nastaví žluté pozadí). Zkuste odkaz na živý příklad. Funguje to jenom v nových prohlížečích (po roce 2010) a v Internet Exploreru 9 to vyžaduje striktní doctype.
Některé prohlížeče umějí na stránce po kliknutí na odkaz rovnou zahledat nějaký text, doscrolovat na něj a vybrat ho. Jako kdybych v cílové stránce zadal hledání přes Ctrl+F a zmáčknul Enter.
Je to podobné odkazu na kotvu, ale namísto názvu kotvy se za dvojkřížek píše zvláštní sekvence znaků následovaná hledaným textem.
#:~:text=
Takže například URL na hlavní stránku tohoto webu (jakpsatweb.cz) se zvýrazněným textem "meta tagy" vypadá takto:
https://www.jakpsatweb.cz/#:~:text=meta%20tagy
Všimněte si, že mezera ve hledaném textu je nahrazena escape sekvencí %20. Nelze tam použít znak +, který v jiných situacích v URL umí nahradit mezeru.
Zapsáno v odkazu to pak má logicky podobu:
<a href="https://www.jakpsatweb.cz/#:~:text=meta%20tagy">Odkaz na zvýraznění meta tagů ve stránce</a>
Anglicky se tomu říká URL Scroll To Text Fragment, někdy se to píše také s pomlčkami: URL Scroll-To-Text fragment. Zvýrazní to první výskyt hledaného řetězce na stránce. Pokud tam ten řetězec není, nestane se nic, jenom to přejde na cílovou stránku bez jakéhokoli zvýraznění a scrolování.
Teoreticky by měl jít nalezený text formátovat jinak než žlutým pozadím při použití pseudoelementu ::target-text.
::target-text {background-color: aqua;}
Takže jako obvykle: není to něco, co by fungovalo vždycky a nelze se na to spolehnout. Ale riziko chyby je malé a když se to nepovede, tak to prostě jenom nic nezvýrazní.
Verze Chrome z listopadu 2021 umožňuje z kontextového menu vyvolat volbu "Kopírovat odkaz na zvýraznění", který dělá přesně tohle: zkopíruje URL stránky, připojí k němu #:~:text= a vybraný text (escapovaný).
CSS vlastnost scroll-behavior: smooth způsobí, že po kliknutí na odkaz s kotvou se na kotvu nenajede bleskurychle, ale trvá to asi jednu sekundu a stránka přitom roluje. Dá se předpokládat, že v některých situacích je výhodné uživateli ukázat, že je stále na stejné stránce a jenom někam odroloval. Na druhou stranu takové chování může zdržovat. Zápis css pro animované rolování je tento:
<style>
html {scroll-behavior: smooth;}
</style>
Opakem smooth je scroll-behavior: auto, ale to se nemusí zadávat, protože tohle bleskurychlé rolování je výchozí hodnota. Odkaz na příklad scroll-behavior: smooth.
Publikováno někdy v roce 2000, aktualizováno průběžně, naposled v červenci 2024.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.