Tag <a> (anchor) je HTML element používaný k vytváření hypertextových odkazů. Je to jeden z nejzákladnějších a nejdůležitějších prvků HTML, který umožňuje propojení mezi webovými stránkami a vytváření hyperlinků - základního stavebního kamene webu.

<a href="URL">Text odkazu</a>

<a href="https://www.example.com">Navštivte Example.com</a>

Nejdůležitější atribut určující cíl odkazu.

<a href="https://www.example.com">Absolutní odkaz</a>
<a href="http://www.example.com/page.html">Odkaz s protokolem</a>

<!-- Relativní k aktuální stránce -->
<a href="page.html">Stránka ve stejné složce</a>
<a href="subfolder/page.html">Stránka v podsložce</a>
<a href="../page.html">Stránka o úroveň výš</a>
<a href="/page.html">Relativní k root</a>

<!-- E-mail odkaz -->
<a href="mailto:info@example.com">Pošlete email</a>
<a href="mailto:info@example.com?subject=Dotaz&body=Dobrý den">Email s předvyplněním</a>
<!-- Telefon -->
<a href="tel:+420123456789">Zavolat</a>
<!-- SMS -->
<a href="sms:+420123456789">Poslat SMS</a>
<a href="sms:+420123456789?body=Ahoj">SMS s textem</a>
<!-- Prázdný href (JavaScript) -->
<a href="#">Odkaz nikam</a>
<a href="javascript:void(0)">Prázdný odkaz</a>
<!-- Data URI -->
<a href="data:text/plain;base64,SGVsbG8gV29ybGQh">Data odkaz</a>
<!-- Blob URL -->
<a href="blob:https://example.com/uuid">Blob odkaz</a>

Určuje, kde se otevře cílová stránka.

<!-- Otevře v nové záložce/okně -->
<a href="page.html" target="_blank">Nová záložka</a>
<!-- Otevře ve stejném okně (výchozí) -->
<a href="page.html" target="_self">Stejné okno</a>
<!-- Otevře v rodičovském frame -->
<a href="page.html" target="_parent">Rodičovský frame</a>
<!-- Otevře v celém okně (zruší všechny frames) -->
<a href="page.html" target="_top">Celé okno</a>
<!-- Otevře ve specifickém pojmenovaném okně/frame -->
<a href="page.html" target="nazevOkna">Pojmenované okno</a>

Bezpečnostní poznámka pro target=„_blank“:

<!-- Doporučeno: přidat rel="noopener noreferrer" -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  Bezpečný odkaz do nové záložky
</a>

Důvody:

noopener - zabraňuje přístupu k window.opener (bezpečnost) noreferrer - neposílá Referer hlavičku (soukromí)

Nutí prohlížeč stáhnout soubor místo jeho otevření.

<!-- Stáhne soubor s původním názvem -->
<a href="document.pdf" download>Stáhnout PDF</a>
<!-- Stáhne soubor s vlastním názvem -->
<a href="document.pdf" download="muj-dokument.pdf">Stáhnout s vlastním názvem</a>
<!-- Funguje i s obrázky -->
<a href="image.jpg" download="fotka.jpg">Stáhnout obrázek</a>

Omezení:

Funguje pouze pro same-origin URL nebo data: URI Cross-origin soubory se stáhnou s původním názvem Některé prohlížeče mohou atribut ignorovat

Definuje vztah mezi aktuálním dokumentem a cílovým zdrojem.

<!-- Bezpečnostní -->
<a href="external.com" rel="noopener">Bez přístupu k opener</a>
<a href="external.com" rel="noreferrer">Bez referer hlavičky</a>
<a href="external.com" rel="nofollow">SEO: nesledovat odkaz</a>
<!-- Navigační -->
<a href="next.html" rel="next">Další stránka</a>
<a href="prev.html" rel="prev">Předchozí stránka</a>
<!-- Zdroje -->
<a href="author.html" rel="author">Autor</a>
<a href="license.html" rel="license">Licence</a>
<a href="help.html" rel="help">Nápověda</a>
<!-- Vyhledávání -->
<a href="search.html" rel="search">Vyhledávání</a>
<!-- Alternativy -->
<a href="page-de.html" rel="alternate" hreflang="de">Deutsche Version</a>
<!-- Externí odkaz -->
<a href="external.com" rel="external">Externí odkaz</a>
<!-- Sponzorovaný odkaz (SEO) -->
<a href="sponsor.com" rel="sponsored">Sponzorovaný odkaz</a>
<!-- UGC (User Generated Content) pro SEO -->
<a href="user-content.html" rel="ugc">Uživatelský obsah</a>
<!-- Kombinace více hodnot -->
<a href="external.com" rel="noopener noreferrer nofollow">Bezpečný externí odkaz</a>

