<a>: Element Kotwicy

Element <a> w HTML (lub element kotwicy) tworzy hiperłącze do innych stron internetowych, plików, miejsc na tej samej stronie, adresów e-mail lub innych adresów URL.

Kategorie treści Treść płynna, Treść frazowania, Treść interaktywna, zawartość zdzieralna.
Dozwolona zawartość Transparent, zawierający albo treści płynne (z wyłączeniem treści interaktywnych), albo treści frazowania.
Pominięcie znacznika Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.
Dozwoleni rodzice Każdy element, który akceptuje zawartość frazowania, lub każdy element, który akceptuje treści przepływu, ale zawsze z wyłączeniem elementów <a> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <a>, jako rodzic, nie może mieć interaktywnej zawartości, to ta sama zawartość <a> nie może mieć znacznika <a> jako rodzica).
Dozwolone role ARIA button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem
Interfejs DOM HTMLAnchorElement

Atrybuty

Ten element uwzględnia atrybuty globalne.

downloadHTML5
Ten atrybut nakazuje przeglądarkom pobieranie adresu URL zamiast nawigowania do niego, więc użytkownik zostanie poproszony o zapisanie go w postaci pliku lokalnego. Jeśli atrybut ma wartość, jest używany jako wstępnie wypełniona nazwa pliku w oknie dialogowym Zapisz (użytkownik nadal może zmienić nazwę, jeśli chce). Nie ma ograniczeń co do dozwolonych wartości, choć / oraz \ są konwertowane na podkreślenia. Większość systemów plików ogranicza interpunkcję w nazwach plików, a przeglądarki odpowiednio dostosują sugerowaną nazwę.
Uwagi:
  • Ten atrybut działa tylko dla adresów URL tego samego pochodzenia.
  • Chociaż adresy URL HTTP muszą być w tym samym miejscu pochodzenia, obiekt blob: URLs oraz data: URLs są dozwolone, aby można było pobierać treści generowane przez JavaScript, takie jak obrazy utworzone w aplikacji internetowej do edycji obrazów.
  • Jeżeli nagłówek HTTP Content-Disposition: podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.
  • Jeśli Content-Disposition: jest ustawione na inline, Firefox nadaje priorytet Content-Disposition, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi download.
