Dokumentacja HTML z przykładami: Linki (a href)

Q: Jak zrobić link w HTML?

Użyj elementu kotwicy: Example . href to cel, a tekst między znacznikami to to, co klika czytelnik.

Q: Jak podlinkować konkretne miejsce na stronie?

Nadaj elementowi docelowemu id, a potem podlinkuj go z krzyżykiem: FAQ i FAQ . Z innej strony dodaj krzyżyk do adresu URL: .

Q: Dlaczego link prowadzi na złą stronę, gdy piszę www?

Bez https:// przeglądarka traktuje www.example.com jako względną ścieżkę w twojej witrynie, więc link prowadzi pod adres w rodzaju yoursite.com/www.example.com. W linkach zewnętrznych zawsze pisz schemat: href="https://www.example.com".

Q: Czy znacznik a może zawierać div?

Tak. W HTML5 może obejmować treść blokową, taką jak , nagłówek i akapit; tak buduje się linki obejmujące całą kartę. Nie może jednak zawierać innego linku, przycisku ani żadnego innego elementu interaktywnego.

Jak zrobić link w HTML

Link to element kotwicy, <a>, z atrybutem href. href określa, dokąd prowadzi link; treść między znacznikami to to, co klika czytelnik.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Przeglądarki pokazują linki na niebiesko z podkreśleniem i zmieniają kursor w dłoń. Ostatnia linia pokazuje, dlaczego href jest ważny: bez niego <a> to zwykły tekst. Nie da się na niego przejść klawiaturą ani go kliknąć i nie wygląda jak link.

Bezwzględne i względne adresy URL

Wartość href decyduje, dokąd prowadzi link. Główne formy:

`href`	Prowadzi do
`https://example.com/page`	Bezwzględny URL: dokładnie tego adresu
`/about`	`about` w katalogu głównym bieżącej witryny
`about.html`	`about.html` w tym samym folderze co bieżąca strona
`../index.html`	`index.html` o jeden folder wyżej
`#pricing`	Elementu z `id="pricing"` na tej stronie
`/help#faq`	Sekcji `faq` innej strony w tej witrynie
`mailto:hi@example.com`	Nowego e-maila w programie pocztowym czytelnika
`tel:+15551234567`	Połączenia telefonicznego na urządzeniach, które je obsługują

Do innych witryn używaj bezwzględnych URL, a we własnej ścieżek względnych od katalogu głównego (/about): działają dalej, gdy strona, która je zawiera, trafi do innego folderu.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Ostatnia linia to najczęstszy błąd w linkach. Bez https:// przeglądarka czyta www.wikipedia.org jako nazwę pliku w bieżącym folderze.

Linki e-mail i telefoniczne mają własną stronę: linki e-mail w HTML.

Link do sekcji strony

Każdy element z id może być celem. Podlinkuj go przez # i id, a przeglądarka przewinie do niego stronę. Kliknij linki w podglądzie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Kilka szczegółów:

Id musi pasować dokładnie, łącznie z wielkością liter. href="#FAQ" nie znajdzie id="faq".
href="#top" i href="#" przewijają na początek strony, nawet gdy żaden element nie ma id top.
Selektor :target stylizuje sekcję, na którą aktualnie wskazuje URL. Na prawdziwej stronie ją wyróżnia; podgląd przewija bez zmiany adresu, więc wyróżnienia w nim nie widać.
Żeby podlinkować sekcję innej strony, dodaj krzyżyk do jej adresu URL: <a href="/docs/html/table#caption">.

Kotwice pod przyklejonym nagłówkiem

Przyklejony (sticky) lub stały nagłówek zasłania górę sekcji, do której skaczesz. scroll-margin-top na elementach docelowych zostawia na niego miejsce, a scroll-behavior: smooth animuje skok:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Usuń linię z scroll-margin-top i znów kliknij Two: nagłówek zostanie schowany za ciemnym paskiem.

Linki do pobierania