Určuje MIME typ cílového zdroje (nápověda pro prohlížeč).

<a href="document.pdf" type="application/pdf">PDF dokument</a>
<a href="video.mp4" type="video/mp4">Video</a>
<a href="image.jpg" type="image/jpeg">Obrázek</a>
<a href="data.json" type="application/json">JSON data</a>

Specifikuje jazyk cílové stránky.

<a href="page-en.html" hreflang="en">English version</a>
<a href="page-de.html" hreflang="de">Deutsche Version</a>
<a href="page-cs.html" hreflang="cs">Česká verze</a>
<a href="page-en-US.html" hreflang="en-US">American English</a>

Poskytuje doplňující informace o odkazu (tooltip).

<a href="page.html" title="Podrobné informace o produktu">Produkt</a>
<a href="external.com" title="Otevře se v novém okně">Externí odkaz</a>

Poznámka: Title by neměl duplikovat text odkazu a neměl by být jediným zdrojem důležité informace (není přístupný na touch zařízeních).

URL pro ping notifikace při kliknutí (trackování).

<a href="page.html" ping="https://analytics.example.com/track">Trackovaný odkaz</a>
<!-- Více ping URLs -->
<a href="page.html" ping="https://track1.com https://track2.com">Multi-track</a>

Bezpečnost: Mnoho uživatelů a prohlížečů blokuje ping tracking.

Kontroluje, kolik informací se pošle v Referer hlavičce.

<a href="external.com" referrerpolicy="no-referrer">Bez referer</a>
<a href="external.com" referrerpolicy="origin">Pouze origin</a>
<a href="external.com" referrerpolicy="strict-origin">Strict origin</a>
<a href="external.com" referrerpolicy="no-referrer-when-downgrade">Default</a>

Možné hodnoty:

no-referrer - nepošle referer origin - pošle pouze origin (doména) same-origin - referer pouze pro same-origin strict-origin - origin pouze přes HTTPS unsafe-url - celou URL (nebezpečné)

Tag <a> se původně jmenoval „anchor“ (kotva) právě kvůli možnosti vytvářet kotvy na stránce.

<!-- Vytvoření kotvy -->
<h2 id="sekce1">Sekce 1</h2>
<p>Obsah sekce...</p>
<!-- Odkaz na kotvu -->
<a href="#sekce1">Přejít na Sekci 1</a>
<!-- Odkaz na kotvu na jiné stránce -->
<a href="page.html#sekce1">Sekce 1 na jiné stránce</a>
<!-- Plná URL s kotvou -->
<a href="https://example.com/page.html#sekce1">Absolutní odkaz s kotvou</a>

<!-- NE - zastaralé, nepoužívat! -->
<a name="sekce1"></a>
<!-- ANO - moderní způsob -->
<div id="sekce1"></div>

<!-- CSS pro plynulé scrollování -->
<style>
html {
  scroll-behavior: smooth;
}
</style>
<a href="#top">Plynule nahoru</a>

<!-- Scroll na začátek (top) -->
<a href="#top">Nahoru</a>
<a href="#">Nahoru (alternativa)</a>
<!-- ID na začátku dokumentu -->
<body id="top">
  <!-- obsah -->
</body>

/* Neznavštívený odkaz */
a:link {
  color: blue;
  text-decoration: underline;
}
/* Navštívený odkaz */
a:visited {
color: purple;
}
/* Hover (myš nad odkazem) */
a:hover {
color: red;
text-decoration: none;
cursor: pointer;
}
/* Focus (např. Tab navigace) */
a:focus {
outline: 2px solid orange;
}
/* Aktivní (během kliknutí) */
a:active {
color: darkred;
}
/* Doporučené pořadí: LVHFA (LoVe HAte) /
/ :link → :visited → :hover → :focus → :active */

