Odkazy

Tag Význam Párový Výskyt
a odkaz, hyperlink, kotva ano kdekoliv kromě <a>

a

Odkaz (z angl.anchor) se dělá tagem <a>.

Příklad

<a href="https://www.jakpsatweb.cz/">Odkaz na hlavní stránku</a>

Obsah odkazu

Vše, co je mezi značkami <a> a </a> bude sloužit jako odkaz (tzn. bude klikatelné).

Např. 
<a href="index.html">Hlavní stránka</a>
se zobrazí jako klikatelný nápis Hlavní stránka.

Uvnitř elementu <a> se může objevit skoro cokoliv. Často se odkazem obaluje obrázek, který tak bude celý sloužit jako odkaz. Příklad:

<a href="index.html"><img src="obrazek-logo.png"></a>

Uvnitř odkazu nesmí být:

Atributy tagu <a>
Atribut Význam Hodnota
href cíl odkazu URL
name jméno kotvy libovolné jméno
target cílový rám jméno rámu
rel druh odkazu několik vyjmenovaných hodnot
hreflang jazyk cíle kód jazyka
ping měření prokliků sledovací adresa
download vynucení stahování hezké jméno staženého souboru

Href

Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL.

Příklad: 
<a href="http://www.seznam.cz">Portál Seznam</a>

Name

Jméno kotvy. Tag <a> může sloužit kromě odkazu i jako kotva. Kotva je dobrá k tomu, že definuje místo v dokumentu, na které může mířit odkaz (jiný tag a s href="#jmenoZalozky"). Po kliknutí na takový odkaz se stránka odroluje na pozici kotvy.

Tag <a> definující kotvu neobsahuje atribut href, ale name. Obsah tagu <a name=něco> může být prázdný.

Příklad: 
<a name=priklad></a> Text příkladu
 

<a href="#priklad">Po kliknutí na tento odkaz odroluje stránka na kotvu příkladu.</a>

Více o kotvách.

Target

Cílové okno, iframe, nebo rám, ve kterém se obsah zobrazí. Pokud se ve stránkách používají rámy, má každý z nich jméno. Jméno rámu je obsaženo v atributu name v tagu <frame> (případně iframe).

 Příklad: 
<a href="index.html" target="okenko">hlavní stránka</a>, se otevře v rámu nebo okně "okenko".

Kromě jmen existujících rámů se jako hodnota atributu target mohou použít speciální jména virtuálních rámů:

Jména virtuálních rámů pro target
target= Kde se to otevře
_blank nové okno nebo nový tab
_top nejvyšší okno hierarchie rámů
_parent nadřazený rám
_self tentýž rám
jiné jméno poprvé v novém rámu, podruhé v tom jiném

Příklad: 
<a href="https://yuhu.cz/" target="_blank">Yuhůova stránka</a>, která se otevře v novém okně.

Pokud se v atributu target objeví jméno neexistujícího okna nebo rámu, otevře se nové okno. Je to velmi podobné hodnotě _blank s tím rozdílem, že nové okno (nebo tab) si svoje jméno podrží, takže případné další podobné odkazy se budou zobrazovat v tomto novém okně (nebo tabu). Pozor, takové okno bývá v tu chvíli často na pozadí (má blur), takže si jeho otevření uživatel nemusí všimnout.

Otevírání odkazů v rámech lze ovlivnit také tagem <base> v hlavičce stránky, jehož atribut target nastaví cíl pro všechny odkazy, kterým nebude cíl předefinován přímo v odkazu.

Rel

Atribut rel byl ve specifikaci dlouho, ale téměř se nepoužíval (spíše u tagu <link>). Teorie říkala, že existující hodnoty jsou copyright, alternate, stylesheet, start, next, prev, contents, index, glossary, chapter, section, subsection, appendix, help a bookmark. A ty všechny byly v praxi u tagu <a> totálně k ničemu. Pak přišly užitečné hodnoty atributu rel.

užitečné hodnoty atributu rel= u odkazu
rel= Význam
nofollow odkaz by neměl být sledován vyhledávačem
sponsored odkaz je pro Google označený jako zaplacený (Google 2019)
UGC odkaz je pro Google označený jako vytvořený uživateli (user generated content, Google 2019)
noreferrer po kliknutí na odkaz se v http protokolu nepředá referrer
noopener prohlížeč by na stránku otevřenou tímto odkazem měl spustit nový proces