Atrybut download prosi przeglądarkę o zapisanie pliku zamiast jego otwarcia. Jego wartość, jeśli ją podasz, to proponowana nazwa pliku:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download działa tylko dla plików z tego samego źródła (origin) co strona (ten sam schemat, host i port) oraz dla adresów data: i blob:. Dla pliku z innego źródła, nawet z subdomeny, przeglądarki go ignorują i otwierają plik jak zwykły link. Serwer może wymusić pobieranie dowolnego pliku nagłówkiem Content-Disposition: attachment.

Tekst linku, który ma sens

Użytkownicy czytników ekranu często przechodzą przez stronę od linku do linku, słysząc tylko tekst linków. "Kliknij tutaj" i "Czytaj więcej" nic im nie mówią.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

Atrybut title pokazuje dymek po najechaniu myszą, ale nie widać go na ekranach dotykowych ani dla większości użytkowników klawiatury, więc nie umieszczaj w nim niczego ważnego.

Cała karta jako link

<a> może obejmować treść blokową: nagłówek, obrazek i akapit mogą razem tworzyć jeden link. Tak buduje się klikalne karty.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block sprawia, że klikalne jest całe pole, a nie tylko tekst. Treść karty niech będzie krótka, bo czytnik ekranu odczytuje ją całą jako nazwę linku. I nigdy nie wstawiaj do środka innego linku ani przycisku: elementów interaktywnych nie można zagnieżdżać w <a>.

Inne atrybuty znacznika a

Atrybut	Co robi
`href`	Cel. Bez niego `<a>` nie jest linkiem
`target`	Gdzie otworzyć link; `target="_blank"` otwiera nową kartę, zobacz otwieranie linku w nowej karcie
`rel`	Relacja z celem: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Zapisuje plik zamiast go otwierać
`hreflang`	Język strony docelowej, jako wskazówka
`referrerpolicy`	Ile z bieżącego URL wysłać jako referrer

Częste błędy

Brak schematu w zewnętrznym URL. href="www.site.com" to ścieżka względna. Pisz https://.
<a href="#"> dla akcji JavaScript. Przewija na początek strony i dodaje # do adresu. Jeśli kliknięcie nigdzie nie prowadzi, użyj <button>.
Link w linku albo przycisk w linku. Oba to niepoprawny HTML: drugi <a> sprawia, że parser wcześniej zamyka pierwszy, a kliknięcie przycisku w linku nie ma jasnego celu.
Spacje w nazwach plików. href="my file.html" zwykle działa, bo przeglądarka koduje spację, ale my-file.html całkowicie omija problem.
"Kliknij tutaj" jako tekst linku. Opisz cel linku.
Niezgodna wielkość liter w id. #Pricing i id="pricing" to co innego.

Najczęściej zadawane pytania

Jak zrobić link w HTML?

Użyj elementu kotwicy: <a href="https://example.com">Example</a>. href to cel, a tekst między znacznikami to to, co klika czytelnik.

Co oznacza skrót href?

Hypertext reference, czyli odwołanie hipertekstowe. Zawiera URL, na który wskazuje link: pełny adres, ścieżkę w tej samej witrynie, jak /about, sekcję strony, jak #pricing, albo schemat, jak mailto:.

Jak podlinkować konkretne miejsce na stronie?

Nadaj elementowi docelowemu id, a potem podlinkuj go z krzyżykiem: <h2 id="faq">FAQ</h2> i <a href="#faq">FAQ</a>. Z innej strony dodaj krzyżyk do adresu URL: <a href="/help#faq">.

Dlaczego link prowadzi na złą stronę, gdy piszę www?

Bez https:// przeglądarka traktuje www.example.com jako względną ścieżkę w twojej witrynie, więc link prowadzi pod adres w rodzaju yoursite.com/www.example.com. W linkach zewnętrznych zawsze pisz schemat: href="https://www.example.com".

Czy znacznik a może zawierać div?

Tak. W HTML5 <a> może obejmować treść blokową, taką jak <div>, nagłówek i akapit; tak buduje się linki obejmujące całą kartę. Nie może jednak zawierać innego linku, przycisku ani żadnego innego elementu interaktywnego.

Powiązane zagadnienia