a {
  text-decoration: none;
}
/* Podtržení pouze při hoveru */
a:hover {
text-decoration: underline;
}

/* Externí odkazy */
a[href^="http"] {
  color: green;
}
/* PDF odkazy */
a[href$=".pdf"] {
color: red;
}
a[href$=".pdf"]::after {
content: " 📄";
}
/* Email odkazy */
a[href^="mailto:"] {
color: blue;
}
a[href^="mailto:"]::before {
content: "✉ ";
}
/* Odkazy s target="_blank" */
a[target="_blank"]::after {
content: " ↗";
}
/* Download odkazy */
a[download] {
font-weight: bold;
}

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.button-link:hover {
background-color: #0056b3;
}

1. Smysluplný text odkazu

<!-- ŠPATNě -->
<a href="article.html">Klikněte zde</a>
<a href="article.html">Více</a>
<a href="article.html">Zde</a>
<!-- DOBřE -->
<a href="article.html">Přečtěte si celý článek o HTML</a>
<a href="article.html">Kompletní návod na HTML odkazy</a>

2. Rozlišitelnost od okolního textu

/* Špatně - pouze barva */
a {
  color: blue;
  text-decoration: none;
}
/* Dobře - barva + podtržení nebo jiný vizuální prvek */
a {
color: blue;
text-decoration: underline;
}

3. Dostatečná velikost klikací oblasti

/* Minimálně 44x44px pro touch zařízení */
a {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}

<!-- Popis pro screen readery -->
<a href="document.pdf" aria-label="Stáhnout roční zprávu 2024 ve formátu PDF">
  Stáhnout zprávu
</a>
<!-- Označení aktuální stránky -->
<nav>
  <a href="home.html">Domů</a>
  <a href="about.html" aria-current="page">O nás</a>
  <a href="contact.html">Kontakt</a>
</nav>
<!-- Externí odkaz s upozorněním -->
<a href="external.com" aria-label="Externí odkaz - otevře se v novém okně" target="_blank">
  Externí web
</a>
<!-- Skrytý text pro screen readery -->
<a href="next.html">
  Další
  <span class="sr-only">(Stránka 2 z 10)</span>
</a>

/* NIKDY neodstraňujte outline bez náhrady! */
/* Špatně /
a:focus {
outline: none; / Znepřístupňuje web pro klávesnicovou navigaci */
}
/* Dobře */
a:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* Nebo vlastní styl */
a:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

<!-- Odkaz pro přeskočení navigace (první element v body) -->
<a href="#main-content" class="skip-link">Přeskočit na hlavní obsah</a>
<!-- CSS -->
<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}
 
.skip-link:focus {
  top: 0;
}
</style>
<!-- Cíl odkazu -->
<main id="main-content">
  <!-- hlavní obsah stránky -->
</main>

<a href="page.html" id="myLink">Odkaz</a>
<script>
// Základní click event
document.getElementById('myLink').addEventListener('click', function(e) {
  e.preventDefault(); // Zruší výchozí akci (navigaci)
  console.log('Odkaz byl kliknut');
 
  // Vlastní logika
  if (confirm('Opravdu chcete pokračovat?')) {
    window.location.href = this.href;
  }
});
 
// Pravé tlačítko myši
document.getElementById('myLink').addEventListener('contextmenu', function(e) {
  e.preventDefault();
  console.log('Pravé tlačítko na odkazu');
});
 
// Střední tlačítko myši (otevře v nové záložce)
document.getElementById('myLink').addEventListener('auxclick', function(e) {
  if (e.button === 1) { // Střední tlačítko
    console.log('Střední tlačítko - otevře se v nové záložce');
  }
});
</script>

<!-- onclick -->
<a href="page.html" onclick="alert('Kliknuto'); return false;">Klikni</a>
<!-- Více akcí -->
<a href="page.html" onclick="doSomething(); doSomethingElse(); return false;">
  Odkaz s akcemi