href
Zawiera URL lub fragment URL do którego wskazuje hiperłącze.
Fragment adresu URL jest nazwą poprzedzoną znakiem skrótu (#), który określa wewnętrzną lokalizację docelową (id elementu HTML) w bieżącym dokumencie. Adresy URL nie są ograniczone do dokumentów opartych na sieci Web, ale mogą korzystać z dowolnego protokołu obsługiwanego przez przeglądarkę. Na przykład, file:, ftp:, oraz mailto: działają w większości przeglądarek.

Uwaga: Możesz użyć href="#top" lub pusty fragment href="#" aby przejść do górnej części biężącej strony. Takie zachowanie jest określone przez HTML5.

hreflang
Ten atrybut wskazuje język ludzki powiązanego zasobu. Jest to atrybut czysto doradczy, bez wbudowanych funkcji. Dozwolone wartości są określane przez BCP47.
ping
Zawiera oddzieloną spacją listę adresów URL, do których, gdy następuje hiperłącze, żądania POST z oznaczeniem PING będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.
referrerpolicy 
Wskazuje który odsyłacz należy wysłać podczas pobierania adresu URL:
  • 'no-referrer' oznacza, że Referer: nagłówek nie zostanie wysłany.
  • 'no-referrer-when-downgrade' oznacza, że Referer: nagłówek nie zostanie wysłany podczas nawigacji do miejsca pochodzenia bez HTTPS. Jest to zachowanie domyślne.
  • 'origin' oznacza, że odsyłającym będzie pochodzenie strony, nie włączając informacji po domenie.
  • 'origin-when-cross-origin' oznacza, że nawigacja do innych miejsc pochodzenia będzie ograniczona do schematu, hosta i portu, podczas gdy nawigacja w tym samym miejscu pochodzenia będzie obejmować ścieżkę strony odsyłającej.
  • 'strict-origin-when-cross-origin'
  • 'unsafe-url' oznacza, że odsyłacz będzie zawierał pochodzenie i ścieżkę, ale nie fragment, hasło, lub nazwę użytkownika. Jest to niebezpieczne, ponieważ może spowodować przeciek danych z bezpiecznych adresów URL do niepewnych.
rel
Określa relację obiektu docelowego z obiektem łącza. Wartość jest oddzieloną spacjami listą typów łączy.
target
Określa, gdzie ma być wyświetlany link URL. Jest to nazwa lub słowo kluczowe kontekstu przeglądania, zakładki, okna lub <iframe>. Następujące słowa kluczowe mają specjalne znaczenie:
  • _self: Wczytuje adres URL do tego samego kontekstu przeglądania, co bieżący. Jest to zachowanie domyślne.
  • _blank: Wczytuje adres URL w nowy kontekst przeglądania. Zazwyczaj jest to zakładka, ale użytkownicy mogą skonfigurować przeglądarkę tak, aby korzystała z nowych okien.
  • _parent: Ładuje adres URL do nadrzędnego kontekstu przeglądania bieżącego. Jeśli nie ma rodzica, zachowuje się tak samo jak _self.
  • _top: Wczytuje adres URL w kontekst przeglądania na najwyższym poziomie (czyli "najwyższy" kontekst przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma rodzica, zachowuje się tak samo jak _self.

Uwaga: Podczas używania target, rozważ dodanie rel="noreferrer", aby uniknąć wykorzystania API window.opener.

Uwaga: Linkowanie do innej strony przy użyciu target="_blank" uruchomi nową stronę na tym samym procesie co Twoja strona. Jeśli nowa strona wykonuje duże skrypty JS, wydajność Twojej strony może ucierpieć. Aby tego uniknąć, użyj rel="noopener".

type
Określa typ nośnika w postaci typu MIME dla połączonego adresu URL. Jest to czysto doradcze, bez wbudowanych funkcji.

Atrybuty przestarzałe

charsetPrzestarzały HTML5
Ten atrybut definiuje kodowanie znaków dla powiązanego adresu URL. Wartość ta powinna być spacją i/lub przecinkiem z listy zbiorów znaków zdefiniowanych w RFC 2045. Domyślną wartością jest ISO-8859-1.

Uwaga dotycząca zastosowania: Ten atrybut jest przestarzały w HTML5 i nie powinien być używany przez twórców. Aby uzyskać jego efekt, użyj nagłówka HTTP Content-Type: na linkowanym adresie URL.

coords tylkoHTML 4Przestarzały HTML5
Do wykorzystania z atrybutem shape opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.
name tylkoHTML 4Przestarzały HTML5
Ten atrybut był wymagany w przypadku kotwic określających możliwą lokalizację docelową na stronie. W HTML 4.01, id oraz name mogą być używane jednocześnie w elemencie <a>, o ile mają identyczne wartości.

Uwaga dotycząca zastosowania: Ten atrybut jest przestarzały w HTML5, zamiast niego użyj globalnego atrybutu id.

rev tylkoHTML 4Przestarzały HTML5
Ten atrybut określa łącze odwrotne, odwrotną zależność atrybutu rel. Został wycofany ze względu na to, że był bardzo mylący.
Uwaga: Obecnie specyfikacja W3C HTML 5.2 stwierdza, że rev nie jest już przestarzałe, podczas gdy Living Standard od WHATWG nadal ma to oznaczone jako przestarzałe. Dopóki ta rozbieżność nie zostanie wyjaśniona, zalecane jest uznawać go jako atrybut przestarzały.
shape tylkoHTML 4Przestarzały HTML5
Atrybut ten został użyty do zdefiniowania regionu dla hiperłączy w celu utworzenia mapy obrazu. Wartości to circle, default, polygon, oraz rect. Format atrybutu coords zależy od wartości kształtu. Dla circle wartością jest x,y,r gdzie x oraz y są współrzędnymi pikseli dla środka okręgu, a r jest wartością promienia w pikselach. Dla rect atrybut coords powinien wynosić x,y,w,h. Wartości x,y definiują lewy górny narożnik prostokąta, natomiast w oraz h odpowiednio szerokość i wysokość. Wartość polygon dla kształtu wymaga wartości x1,y1,x2,y2,... dla coords. Każda z par x,y określa punkt wielokąta, z kolejnymi punktami połączonymi liniami prostymi i ostatnim punktem połączonym z pierwszym. Wartość default dla kształtu wymaga użycia całego zamkniętego obszaru, zazwyczaj obrazu.
Uwaga: Użyj atrybutu usemap dla elementu <img> i powiązanego elementu <map> aby zdefiniować hotspoty zamiast atrybutu shape.

Przykłady

Odnośnik do lokalizacji zewnętrznej

<!-- kotwica tworząca odnośnik do zewnętrznego pliku -->
<a href="http://www.mozilla.com/">
Odnośnik zewnętrzny
</a>

Rezultat

Odnośnik zewnętrzny

Odnośnik do innej sekcji na tej samej stronie

<!-- odnośniki do elementów na tej stonie z id="attr-href" -->
<a href="#attr-href">
Opis łączy na tej samej stronie
</a>

Rezultat

Opis łączy na tej samej stronie

Tworzenie klikalnego obrazu

W tym przykładzie jako odnośnika do strony głównej MDN użyto obrazu. Strona główna otworzy się w nowym kontekście przeglądania, czyli w nowej stronie lub nowej karcie.

<a href="https://developer.mozilla.org/pl/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>

Rezultat

MDN logo

Tworzenie odnośnika email

Często tworzy się linki, które otwierają się w programie pocztowym użytkownika, aby umożliwić mu wysłanie nowej wiadomości. Odbywa się to za pomocą odnośnika mailto:. Oto prosty przykład:

<a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a>

Rezultat

Wyślij email do nikąd

Aby uzyskać dodatkowe informacje dotyczące schematu adresu URL mailto, takie jak temat, treść, lub inne z góry określone treści, zobacz Odnośniki email lub RFC 6068.

Tworzenie łącza telefonicznego

Oferowanie łącz telefonicznych jest pomocne dla użytkowników przeglądających dokumenty internetowe a ich urządzenie jest powiązane z telefonem.

<a href="tel:+491570156">+49 157 0156</a>

Dodatkowe informację na temat schematu URL tel można znaleźć w RFC 3966.

Użycie atrybutu download do zapisania <canvas> jako PNG

Jeśli chcesz pozwolić użytkownikom na pobranie elementu HTML <canvas> jako obrazu, możesz utworzyć odnośnik z atrybutem download i danymi płótna jako URL pliku:

var link = document.createElement('a');
link.textContent = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

Można to zobaczyć w praktyce na stronie jsfiddle.net/codepo8/V6ufG/2/.

Uwagi

HTML 3.2 definiuje tylko atrybuty name, href, rel, rev oraz title.

Kwestie dotyczące bezpieczeństwa i prywatności

Chociaż elementy <a> mają wiele niewinnych zastosowań, mogą mieć niepożądane konsekwencje dla bezpieczeństwa i prywatności użytkownika. Zobacz Nagłówek Referer: obawy dotyczące prywatności i bezpieczeństwa, aby uzyskać więcej informacji i środków zaradczych.

Kwestie dostępności

wydarzenia onclick

Znaczniki Kotwicy są często nadużywane przez zdarzenie onclick do tworzenia pseudo-przycisków przez ustawienie href na "#" lub "javascript:void(0)", aby zapobiec odświeżaniu strony.

Wartości te powodują nieoczekiwane zachowanie podczas kopiowania/przenoszenia linków, otwierania odnośników w nowej zakładce/oknie, dodawaniu do zakładek i gdy JavaScript jest nadal pobierany, w stanie błędu, lub wyłączony. To również przekazuje nieprawidłową semantykę do technologii wspomagających (np. czytniki ekranu). W takich przypadkach zaleca się użycie przycisku <button> instead. Ogólnie rzecz biorąc, należy używać kotwicy tylko do nawigacji przy użyciu odpowiedniego adresu URL.

Linki zewnętrzne i łącza do zasobów nie-HTML

Oba odnośniki, które otwierają się w nowej zakładce lub oknie poprzez deklarację target="_blank" oraz linki do zasobów plików, których wartość href wskazuje na źródło pliku powinny zawierać wskaźnik zachowania, które wystąpi po aktywacji łącza.

Osoby o słabym wzroku, które poruszają się za pomocą technologii odczytu ekranowego lub które mają problemy poznawcze mogą zostać zmylone, gdy nieoczekiwanie otworzy się nowa karta, okno lub aplikacja. Starsze wersje oprogramowania do czytania na ekranie mogą nawet nie ogłaszać zachowania.

Odnośnik otwierający nową kartę lub okno

<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a>

Odnośnik do zasobów nie-HTML

<a target="_blank" href="2017-annual-report.ppt">Raport Roczny 2017 (PowerPoint)</a>

Jeśli zamiast tekstu używana jest ikona do oznaczenia tego rodzaju zachowania odnośników, upewnij się, że zawiera ona opis alternatywny.

Odnośniki pomijające

Link pomijający, znany również jako skipnav, jest elementem a umieszczonym jak najbliżej elementu otwarcia <body>, który odsyła do początku głównej zawartości strony. Odnośnik ten umożliwia ominięcie treści powtarzanej na wielu stronach, takich jak nagłówek strony i podstawowa nawigacja.

Łącza pomijające są szczególnie przydatne dla osób, które poruszają się za pomocą technologii wspomagających, takich jak przełączniki, komendy głosowe, ustne pałeczki/różdżki, gdzie poruszanie się przez powtarzające się łącza może być pracochłonnym zadaniem.

Odległość

Duża ilość interaktywnych treści—w tym kotwic—umieszczonych w bliskiej odległości od siebie powinna mieć miejsce na ich oddzielenie. Odstęp ten jest korzystny dla osób, które doświadczają problemów z układem ruchu, które mogą przypadkowo aktywować błędne treści interaktywne podczas nawigacji.

Odstępy mogą być tworzone przy użyciu właściwości CSS, takich jak margin.

Klikanie i focus

To, czy kliknięcie na <a> powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.

Czy kliknięcie na <a> spowoduje tryb skupienia?
Przeglądarki stacjonarne Windows 8.1 OS X 10.9
Firefox 30.0 Tak Tak
Chrome ≥39
(Chromium bug 388666)
Tak Tak
Safari 7.0.5 Nie dotyczy Tylko jeśli posiada tabindex
Internet Explorer 11 Tak Nie dotyczy
Presto (Opera 12) Tak Tak
Czy stuknięcie w <a> spowoduje tryb skupienia?
Przeglądarki mobilne iOS 7.1.2 Android 4.4.4
Safari Mobile Tylko jeśli posiada tabindex Nie dotyczy
Chrome 35 ??? Tylko jeśli posiada tabindex

Specyfikacje

Specyfikacja Status Komentarz
Referrer Policy
The definition of 'referrer attribute' in that specification.
Candidate Recommendation Dodano atrybut referrer.
HTML Living Standard
The definition of '<a>' in that specification.
Living Standard  
HTML5
The definition of '<a>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<a>' in that specification.
Recommendation  

Kompatybilność z przeglądarką

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aChrome Full support YesEdge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charset
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
coords
Deprecated
Chrome No support NoEdge No support NoFirefox No support ? — 58
Notes
No support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support ? — 58
Notes
No support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
downloadChrome Full support 14
Notes
Full support 14
Notes
Notes Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Edge Full support 18
Full support 18
Partial support 13
Notes
Notes Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
Notes Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).
Firefox Full support 20IE No support NoOpera Full support 15Safari Full support 10.1WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in WebView 65, cross-origin downloads are not supported on the <a> element.
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Firefox Android Full support 20Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 1.0
Notes
Full support 1.0
Notes
Notes Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> element.
hrefChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hreflangChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
name
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ping
Experimental
Chrome Full support YesEdge No support NoFirefox Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS No support NoSamsung Internet Android Full support Yes
referrerpolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 7.2
relChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rev
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
shape
Deprecated
Chrome No support NoEdge No support NoFirefox No support ? — 58
Notes
No support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support ? — 58
Notes
No support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
targetChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Zobacz także