{{HTMLRef}}
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 | {{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}} |
| Interfejs DOM | {{DOMxRef("HTMLAnchorElement")}} |
Ten element uwzględnia atrybuty globalne.
/ 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ę.
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.Content-Disposition: podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.Content-Disposition: jest ustawione na inline, Firefox nadaje priorytet Content-Disposition, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi download.#), który określa wewnętrzną lokalizację docelową ({{HTMLAttrxRef("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.
PING będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.'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.<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".
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.
shape opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.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 {{HTMLAttrxRef("id")}}.
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.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.
shape.<!-- kotwica tworząca odnośnik do zewnętrznego pliku --> <a href="http://www.mozilla.com/"> Odnośnik zewnętrzny </a>
<!-- odnośniki do elementów na tej stonie z id="attr-href" --> <a href="#attr-href"> Opis łączy na tej samej stronie </a>
Opis łączy na tej samej stronie
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>
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>
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)}}.
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)}}.
download do zapisania <canvas> jako PNGJeśli chcesz pozwolić użytkownikom na pobranie elementu HTML {{HTMLElement("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/.
HTML 3.2 definiuje tylko atrybuty name, href, rel, rev oraz title.
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.
onclickZnaczniki 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 {{HTMLElement("button")}} instead. Ogólnie rzecz biorąc, należy używać kotwicy tylko do nawigacji przy użyciu odpowiedniego adresu URL.
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.
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a>
<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 {{HTMLAttrxRef("alt", "img", "opis alternatywny", "true")}}.
Link pomijający, znany również jako skipnav, jest elementem a umieszczonym jak najbliżej elementu otwarcia {{HTMLElement("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.
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 {{CSSxRef("margin")}}.
To, czy kliknięcie na {{HTMLElement("a")}} powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.
| 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 |
| 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 |
| Specyfikacja | Status | Komentarz |
|---|---|---|
| {{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}} | {{Spec2("Referrer Policy")}} | Dodano atrybut referrer. |
| {{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}} | {{Spec2("HTML WHATWG")}} | |
| {{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}} | {{Spec2("HTML5 W3C")}} | |
| {{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}} | {{Spec2("HTML4.01")}} |
{{Compat("html.elements.a")}}