</a>
<!-- Volání funkce -->
<a href="#" onclick="myFunction(); return false;">Zavolat funkci</a>
<script>
function myFunction() {
  console.log('Funkce byla zavolána');
}
</script>

Poznámka: Inline JavaScript se nedoporučuje kvůli:

Porušení separace concerns (struktura vs. chování) Bezpečnostním rizikům (XSS) Obtížnější údržbě Content Security Policy issues

// Navigace v JavaScriptu
window.location.href = 'page.html';
// Otevření v nové záložce
window.open('page.html', '_blank');
// Programové kliknutí na odkaz
document.getElementById('myLink').click();
// Simulace kliknutí s event
const link = document.getElementById('myLink');
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
link.dispatchEvent(clickEvent);

<a href="external.com" 
   onclick="ga('send', 'event', 'Outbound Link', 'click', 'external.com');">
  Externí odkaz s GA tracking
</a>
<!-- Modernější způsob s data atributy -->
<a href="external.com" data-track="outbound" data-label="external">
  Externí odkaz
</a>
<script>
document.querySelectorAll('a[data-track]').forEach(link => {
  link.addEventListener('click', function(e) {
    // Tracking logika
    gtag('event', this.dataset.track, {
      'label': this.dataset.label,
      'url': this.href
    });
  });
});
</script>

<!-- Základní -->
<a href="page.html">
  <img src="image.jpg" alt="Popisný text obrázku">
</a>
<!-- S title pro tooltip -->
<a href="page.html" title="Přejít na detailní stránku">
  <img src="thumbnail.jpg" alt="Náhled produktu">
</a>
<!-- Odstranění borderu kolem obrázku -->
<style>
a img {
  border: none;
  display: block; /* Odstraní spacing pod obrázkem */
}
</style>

<!-- Blokový odkaz s více elementy -->
<a href="article.html" class="card-link">
  <article class="card">
    <img src="thumbnail.jpg" alt="Náhled">
    <h3>Nadpis článku</h3>
    <p>Krátký popis článku...</p>
    <span class="read-more">Číst více →</span>
  </article>
</a>
<style>
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
 
.card-link:hover .card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  transition: all 0.3s;
}
</style>

Poznámka: Odkaz může obsahovat téměř jakýkoliv obsah, ale NESMÍ obsahovat interaktivní elementy (jiné odkazy, tlačítka, formulářová pole).

<!-- ODKAZ - pro navigaci -->
<a href="page.html">Přejít na stránku</a>
<!-- TLAČÍTKO - pro akce -->
<button type="button" onclick="doAction()">Provést akci</button>
<!-- ŠPATNĚ - odkaz pro akci bez navigace -->
<a href="#" onclick="doAction(); return false;">Provést akci</a>
<!-- ŠPATNĚ - tlačítko stylované jako odkaz pro navigaci -->
<button onclick="window.location='page.html'">Přejít na stránku</button>

Pravidlo:

Odkaz (<a>) = navigace, změna URL Tlačítko (<button>) = akce bez změny URL

<a href="product.html" 
   data-product-id="12345"
   data-category="electronics"
   data-price="999">
  Produkt
</a>
<script>
document.querySelectorAll('a[data-product-id]').forEach(link => {
  link.addEventListener('click', function(e) {
    const productId = this.dataset.productId;
    const category = this.dataset.category;
    const price = this.dataset.price;
 
    // Logika s daty
    console.log(`Produkt ${productId} za ${price} Kč`);
  });
});
</script>

<!-- Prefetch - načte stránku do cache -->
<link rel="prefetch" href="next-page.html">
<!-- Preload - načte s vyšší prioritou -->
<link rel="preload" href="important-page.html" as="document">
<!-- JavaScript prefetch při hoveru -->
<script>
const links = document.querySelectorAll('a[href]');
 
links.forEach(link => {
  link.addEventListener('mouseenter', function() {
    const url = this.href;
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = url;
    document.head.appendChild(prefetchLink);
  }, { once: true });
});
</script>

<nav>
  <a href="/home" data-spa-link>Domů</a>
  <a href="/about" data-spa-link>O nás</a>
  <a href="/contact" data-spa-link>Kontakt</a>
</nav>
<script>
// Zachycení kliknutí pro SPA routing
document.addEventListener('click', function(e) {
  const link = e.target.closest('a[data-spa-link]');
 
  if (link) {
    e.preventDefault();
    const url = link.getAttribute('href');
 
    // History API
    history.pushState(null, '', url);
 
    // Načtení obsahu (AJAX, fetch, atd.)
    loadPage(url);
  }
});
 
// Podpora tlačítek zpět/vpřed
window.addEventListener('popstate', function() {
  loadPage(window.location.pathname);
});
 
function loadPage(url) {
  // Fetch a rendering logika
  console.log('Loading page:', url);
}
</script>

<!-- NEBEZPEČNÉ - nikdy nedůvěřujte user inputu! -->
<?php
$userInput = $_GET['url'];
echo "<a href='$userInput'>Odkaz</a>";
// Útočník může použít: ?url=javascript:alert(document.cookie)
?>
<!-- BEZPEČNÉ - escapování -->
<?php
$userInput = htmlspecialchars($_GET['url'], ENT_QUOTES, 'UTF-8');
echo "<a href='$userInput'>Odkaz</a>";
?>
<!-- JEŠTĚ LEPŠÍ - validace URL -->
<?php
$userInput = filter_var($_GET['url'], FILTER_VALIDATE_URL);
if ($userInput !== false) {
    echo "<a href='" . htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8') . "'>Odkaz</a>";
}
?>

<!-- ZRANITELNÉ -->
<a href="https://evil-site.com" target="_blank">Škodlivý odkaz</a>
<!-- Škodlivá stránka může změnit window.opener.location -->
<script>
// Na evil-site.com:
if (window.opener) {
  window.opener.location = 'https://phishing-site.com';
}
</script>
<!-- BEZPEČNÉ - používat rel="noopener" -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  Bezpečný odkaz
</a>

<!-- ZRANITELNÉ -->
<a href="/redirect?url=<?= $_GET['next'] ?>">Pokračovat</a>
<!-- Útočník: /redirect?url=https://evil.com -->
<!-- BEZPEČNÉ - whitelist povolených domén -->
<?php
$allowedDomains = ['example.com', 'subdomain.example.com'];
$url = parse_url($_GET['next']);
 
if (in_array($url['host'], $allowedDomains)) {
    echo "<a href='/redirect?url=" . htmlspecialchars($_GET['next']) . "'>Pokračovat</a>";
}
?>

<!-- Zobrazení skutečné URL před kliknutím -->
<a href="https://real-site.com" 
   onmouseover="document.getElementById('url-display').textContent = this.href">
  Bezpečný odkaz
</a>
<div id="url-display" style="font-size: 0.8em; color: gray;"></div>
<!-- Varování před externími odkazy -->
<script>
document.querySelectorAll('a[href^="http"]').forEach(link => {
  if (!link.href.includes(window.location.hostname)) {
    link.addEventListener('click', function(e) {
      if (!confirm(`Chystáte se opustit náš web a přejít na:\n${this.href}\n\nPokračovat?`)) {
        e.preventDefault();
      }
    });
  }
});
</script>

1. Popisný text odkazu (anchor text)

<!-- Špatně -->
<a href="product.html">klikněte zde</a>
<a href="product.html">více informací</a>
<!-- Dobře -->
<a href="product.html">iPhone 15 Pro Max 256GB černý</a>
<a href="article.html">Kompletní průvodce HTML odkazy v roce 2024</a>

2. Rel atributy pro SEO

<!-- nofollow - nepředávat PageRank -->
<a href="untrusted.com" rel="nofollow">Nedůvěryhodný odkaz</a>
<!-- sponsored - placený odkaz -->
<a href="sponsor.com" rel="sponsored">Náš sponzor</a>
<!-- ugc - User Generated Content -->
<a href="user-page.html" rel="ugc">Uživatelský příspěvek</a>
<!-- Kombinace -->
<a href="external.com" rel="nofollow noopener">Externí + nofollow</a>