<a>

Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.

Wyświetlanie: inline
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść przezroczysta, bez elementów interaktywnych

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<p>
  Zacznij od <a href="https://www.codeworlds.com/kursy">darmowego kursu HTML</a>
  albo przejdź do <a href="#atrybuty">listy atrybutów</a>.
</p>

Podgląd

Definicja i zastosowanie

Element <a> (od angielskiego anchor, kotwica) tworzy hiperłącze. To dzięki niemu sieć jest siecią: klikasz tekst i przechodzisz pod adres podany w atrybucie href.

Odnośnik może prowadzić do innej strony, do konkretnego miejsca na bieżącej stronie (href="#id"), do pliku do pobrania, do adresu e-mail (mailto:) albo numeru telefonu (tel:). Bez atrybutu href element jest tylko zaślepką, której nie da się kliknąć ani wybrać klawiszem Tab.

Treścią odnośnika może być tekst, obraz, a nawet cały blok z nagłówkiem i opisem. Nie wolno w nim jednak zagnieżdżać innych elementów interaktywnych, takich jak <button> czy drugi <a>.

Składnia

<a href="adres">treść odnośnika</a>

Atrybuty

href
URL
Adres docelowy. Może być bezwzględny (https://…), względny (/kursy), kotwicą na tej samej stronie (#faq) albo specjalnym schematem, jak mailto: czy tel:.
target
_self | _blank | _parent | _top | nazwa
Określa, gdzie otworzyć adres. _self (domyślnie) otwiera w bieżącej karcie, _blank w nowej karcie lub oknie. Współczesne przeglądarki przy _blank automatycznie odcinają nowej stronie dostęp do strony, z której przyszła.
rel
lista słów kluczowych
Opisuje relację między bieżącą stroną a celem. Najczęściej spotkasz noopener i noreferrer (bezpieczeństwo i prywatność), nofollow i sponsored (dla wyszukiwarek przy linkach niezaufanych lub płatnych) oraz external.
download
nazwa pliku (opcjonalnie)
Każe przeglądarce pobrać plik zamiast go otwierać. Podana wartość staje się proponowaną nazwą pliku. Działa tylko dla adresów z tej samej domeny oraz adresów blob: i data:.
hreflang
kod języka
Informuje, w jakim języku jest strona docelowa, na przykład en albo pl. Przeglądarka tego nie wymusza, to wskazówka dla użytkownika i robotów.
type
typ MIME
Podpowiada, jaki rodzaj pliku kryje się pod adresem, na przykład application/pdf. Podobnie jak hreflang, jest tylko wskazówką.
referrerpolicy
no-referrer | origin | same-origin | strict-origin-when-cross-origin | …
Decyduje, ile informacji o stronie źródłowej przeglądarka wyśle w nagłówku Referer po kliknięciu. no-referrer nie wysyła nic.

Atrybut	Wartości	Opis
href	URL	Adres docelowy. Może być bezwzględny (`https://…`), względny (`/kursy`), kotwicą na tej samej stronie (`#faq`) albo specjalnym schematem, jak `mailto:` czy `tel:`.
target	_self \| _blank \| _parent \| _top \| nazwa	Określa, gdzie otworzyć adres. `_self` (domyślnie) otwiera w bieżącej karcie, `_blank` w nowej karcie lub oknie. Współczesne przeglądarki przy `_blank` automatycznie odcinają nowej stronie dostęp do strony, z której przyszła.
rel	lista słów kluczowych	Opisuje relację między bieżącą stroną a celem. Najczęściej spotkasz `noopener` i `noreferrer` (bezpieczeństwo i prywatność), `nofollow` i `sponsored` (dla wyszukiwarek przy linkach niezaufanych lub płatnych) oraz `external`.
download	nazwa pliku (opcjonalnie)	Każe przeglądarce pobrać plik zamiast go otwierać. Podana wartość staje się proponowaną nazwą pliku. Działa tylko dla adresów z tej samej domeny oraz adresów `blob:` i `data:`.
hreflang	kod języka	Informuje, w jakim języku jest strona docelowa, na przykład `en` albo `pl`. Przeglądarka tego nie wymusza, to wskazówka dla użytkownika i robotów.
type	typ MIME	Podpowiada, jaki rodzaj pliku kryje się pod adresem, na przykład `application/pdf`. Podobnie jak `hreflang`, jest tylko wskazówką.
referrerpolicy	no-referrer \| origin \| same-origin \| strict-origin-when-cross-origin \| …	Decyduje, ile informacji o stronie źródłowej przeglądarka wyśle w nagłówku `Referer` po kliknięciu. `no-referrer` nie wysyła nic.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

href

URL

Adres docelowy. Może być bezwzględny (https://…), względny (/kursy), kotwicą na tej samej stronie (#faq) albo specjalnym schematem, jak mailto: czy tel:.

HTML

<a href="https://developer.mozilla.org">Pełny adres</a><br>
<a href="/kolekcje">Adres względny</a><br>
<a href="#top">Kotwica na tej stronie</a><br>
<a href="mailto:team@codeworlds.pl">Napisz e-mail</a><br>
<a href="tel:+48123456789">Zadzwoń</a>

Podgląd

target

_self | _blank | _parent | _top | nazwa

Określa, gdzie otworzyć adres. _self (domyślnie) otwiera w bieżącej karcie, _blank w nowej karcie lub oknie. Współczesne przeglądarki przy _blank automatycznie odcinają nowej stronie dostęp do strony, z której przyszła.

HTML

<a href="https://www.w3.org" target="_blank">Otwórz W3C w nowej karcie</a>

Podgląd

rel

lista słów kluczowych

Opisuje relację między bieżącą stroną a celem. Najczęściej spotkasz noopener i noreferrer (bezpieczeństwo i prywatność), nofollow i sponsored (dla wyszukiwarek przy linkach niezaufanych lub płatnych) oraz external.

HTML

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Link zewnętrzny bez przekazywania adresu źródłowego
</a>

Podgląd

download

nazwa pliku (opcjonalnie)

Każe przeglądarce pobrać plik zamiast go otwierać. Podana wartość staje się proponowaną nazwą pliku. Działa tylko dla adresów z tej samej domeny oraz adresów blob: i data:.

HTML

<a href="data:text/plain;charset=utf-8,Witaj%20w%20CodeWorlds" download="powitanie.txt">
  Pobierz plik powitanie.txt
</a>

Podgląd

hreflang

kod języka

Informuje, w jakim języku jest strona docelowa, na przykład en albo pl. Przeglądarka tego nie wymusza, to wskazówka dla użytkownika i robotów.

HTML

<a href="https://www.codeworlds.com/en" hreflang="en">English version</a>

Podgląd

type

typ MIME

Podpowiada, jaki rodzaj pliku kryje się pod adresem, na przykład application/pdf. Podobnie jak hreflang, jest tylko wskazówką.

HTML

<a href="/cennik.pdf" type="application/pdf">Cennik (PDF)</a>

Podgląd

referrerpolicy

no-referrer | origin | same-origin | strict-origin-when-cross-origin | …

Decyduje, ile informacji o stronie źródłowej przeglądarka wyśle w nagłówku Referer po kliknięciu. no-referrer nie wysyła nic.

HTML

<a href="https://example.com" referrerpolicy="no-referrer">Bez nagłówka Referer</a>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

a:link, a:visited {
  color: (zależny od przeglądarki);
  text-decoration: underline;
  cursor: pointer;
}
a:link:active, a:visited:active {
  color: (zależny od przeglądarki);
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Tekst linku powinien mówić, dokąd prowadzi. Zamiast „kliknij tutaj” napisz „pobierz cennik w PDF”.
Link służy do nawigacji, przycisk do akcji. Jeśli kliknięcie niczego nie otwiera, tylko coś robi na stronie, użyj <button>.
Przy linkach otwieranych w nowej karcie warto to zaznaczyć w treści lub ikoną, żeby nie zaskoczyć użytkownika.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs