1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
|
---
title: '<a>: Element Kotwicy'
slug: Web/HTML/Element/a
tags:
- Element
- HTML
- HTML semantyka na poziomie tekstu
- Reference
- Treść
- Web
translation_of: Web/HTML/Element/a
---
<p>{{HTMLRef}}</p>
<p><span class="seoSummary"><strong>Element <code><a></code></strong> w <strong>HTML</strong> (lub element <em>kotwicy</em>) tworzy hiperłącze do innych stron internetowych, plików, miejsc na tej samej stronie, adresów e-mail lub innych adresów URL.</span></p>
<table class="properties">
<tbody>
<tr>
<th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th>
<td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>,<a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content"> Treść frazowania</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">Treść interaktywna</a>, zawartość zdzieralna.</td>
</tr>
<tr>
<th>Dozwolona zawartość</th>
<td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Transparent_content_model">Transparent</a>, zawierający albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści płynne</a> (z wyłączeniem <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">treści interaktywnych</a>), albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">treści frazowania</a>.</td>
</tr>
<tr>
<th>Pominięcie znacznika</th>
<td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td>
</tr>
<tr>
<th>Dozwoleni rodzice</th>
<td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>, lub każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści przepływu</a>, ale zawsze z wyłączeniem elementów <code><a></code> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <code><a></code>, jako rodzic, nie może mieć <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">interaktywnej zawartości</a>, to ta sama zawartość <code><a></code> nie może mieć znacznika <code><a></code> jako rodzica).</td>
</tr>
<tr>
<th>Dozwolone role ARIA</th>
<td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
</tr>
<tr>
<th>Interfejs DOM</th>
<td>{{DOMxRef("HTMLAnchorElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atrybuty">Atrybuty</h2>
<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p>
<dl>
<dt>{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt>
<dd>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ć <code>/</code> oraz <code>\</code> są konwertowane na podkreślenia. Większość systemów plików ogranicza interpunkcję w nazwach plików, a przeglądarki odpowiednio dostosują sugerowaną nazwę.
<div class="note"><strong>Uwagi:</strong>
<ul>
<li>Ten atrybut działa tylko dla <a href="https://developer.mozilla.org/pl/docs/Web/Security/Same-origin_policy">adresów URL tego samego pochodzenia</a>.</li>
<li>Chociaż adresy URL HTTP muszą być w tym samym miejscu pochodzenia, obiekt <a href="https://developer.mozilla.org/pl/docs/Web/API/URL/createObjectURL"><code>blob:</code> URLs</a> oraz <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> są dozwolone, aby można było pobierać treści generowane przez JavaScript, takie jak obrazy utworzone w aplikacji internetowej do edycji obrazów.</li>
<li>Jeżeli nagłówek HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.</li>
<li>Jeśli <code>Content-Disposition:</code> jest ustawione na <code>inline</code>, Firefox nadaje priorytet <code>Content-Disposition</code>, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi <code>download</code>.</li>
</ul>
</div>
</dd>
<dt>{{HTMLAttrDef("href")}}</dt>
<dd>Zawiera URL lub fragment URL do którego wskazuje hiperłącze.</dd>
<dd>Fragment adresu URL jest nazwą poprzedzoną znakiem skrótu (<code>#</code>), 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, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, oraz <code>mailto:</code> działają w większości przeglądarek.
<div class="note">
<p><strong>Uwaga:</strong> Możesz użyć <code>href="#top"</code> lub pusty fragment <code>href="#"</code> aby przejść do górnej części biężącej strony. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">Takie zachowanie jest określone przez HTML5</a>.</p>
</div>
</dd>
<dt>{{HTMLAttrDef("hreflang")}}</dt>
<dd>Ten atrybut wskazuje język ludzki powiązanego zasobu. Jest to atrybut czysto doradczy, bez wbudowanych funkcji. Dozwolone wartości są określane przez <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd>
<dt>{{HTMLAttrDef("ping")}}</dt>
<dd>Zawiera oddzieloną spacją listę adresów URL, do których, gdy następuje hiperłącze, żądania {{HTTPMethod("POST")}} z oznaczeniem <code>PING</code> będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.</dd>
<dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
<dd>Wskazuje który <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Referer">odsyłacz</a> należy wysłać podczas pobierania adresu URL:
<ul>
<li><code>'no-referrer'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany.</li>
<li><code>'no-referrer-when-downgrade'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany podczas nawigacji do miejsca pochodzenia bez HTTPS. Jest to zachowanie domyślne.</li>
<li><code>'origin'</code> oznacza, że odsyłającym będzie <a href="https://developer.mozilla.org/pl/docs/Glossary/Origin">pochodzenie</a> strony, nie włączając informacji po domenie.</li>
<li><code>'origin-when-cross-origin'</code> 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.</li>
<li><code>'strict-origin-when-cross-origin'</code></li>
<li><code>'unsafe-url'</code> 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.</li>
</ul>
</dd>
<dt>{{HTMLAttrDef("rel")}}</dt>
<dd>Określa relację obiektu docelowego z obiektem łącza. Wartość jest oddzieloną spacjami listą <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów łączy</a>.</dd>
<dt>{{HTMLAttrDef("target")}}</dt>
<dd>Określa, gdzie ma być wyświetlany link URL. Jest to nazwa lub słowo kluczowe <em>kontekstu przeglądania</em>, zakładki, okna lub <code><iframe></code>. Następujące słowa kluczowe mają specjalne znaczenie:
<ul>
<li><code>_self</code>: Wczytuje adres URL do tego samego kontekstu przeglądania, co bieżący. Jest to zachowanie domyślne.</li>
<li><code>_blank</code>: 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.</li>
<li><code>_parent</code>: Ładuje adres URL do nadrzędnego kontekstu przeglądania bieżącego. Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li>
<li><code>_top</code>: 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 <code>_self</code>.</li>
</ul>
<div class="note">
<p><strong>Uwaga:</strong> Podczas używania <code>target</code>, rozważ dodanie <code>rel="noreferrer"</code>, aby uniknąć wykorzystania API <code>window.opener</code>.</p>
</div>
<div class="note">
<p><strong>Uwaga:</strong> Linkowanie do innej strony przy użyciu <code>target="_blank"</code> 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 <code>rel="noopener"</code>.</p>
</div>
</dd>
<dt>{{HTMLAttrDef("type")}}</dt>
<dd>Określa typ nośnika w postaci {{Glossary("typu MIME")}} dla połączonego adresu URL. Jest to czysto doradcze, bez wbudowanych funkcji.</dd>
</dl>
<h3 id="Atrybuty_przestarzałe">Atrybuty przestarzałe</h3>
<dl>
<dt>{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
<dd>Ten atrybut definiuje <a href="https://developer.mozilla.org/pl/docs/Glossary/character_encoding">kodowanie znaków</a> dla powiązanego adresu URL. Wartość ta powinna być spacją i/lub przecinkiem z listy zbiorów znaków zdefiniowanych w <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. Domyślną wartością jest <code>ISO-8859-1</code>.
<div class="note">
<p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5 i <strong>nie powinien być używany przez twórców</strong>. Aby uzyskać jego efekt, użyj nagłówka HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> na linkowanym adresie URL.</p>
</div>
</dd>
<dt>{{HTMLAttrDef("coords")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt>
<dd>Do wykorzystania z atrybutem <code>shape</code> opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.</dd>
<dt>{{HTMLAttrDef("name")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt>
<dd>Ten atrybut był wymagany w przypadku kotwic określających możliwą lokalizację docelową na stronie. W HTML 4.01, <code>id</code> oraz <code>name</code> mogą być używane jednocześnie w elemencie <code><a></code>, o ile mają identyczne wartości.
<div class="note">
<p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5, zamiast niego użyj globalnego atrybutu {{HTMLAttrxRef("id")}}.</p>
</div>
</dd>
<dt>{{HTMLAttrDef("rev")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt>
<dd>Ten atrybut określa łącze odwrotne, odwrotną zależność atrybutu <strong>rel</strong>. Został wycofany ze względu na to, że był bardzo mylący.
<div class="note"><strong>Uwaga</strong>: Obecnie specyfikacja W3C HTML 5.2 stwierdza, że <code>rev</code> 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.</div>
</dd>
<dt>{{HTMLAttrDef("shape")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt>
<dd>Atrybut ten został użyty do zdefiniowania regionu dla hiperłączy w celu utworzenia mapy obrazu. Wartości to <code>circle</code>, <code>default</code>, <code>polygon</code>, oraz <code>rect</code>. Format atrybutu <strong>coords</strong> zależy od wartości kształtu. Dla <code>circle</code> wartością jest <code>x,y,r</code> gdzie <code>x</code> oraz <code>y</code> są współrzędnymi pikseli dla środka okręgu, a <code>r</code> jest wartością promienia w pikselach. Dla <code>rect</code> atrybut <strong>coords</strong> powinien wynosić <code>x,y,w,h</code>. Wartości <code>x,y</code> definiują lewy górny narożnik prostokąta, natomiast <code>w</code> oraz <code>h</code> odpowiednio szerokość i wysokość. Wartość <code>polygon</code> dla <strong>kształtu</strong> wymaga wartości <code>x1,y1,x2,y2,...</code> dla <strong>coords</strong>. Każda z par <code>x,y</code> określa punkt wielokąta, z kolejnymi punktami połączonymi liniami prostymi i ostatnim punktem połączonym z pierwszym. Wartość <code>default</code> dla kształtu wymaga użycia całego zamkniętego obszaru, zazwyczaj obrazu.
<div class="note"><strong>Uwaga:</strong> Użyj atrybutu {{HTMLAttrxRef("usemap", "img")}} dla elementu {{HTMLElement("img")}} i powiązanego elementu {{HTMLElement("map")}} aby zdefiniować hotspoty zamiast atrybutu <code>shape</code>.</div>
</dd>
</dl>
<h2 id="Przykłady">Przykłady</h2>
<h3 id="Odnośnik_do_lokalizacji_zewnętrznej">Odnośnik do lokalizacji zewnętrznej</h3>
<pre class="brush: html"><!-- kotwica tworząca odnośnik do zewnętrznego pliku -->
<a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>">
Odnośnik zewnętrzny
</a>
</pre>
<h4 id="Rezultat" name="Rezultat">Rezultat</h4>
<p><a class="external" href="http://www.mozilla.com/">Odnośnik zewnętrzny</a></p>
<h3 id="Odnośnik_do_innej_sekcji_na_tej_samej_stronie">Odnośnik do innej sekcji na tej samej stronie</h3>
<pre class="brush: html"><!-- odnośniki do elementów na tej stonie z id="attr-href" -->
<a href="#attr-href">
Opis łączy na tej samej stronie
</a></pre>
<h4 id="Rezultat_2">Rezultat</h4>
<p><a href="#attr-href">Opis łączy na tej samej stronie</a></p>
<h3 id="Tworzenie_klikalnego_obrazu">Tworzenie klikalnego obrazu</h3>
<p>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.</p>
<pre class="brush: html"><a href="https://developer.mozilla.org/pl/" target="_blank">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
alt="MDN logo" />
</a>
</pre>
<h4 id="Rezultat_3">Rezultat</h4>
<p><a href="https://developer.mozilla.org/pl/"><img alt="MDN logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p>
<h3 id="Tworzenie_odnośnika_email">Tworzenie odnośnika email</h3>
<p>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 <code>mailto:</code>. Oto prosty przykład:</p>
<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></pre>
<h4 id="Rezultat_4">Rezultat</h4>
<p><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></p>
<p>Aby uzyskać dodatkowe informacje dotyczące schematu adresu URL <code>mailto</code>, takie jak temat, treść, lub inne z góry określone treści, zobacz <a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links">Odnośniki email</a> lub {{RFC(6068)}}.</p>
<h3 id="Tworzenie_łącza_telefonicznego">Tworzenie łącza telefonicznego</h3>
<p>Oferowanie łącz telefonicznych jest pomocne dla użytkowników przeglądających dokumenty internetowe a ich urządzenie jest powiązane z telefonem.</p>
<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre>
<p>Dodatkowe informację na temat schematu URL <code>tel</code> można znaleźć w {{RFC(3966)}}.</p>
<h3 id="Użycie_atrybutu_download_do_zapisania_<canvas>_jako_PNG">Użycie atrybutu <code>download</code> do zapisania <code><canvas></code> jako PNG</h3>
<p>Jeśli chcesz pozwolić użytkownikom na pobranie elementu HTML {{HTMLElement("canvas")}} jako obrazu, możesz utworzyć odnośnik z atrybutem <code>download</code> i danymi płótna jako URL pliku:</p>
<pre class="brush: js">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);</pre>
<p>Można to zobaczyć w praktyce na stronie <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p>
<h2 id="Uwagi">Uwagi</h2>
<p>HTML 3.2 definiuje tylko atrybuty <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> oraz <code>title</code>.</p>
<h2 id="Kwestie_dotyczące_bezpieczeństwa_i_prywatności">Kwestie dotyczące bezpieczeństwa i prywatności</h2>
<p>Chociaż elementy <code><a></code> mają wiele niewinnych zastosowań, mogą mieć niepożądane konsekwencje dla bezpieczeństwa i prywatności użytkownika. Zobacz <a href="https://developer.mozilla.org/pl/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Nagłówek Referer: obawy dotyczące prywatności i bezpieczeństwa</a>, aby uzyskać więcej informacji i środków zaradczych.</p>
<h2 id="Kwestie_dostępności">Kwestie dostępności</h2>
<h3 id="wydarzenia_onclick">wydarzenia <code>onclick</code></h3>
<p>Znaczniki Kotwicy są często nadużywane przez zdarzenie <code>onclick</code> do tworzenia pseudo-przycisków przez ustawienie <strong>href</strong> na <code>"#"</code> lub <code>"javascript:void(0)"</code>, aby zapobiec odświeżaniu strony.</p>
<p>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.</p>
<h3 id="Linki_zewnętrzne_i_łącza_do_zasobów_nie-HTML">Linki zewnętrzne i łącza do zasobów nie-HTML</h3>
<p>Oba odnośniki, które otwierają się w nowej zakładce lub oknie poprzez deklarację <code>target="_blank"</code> oraz linki do zasobów plików, których wartość <code>href</code> wskazuje na źródło pliku powinny zawierać wskaźnik zachowania, które wystąpi po aktywacji łącza.</p>
<p>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.</p>
<h4 id="Odnośnik_otwierający_nową_kartę_lub_okno">Odnośnik otwierający nową kartę lub okno</h4>
<pre class="brush: html"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a>
</pre>
<h4 id="Odnośnik_do_zasobów_nie-HTML">Odnośnik do zasobów nie-HTML</h4>
<pre class="brush: html"><a target="_blank" href="2017-annual-report.ppt">Raport Roczny 2017 (PowerPoint)</a>
</pre>
<p>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")}}.</p>
<ul>
<li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
<li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Zrozumienie WCAG, Wytyczna 3.2 wyjaśnienie</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li>
</ul>
<h3 id="Odnośniki_pomijające">Odnośniki pomijające</h3>
<p>Link pomijający, znany również jako skipnav, jest elementem <code>a</code> 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.</p>
<p>Łą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.</p>
<ul>
<li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
<li><a href="https://a11yproject.com/posts/skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Zrozumienie WCAG, Wytyczna 2.4 wyjaśnienie</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h3 id="Odległość">Odległość</h3>
<p>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.</p>
<p>Odstępy mogą być tworzone przy użyciu właściwości CSS, takich jak {{CSSxRef("margin")}}.</p>
<ul>
<li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
</ul>
<h3 id="Klikanie_i_focus">Klikanie i focus</h3>
<p>To, czy kliknięcie na {{HTMLElement("a")}} powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.</p>
<table class="standard-table">
<caption>Czy kliknięcie na {{HTMLElement("a")}} spowoduje tryb skupienia?</caption>
<thead>
<tr>
<th scope="row">Przeglądarki stacjonarne</th>
<th scope="col">Windows 8.1</th>
<th scope="col">OS X 10.9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Firefox 30.0</td>
<td style="background-color: LawnGreen;">Tak</td>
<td style="background-color: LawnGreen;">Tak</td>
</tr>
<tr>
<td>Chrome ≥39<br>
(<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</td>
<td style="background-color: LawnGreen;">Tak</td>
<td style="background-color: LawnGreen;">Tak</td>
</tr>
<tr>
<td>Safari 7.0.5</td>
<td style="background-color: silver;">Nie dotyczy</td>
<td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td>
</tr>
<tr>
<td>Internet Explorer 11</td>
<td style="background-color: LawnGreen;">Tak</td>
<td style="background-color: silver;">Nie dotyczy</td>
</tr>
<tr>
<td>Presto (Opera 12)</td>
<td style="background-color: LawnGreen;">Tak</td>
<td style="background-color: LawnGreen;">Tak</td>
</tr>
</tbody>
</table>
<table class="standard-table">
<caption>Czy stuknięcie w {{HTMLElement("a")}} spowoduje tryb skupienia?</caption>
<thead>
<tr>
<th scope="row">Przeglądarki mobilne</th>
<th scope="col">iOS 7.1.2</th>
<th scope="col">Android 4.4.4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Safari Mobile</td>
<td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td>
<td style="background-color: silver;">Nie dotyczy</td>
</tr>
<tr>
<td>Chrome 35</td>
<td>???</td>
<td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td>
</tr>
</tbody>
</table>
<h2 id="Specyfikacje">Specyfikacje</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specyfikacja</th>
<th scope="col">Status</th>
<th scope="col">Komentarz</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
<td>{{Spec2("Referrer Policy")}}</td>
<td>Dodano atrybut <code>referrer</code>.</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td>
<td>{{Spec2("HTML4.01")}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2>
<p>{{Compat("html.elements.a")}}</p>
<h2 id="Zobacz_także">Zobacz także</h2>
<ul>
<li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
</ul>
|