Kotvy

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.

Dva kroky

K tomu, abych na stránce měl odkaz na kotvu, musím udělat dvě věci.

Vložit kotvu do textu a pojmenovat ji.
Udělat odkaz, který bude na kotvu mířit.

Vložení kotvy

V HTML kódu vypadá kotva následovně:

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).

Modernější vložení kotvy

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.

Co z toho tedy použít?

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>

Vložení odkazu na kotvu

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.)

Příklad

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!

Záludnosti

S používáním kotev jsou spojeny některé problémy.

Ztěžují orientaci na stránkách, protože čtenář má mylný pocit, že je po odkazu na jiné stránce.
Přerušují tok textu. Po odkliknutí na kotvu zapomínám, kde jsem už četl a kde ne. Odkazy na kotvy totiž nemění barvu jako odkazy normální.
Nutí k rolování. Chci-li se vrátit tam, kde jsem kliknul na kotvu, musím okno odrolovat. Naštěstí prohlížeče si pamatují, co bylo v okně před kliknutím a umožňují rozumně použít tlačítko Zpět.
Snažte se nedávat vedle sebe odkazy na jiné stránky a odkazy na kotvy. Čtenáře to mate. Zkuste vždy nějak naznačit, že jde o odkaz na kotvu (nejčastěji formátováním, okolním textem nebo kontextem). (Já používám kurzívu, ale to jsem sám voják v poli.)

Výhody

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).

Kombinace

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.

Historie

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.

Mechanismus funkčnosti

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.

Odlišení prokliknuté kotvy

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.

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.

Odkaz na libovolný text ve stránce

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í.

Změna vyžlucení

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;}

Kdy to bude fungovat:

prohlížeč Chrome nebo příbuzné (v roce 2020 Edge, Seznam, Opera) a prohlížeže na Androidu
hledaný text musejí být celá slova - při hledání podřetězce mi to nefungovalo
musejí být na stránce přesně tak, jak jsou napsaná v odkazu.
malá a velká písmena se mohou lišit
české znaky je možno zadávat normálně do odkazu, ale je potřeba, aby byla odkazující a odkazovaná stránka ve stejném kódování. Pokud není, bude potřeba české znaky escapovat (v kódování cílové stránky).

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ý).

Publikováno někdy v roce 2000, aktualizováno průběžně, naposled v červnu 2022.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně