Popíšeme si jeden z nejdůležitějších elementů celého webu: odkazy.
Odkazy, neboli možná lépe hypertextové odkazy, jsou tím, co dělá web „webem“ – umožňují nám procházet mezi dokumenty, stránkami a dokonce i různými částmi téže stránky.
Bez odkazů by internet byl jen soubor izolovaných dokumentů.
Pochopení, jak efektivně vytvářet a používat HTML odkazy, je klíčové pro každého, kdo chce budovat použitelné a přístupné webové stránky.
Tedy si podrobně rozebereme element <a>, jeho atributy a různé způsoby použití.
<a href="..."> ... </a>Element <a> (anchor) je základním kamenem webu, protože umožňuje vytvářet hypertextové odkazy. Tyto odkazy spojují jednu webovou stránku s jinou, nebo odkazují na různé části téže stránky. Text nebo jiný obsah (např. obrázek) uvnitř tagů <a> a </a> se stává klikatelným odkazem.
Důležité atributy a jejich použití:
href (Hypertext Reference): Toto je nejdůležitější atribut elementu <a>. Definuje cíl odkazu, tedy URL adresu, na kterou má prohlížeč přejít po kliknutí.
<a href="https://www.google.com">Jdi na Google</a>
Zde https://www.google.com je absolutní URL adresa cílové stránky.
<a href="/o-nas.html">O nás</a>
Zde /o-nas.html je relativní URL adresa, která odkazuje na soubor o-nas.html ve stejném kořenovém adresáři webu.
<a href="#sekce1">Přejít na Sekci 1</a>
Tento typ odkazu vyžaduje, aby na cílové sekci existoval element s odpovídajícím atributem id (např. <h2 id="sekce1">Sekce 1</h2>). Uživatel bude po kliknutí přesměrován na danou část stránky.
<a href="/dokumenty/brozura.pdf" download>Stáhnout brožuru</a>
Atribut download prohlížeči naznačí, že soubor by měl být stažen, nikoli zobrazen v prohlížeči.
<a href="mailto:info@example.com">Napište nám</a>
Po kliknutí se otevře výchozí e-mailový klient uživatele s předvyplněnou adresou.
<a href="tel:+420123456789">Zavolejte nám</a>
Na mobilních zařízeních se po kliknutí nabídne vytočení čísla.
target: Definuje, kde se má odkazovaná stránka otevřít._self (výchozí hodnota): Otevře odkaz ve stejném okně nebo panelu, ve kterém se nachází aktuální stránka._blank: Otevře odkaz v novém prázdném okně nebo panelu prohlížeče. Často se používá pro externí odkazy, aby uživatel neopustil vaši stránku.
<a href="https://www.example.com" target="_blank">Otevřít v nové záložce</a>
_parent: Otevře odkaz v rodičovském rámu (používá se u <iframe>, pokud je odkaz uvnitř vnořeného rámu).
_top: Otevře odkaz v celém okně prohlížeče, čímž zruší jakékoli existující rámy.
rel (Relationship): Specifikuje vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Je důležitý pro optimalizaci pro vyhledávače (SEO) a bezpečnost.
nofollow: Říká vyhledávačům, aby tento odkaz nesledovaly a nepředávaly mu „link juice“ (hodnotu odkazu). Často se používá pro uživatelsky generovaný obsah (komentáře, fóra) nebo pro placené odkazy, které nechcete schvalovat.
noopener: Tato hodnota zabraňuje odkazované stránce v přístupu k objektu window.opener aktuální stránky. Je to důležité bezpečnostní opatření, které pomáhá předcházet tzv. „tabnabbing“ útokům. Mělo by být používáno ve spojení s target="_blank".
noreferrer: Skryje referující stránku (odkud uživatel přišel) před cílovým serverem.
Příklad kombinace pro externí odkazy v nové záložce:
<a href="https://externi-stranka.com" target="_blank" rel="noopener noreferrer">Externí odkaz</a>
title: Poskytuje doplňující informace o odkazu. Tento text se obvykle zobrazí jako bublina (tooltip) při najetí myší na odkaz. Je užitečný pro přístupnost a pro poskytnutí kontextu uživatelům.
<a href="/produkty" title="Prohlédněte si naši širokou nabídku produktů">Produkty</a>
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<title>HTML Odkazy Příklad</title>
</head>
<body>
<h1>Moje webová stránka s odkazy</h1>
<nav>
<ul>
<li><a href="/">Domovská stránka</a></li>
<li><a href="/sluzby.html">Naše služby</a></li>
<li><a href="/kontakt.html" title="Kontaktní formulář">Kontakt</a></li>
</ul>
</nav>
<main>
<p>Navštivte <a href="https://cs.wikipedia.org/wiki/HTML" target="_blank" rel="noopener noreferrer">Wikipedii</a> pro více informací o HTML.</p>
<p>Pro stažení našeho <a href="/soubory/prezentace.pptx" download>souboru prezentace</a> klikněte zde.</p>
<p>Přejděte na <a href="#zav%C4%9Br">Závěr tohoto článku</a>.</p>
</main>
<footer id="zavěr">
<p>© 2025 Můj Web. Všechna práva vyhrazena.</p>
</footer>
</body>
</html>
HTML odkazy jsou nezbytnou součástí každé webové stránky, která umožňuje navigaci a propojení informací. Správné používání elementu <a> a jeho atributů, jako je href pro cíl odkazu, target pro chování otevření a rel pro vztah a bezpečnost, je klíčové pro vytvoření intuitivního, přístupného a bezpečného webového prostředí.
Ovládnutí odkazů vám otevře dveře k tvorbě dynamických a propojených webových stránek.
