====== HTML tag <a> - Anchor (odkaz) ======
===== Základní informace =====
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.
==== Základní syntaxe ====
<code html>
<a href="URL">Text odkazu</a>
</code>
==== Jednoduchý příklad ====
<code html>
<a href="https://www.example.com">Navštivte Example.com</a>
</code>
===== Hlavní atributy =====
==== href (Hypertext Reference) ====
Nejdůležitější atribut určující cíl odkazu.
=== Absolutní URL ===
<code html>
<a href="https://www.example.com">Absolutní odkaz</a>
<a href="http://www.example.com/page.html">Odkaz s protokolem</a>
</code>
=== Relativní URL ===
<code html>
<!-- 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>
</code>
=== Speciální hodnoty href ===
<code html>
<!-- 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>
</code>
==== target ====
Určuje, kde se otevře cílová stránka.
<code html>
<!-- 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>
</code>
Bezpečnostní poznámka pro target="_blank":
<code html>
<!-- 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>
</code>
Důvody:

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

==== download ====
Nutí prohlížeč stáhnout soubor místo jeho otevření.
<code html>
<!-- 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>
</code>
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

==== rel (Relationship) ====
Definuje vztah mezi aktuálním dokumentem a cílovým zdrojem.
<code html>
<!-- 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>
</code>
==== type ====
Určuje MIME typ cílového zdroje (nápověda pro prohlížeč).
<code html>
<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>
</code>
==== hreflang ====
Specifikuje jazyk cílové stránky.
<code html>
<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>
</code>
==== title ====
Poskytuje doplňující informace o odkazu (tooltip).
<code html>
<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>
</code>
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).
==== ping ====
URL pro ping notifikace při kliknutí (trackování).
<code html>
<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>
</code>
Bezpečnost: Mnoho uživatelů a prohlížečů blokuje ping tracking.
==== referrerpolicy ====
Kontroluje, kolik informací se pošle v Referer hlavičce.
<code html>
<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>
</code>
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é)

===== Kotvení (Anchory na stránce) =====
Tag ''<a>'' se původně jmenoval "anchor" (kotva) právě kvůli možnosti vytvářet kotvy na stránce.
==== Moderní způsob - pomocí id ====
<code html>
<!-- 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>
</code>
==== Starý způsob - pomocí name (deprecated) ====
<code html>
<!-- NE - zastaralé, nepoužívat! -->
<a name="sekce1"></a>
<!-- ANO - moderní způsob -->
<div id="sekce1"></div>
</code>
==== Plynulé scrollování ====
<code html>
<!-- CSS pro plynulé scrollování -->
<style>
html {
  scroll-behavior: smooth;
}
</style>
<a href="#top">Plynule nahoru</a>
</code>
==== Scroll na začátek stránky ====
<code html>
<!-- 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>
</code>
===== Stylování odkazů =====
==== CSS pseudo-třídy ====
<code css>
/* 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 */
</code>
==== Odstranění podtržení ====
<code css>
a {
  text-decoration: none;
}
/* Podtržení pouze při hoveru */
a:hover {
text-decoration: underline;
}
</code>
==== Stylování podle atributů ====
<code css>
/* 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;
}
</code>
==== Tlačítkový styl ====
<code css>
.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;
}
</code>
===== Přístupnost (Accessibility) =====
==== Základní pravidla ====
1. Smysluplný text odkazu
<code html>
<!-- Š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>
</code>
2. Rozlišitelnost od okolního textu
<code css>
/* Š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;
}
</code>
3. Dostatečná velikost klikací oblasti
<code css>
/* Minimálně 44x44px pro touch zařízení */
a {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}
</code>
==== ARIA atributy ====
<code html>
<!-- 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>
</code>
==== Viditelný focus indikátor ====
<code css>
/* 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);
}
</code>
==== Skip links ====
<code html>
<!-- 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>
</code>
===== JavaScript a události =====
==== Event listeners ====
<code html>
<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>
</code>
==== Inline JavaScript (nedoporučuje se) ====
<code html>
<!-- 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>
</code>
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

==== Programová navigace ====
<code javascript>
// 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);
</code>
==== Tracking a analytics ====
<code html>
<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>
</code>
===== Pokročilé techniky =====
==== Obrázek jako odkaz ====
<code html>
<!-- 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>
</code>
==== Složitější obsah v odkazu ====
<code html>
<!-- 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>
</code>
Poznámka: Odkaz může obsahovat téměř jakýkoliv obsah, ale NESMÍ obsahovat interaktivní elementy (jiné odkazy, tlačítka, formulářová pole).
==== Tlačítko vs. odkaz ====
<code html>
<!-- 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>
</code>
Pravidlo:

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

==== Rozšiřitelné odkazy s data atributy ====
<code html>
<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>
</code>
==== Lazy loading pro odkazy ====
<code html>
<!-- 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>
</code>
==== SPA (Single Page Application) odkazy ====
<code html>
<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>
</code>
===== Bezpečnost =====
==== XSS (Cross-Site Scripting) ====
<code html>
<!-- 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>";
}
?>
</code>
==== Tabnabbing útok ====
<code html>
<!-- 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>
</code>
==== Open Redirect zranitelnost ====
<code html>
<!-- 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>";
}
?>
</code>
==== Phishing ochrana ====
<code html>
<!-- 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>
</code>
===== SEO (Search Engine Optimization) =====
==== Základní SEO pravidla ====
1. Popisný text odkazu (anchor text)
<code html>
<!-- Š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>
</code>
2. Rel atributy pro SEO
<code html>
<!-- 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>
</code>