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:
- další odkaz (tag <a>),
- formulář (tag <form>),
- tabulka (tag <table>) uvnitř odkazu nefunguje jako odkaz a podobně se mohou chovat i jiné složité tagy.
| 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ů:
| 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.
| 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:
- namísto toho, aby se proklikla stránka, uživateli se cíl odkazu rovnou nabídne ke stažení (nebo stáhne, záleží na nastavení prohlížeče).
- jako název staženého souboru se nabídne (nebo rovnou použije) jméno, které je uvedeno jako hodnota atributu download
<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.
- Pokud text odkazu mezerou začíná, mezera se nepodtrhne.
- Pokud text odkazu mezerou končí, koncová mezera se podtrhne.
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:
- Obrázky s klikacími mapami (tag <img> s atributy ismap a usemap při použití tagu <map>).
- Potvrzovacím tlačítkem formuláře (tag <form>, který má atribut action nastaven na cílovou stránku).
- Skriptem svázaným s libovolným elementem pomocí události onclick, který mění document.location.
Reklama