Počátkem roku 2005 Google doporučil používat novou hodnotu rel="nofollow" (= angl. "nesledovat") ve všech odkazech, u kterých nechcete, aby byly Googlem brány v úvahu. V roce 2019 přidal ještě hodnoty rel="ugc" (uživatelsky generovaný obsah) a rel="sponsored" (odkaz na reklamu). (Uvádím to zde jen pro pořádek, protože formálně vzato to nepatří do popisu HTML z hlediska chování prohlížeče. Tyhle hodnoty rel něco dělají jenom v Googlu.)

Příklad:
<a href="http://example.com" rel="nofollow">odkaz, který nebude sledován</a>

Jak přesně to funguje, se zatím neví. Google to udělal kvůli tomu, aby se daly zablokovat odkazy spammerů z diskusí. Postupně se přidávají další vyhledávače. Například počátkem roku 2008, kdy jsem tento text aktualizoval, ignorují odkaz s nofollow všechny důležité vyhledávače včetně Yahoo, Bingu a Seznamu. V souvislosti s rel="nofollow" doporučuji nastudovat si, co to je Page Sculpting a proč nefunguje.

V roce 2019 Google přišel s dalšími hodnotami rel, které dříve spadaly do nofollow. Jde o hodnoty sponsored a UGC. Jako sponsored mají být označeny nakoupené nebo reklamní odkazy, jako UGC mají být označeny odkazy typicky z diskusních příspěvků, nad kterými nemá vydavatel kontrolu. Přesná funkčnost, co dělá UGC a sponsored v Googlu, samozřejmě známa není, ale předpoklad je, že se to zpracovává podobně jako nofollow, takže Google tyto odkazy nezapočítává do hodnocení (ale sleduje je robotem, mimochodem stejně jako nofollow).

Další užitečná hodnota atributu rel je noreferrer. Říká prohlížeči, že následující http požadavek má sestavit bez uvedení referera, tedy bez informace, odkud uživatel kliknul.

Hodnota noopener izoluje nově otevřené okno od předchozího procesu prohlížeče, což je prý vhodné kvůli bezpečnosti skriptů. Rel="noopener" se začalo používat kolem roku 2018 u odkazů otevřených do nového okna a přestane se zřejmě používat v roce 2021, protože stejnou vlastnost už bude mít každý odkaz otevřený do nového okna (s target="_blank").

Pokud chcete zřetězit více hodnot atributu rel do jednoho odkazu, oddělte je mezerou. Příklad:

<a href="https://example.com" rel="noreferrer nofollow">odkaz</a>

Hreflang

Označení jazyka stránky, na kterou odkaz ukazuje. Např hreflang="en" znamená, že odkaz míří na anglicky psanou stránku. Neznám žádné rozumné použití a pochybuji, že si tohoto atributu všímají vyhledávače. Další kódy jazyka jsou např. cs, (nikoli cz)de, sk, fr apod.

Ping

Atribut ping způsobí, že po kliknutí na odkaz prohlížeč zároveň přistoupí i na URL obsaženém v atributu ping. Usnadní to měření počtu prokliků. V praxi to moc používané není, pravděpodobně protože to ještě nepodporuje Firefox (i v roce 2021 zatím jen s flagem). Symbolicky zapsáno:

<a href="adresa-odkazu" ping="adresa-měřící-tečky">

Download

Atribut download přítomný v odkazu způsobí dvě věci:

<a href="../nejakySilenySoubor-asdf4d4f5d449fs5f48s.zip" download="Závěrečná zpráva.zip">stáhnout zprávu</a>

Dosáhne se tím dvou věcí: soubory, které se mají stahovat, se nebudou marně snažit zobrazit v prohlížeči (zip archivy, mp3 soubory apod.) A budou se na disku uživatele rovnou hezky jmenovat.

Podtrhávání mezer v textu odkazu

Prohlížeče podtrhávají text odkazu včetně mezer.

Proč to zdůrazňuji -- protože jako mezera se v HTML chápe i zalomení řádku (enter). Pokud máte ve zvyku kód krásně strukturovat do řádků, tak se vám na konci odkazu podtrhne mezera a vypadá to fakt divně. V případě odkazů tedy doporučuji psát je na jeden řádek.

Příklad kódu odkazu s podtrženou mezerou na konci:

<a href="kamkoli"> text odkazu s podtrženou mezerou na konci </a>

nebo
<a href="kamkoli">
  text odkazu s podtrženou mezerou na konci
</a>

Další varianty odkazů

Prvky stránky, které se chovají jako odkazy, lze vytvořit i jinými způsoby:

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.