aboutsummaryrefslogtreecommitdiff
path: root/files/fa/web/html/element/a/index.html
blob: dc10c3f5bec3c2ae54648459f1219b27bba46d46 (plain)
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
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
---
title: '<a>: The Anchor element'
slug: Web/HTML/Element/a
tags:
  - فارسی
translation_of: Web/HTML/Element/a
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">The <strong>HTML <code>&lt;a&gt;</code> element</strong> (or <em>anchor</em> element), with <a href="#href">its <code>href</code> attribute</a>, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.</span> Content within each <code>&lt;a&gt;</code> <strong>should</strong> indicate the link's destination.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>



<h2 id="Attributes">Attributes</h2>

<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt>
 <dd>Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:</dd>
 <dd>
 <ul>
  <li>Without a value, the browser will suggest a filename/extension, generated from various sources:
   <ul>
    <li>The {{HTTPHeader("Content-Disposition")}} HTTP header</li>
    <li>The final segment in the URL <a href="/en-US/docs/Web/API/URL/pathname">path</a></li>
    <li>The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>, or {{domxref("Blob.type")}} for a <a href="/en-US/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>)</li>
   </ul>
  </li>
  <li>Defining a value suggests it as the filename. <code>/</code> and <code>\</code> characters are converted to underscores (<code>_</code>). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.</li>
 </ul>

 <div class="note"><strong>Notes:</strong>

 <ul>
  <li><code>download</code> only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>, or the <code>blob:</code> and <code>data:</code> schemes.</li>
  <li>
   <p>Note: if the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behaviour may differ:</p>

   <ul>
    <li>
     <p>If the header specifies a <code>filename</code>, it takes priority over the attribute.</p>
    </li>
    <li>
     <p>If the header specifies a disposition of <code>inline</code> but no filename, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content.</p>
    </li>
   </ul>
  </li>
 </ul>
 </div>
 </dd>
 <dt id="href">{{HTMLAttrDef("href")}}</dt>
 <dd>
 <p>The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:</p>

 <ul>
  <li>Sections of a page with fragment URLs</li>
  <li>Pieces of media files with media fragments</li>
  <li>Telephone numbers with <code>tel:</code> URLs</li>
  <li>Email addresses with <code>mailto:</code> URLs</li>
  <li>While web browsers may not support other URL schemes, web sites can with <code><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code></li>
 </ul>
 </dd>
 <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt>
 <dd>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="/en-US/docs/Web/HTML/Global_attributes/lang">the global <code>lang</code> attribute</a>.</dd>
 <dt id="ping">{{HTMLAttrDef("ping")}}</dt>
 <dd>A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body <code>PING</code> to the URLs. Typically for tracking.</dd>
 <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt>
 <dd>How much of the <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when following the link. See <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> for possible values and their effects.</dd>
 <dt id="rel">{{HTMLAttrDef("rel")}}</dt>
 <dd>The relationship of the linked URL as space-separated <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd>
 <dt id="target">{{HTMLAttrDef("target")}}</dt>
 <dd>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <code>&lt;iframe&gt;</code>). The following keywords have special meanings for where to load the URL:
 <ul>
  <li><code>_self</code>: the current browsing context. (Default)</li>
  <li><code>_blank</code>: usually a new tab, but users can configure browsers to open a new window instead.</li>
  <li><code>_parent</code>: the parent browsing context of the current one. If no parent, behaves as <code>_self</code>.</li>
  <li><code>_top</code>: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li>
 </ul>

 <div class="note">
 <p><strong>Note:</strong> When using <code>target</code>, add <code>rel="noreferrer noopener"</code> to avoid exploitation of the <code>window.opener</code> API;</p>
 </div>

 <div class="note">
 <p><strong>Note:</strong> In newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> on <code>&lt;a&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code>rel="noopener"</code>.</p>
 </div>
 </dd>
 <dt id="type">{{HTMLAttrDef("type")}}</dt>
 <dd>Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.</dd>
</dl>

<h3 id="Obsolete_attributes">Obsolete attributes</h3>

<dl>
 <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Hinted at the {{Glossary("character encoding")}} of the linked URL.
 <div class="note">
 <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p>
 </div>
 </dd>
 <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd>
 <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code>&lt;a&gt;</code>, as long as they had identical values.
 <div class="note">
 <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p>
 </div>
 </dd>
 <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd>
 <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>The shape of the hyperlink’s region in an image map.
 <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div>
 </dd>
</dl>

<h2 id="Properties">Properties</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>) or <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, but not other <code>&lt;a&gt;</code> elements.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td>{{ARIARole("link")}} when <code>href</code> attribute is present, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>
    <p>When <code>href</code> attribute is present:</p>

    <ul>
     <li>{{ARIARole("button")}}</li>
     <li>{{ARIARole("checkbox")}}</li>
     <li>{{ARIARole("menuitem")}}</li>
     <li>{{ARIARole("menuitemcheckbox")}}</li>
     <li>{{ARIARole("menuitemradio")}}</li>
     <li>{{ARIARole("option")}}</li>
     <li>{{ARIARole("radio")}}</li>
     <li>{{ARIARole("switch")}}</li>
     <li>{{ARIARole("tab")}}</li>
     <li>{{ARIARole("treeitem")}}</li>
    </ul>

    <p>When <code>href</code> attribute is not present:</p>

    <ul>
     <li>any</li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{DOMxRef("HTMLAnchorElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples">Examples</h2>

<h3 id="Linking_to_an_absolute_URL">Linking to an absolute URL</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.com"&gt;
  Mozilla
&lt;/a&gt;</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p>

<h3 id="Linking_to_relative_URLs">Linking to relative URLs</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="//example.com"&gt;Scheme-relative URL&lt;/a&gt;
&lt;a href="/en-US/docs/Web/HTML"&gt;Origin-relative URL&lt;/a&gt;
&lt;a href="./p"&gt;Directory-relative URL&lt;/a&gt;
</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre>
</div>

<h4 id="Result_2">Result</h4>

<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p>

<h3 id="Linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3>

<pre class="brush: html notranslate">&lt;!-- &lt;a&gt; element links to the section below --&gt;
&lt;p&gt;&lt;a href="#Section_further_down"&gt;
  Jump to the heading below
&lt;/a&gt;&lt;/p&gt;

&lt;!-- Heading to link to --&gt;
&lt;h2 id="Section_further_down"&gt;Section further down&lt;/h2&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">as defined in the HTML specification</a>.</p>
</div>

<h3 id="Linking_to_an_email_address">Linking to an email address</h3>

<p>To create links that open in the user's email program to let them send a new message, use the <code>mailto:</code> scheme:</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;</pre>

<p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p>

<h3 id="Linking_to_telephone_numbers">Linking to telephone numbers</h3>

<pre class="brush: html notranslate">&lt;a href="tel:+49.157.0156"&gt;+49 157 0156&lt;/a&gt;
&lt;a href="tel:+1(555)5309"&gt;(555) 5309&lt;/a&gt;</pre>

<p><code>tel:</code> link behavior varies with device capabilities:</p>

<ul>
 <li>Cellular devices autodial the number.</li>
 <li>Most operating systems have programs that can make calls, like Skype or FaceTime.</li>
 <li>Websites can make phone calls with {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, such as <code>web.skype.com</code>.</li>
 <li>Other behaviors include saving the number to contacts, or sending the number to another device.</li>
</ul>

<p>See {{RFC(3966)}} for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p>

<h3 id="Using_the_download_attribute_to_save_a_&lt;canvas>_as_a_PNG">Using the download attribute to save a &lt;canvas&gt; as a PNG</h3>

<p>To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a <code>download</code> attribute and the canvas data as a <code>data:</code> URL:</p>

<h4 id="Example_painting_app_with_save_link">Example painting app with save link</h4>

<h5 id="HTML_3">HTML</h5>

<pre class="brush: html notranslate">&lt;p&gt;Paint by holding down the mouse button and moving it.
  &lt;a href="" download="my_painting.png"&gt;Download my painting&lt;/a&gt;
&lt;/p&gt;

&lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;
</pre>

<h5 id="CSS_2">CSS</h5>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}</pre>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'),
    c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', event =&gt;
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () =&gt; isDrawing = true);
canvas.addEventListener('mouseup', () =&gt; isDrawing = false);

document.querySelector('a').addEventListener('click', event =&gt;
  event.target.href = canvas.toDataURL()
);
</pre>

<h5 id="Result_3">Result</h5>

<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p>

<h2 id="Security_and_privacy">Security and privacy</h2>

<p><code>&lt;a&gt;</code> elements can have consequences for users’ security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p>

<p>Using <code>target="_blank"</code> without <code>rel="noreferrer"</code> and <code>rel="noopener"</code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>), although note that, in newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>.</p>

<h2 id="Accessibility">Accessibility</h2>

<h3 id="Strong_link_text">Strong link text</h3>

<p><strong>The content inside a link should indicate where the link goes</strong>, even out of context.</p>

<h4 id="Inaccessible_weak_link_text">Inaccessible, weak link text</h4>

<p>A sadly common mistake is to only link the words “click here” or “here”:</p>

<pre class="brush: html example-bad notranslate">&lt;p&gt;
  Learn more about our products &lt;a href="/products"&gt;here&lt;/a&gt;.
&lt;/p&gt;
</pre>

<h4 id="Strong_link_text_2">Strong link text</h4>

<p>Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!</p>

<pre class="brush: html example-good notranslate">&lt;p&gt;
  Learn more &lt;a href="/products"&gt;about our products&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.</p>

<h3 id="onclick_events">onclick events</h3>

<p>Anchor elements are often abused as fake buttons by setting their <code>href</code> to <code>#</code> or <code>javascript:void(0)</code> to prevent the page from refreshing, then listening for their <code>click</code> events .</p>

<p>These bogus <code>href</code> values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.</p>

<p>Use a {{HTMLElement("button")}} instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p>

<h3 id="External_links_and_linking_to_non-HTML_resources">External links and linking to non-HTML resources</h3>

<p>Links that open in a new tab/window via <code>target="_blank"</code>, or links that point to a download file should indicate what will happen when the link is followed.</p>

<p>People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.</p>

<h4 id="Link_that_opens_a_new_tabwindow">Link that opens a new tab/window</h4>

<pre class="brush: html notranslate">&lt;a target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia (opens in new tab)
&lt;/a&gt;
</pre>

<h4 id="Link_to_a_non-HTML_resource">Link to a non-HTML resource</h4>

<pre class="brush: html notranslate">&lt;a href="2017-annual-report.ppt"&gt;
  2017 Annual Report (PowerPoint)
&lt;/a&gt;
</pre>

<p>If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:</p>

<pre class="brush: html notranslate">&lt;a  target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia
  &lt;img alt="(opens in new tab)" src="newtab.svg"&gt;
&lt;/a&gt;

&lt;a href="2017-annual-report.ppt"&gt;
  2017 Annual Report
  &lt;img alt="(PowerPoint file)" src="ppt-icon.svg"&gt;
&lt;/a&gt;</pre>

<ul>
 <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</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</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li>
</ul>

<h3 id="Skip_links">Skip links</h3>

<p>A <strong>skip link</strong> is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p>

<pre class="notranslate">&lt;body&gt;
  &lt;a href="#content"&gt;Skip to main content&lt;/a&gt;

  &lt;header&gt;&lt;/header&gt;

  &lt;main id="content"&gt; &lt;!-- The skip link jumps to here --&gt;
</pre>

<pre class="brush: css notranslate">.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}</pre>

<p>Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.</p>

<p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.</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</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li>
</ul>

<h3 id="Size_and_proximity">Size and proximity</h3>

<h4 id="Size">Size</h4>

<p>Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p>

<p>Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.</p>

<ul>
 <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li>
 <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li>
 <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li>
</ul>

<h4 id="Proximity">Proximity</h4>

<p>Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.</p>

<p>Spacing may be created using CSS properties like {{CSSxRef("margin")}}.</p>

<ul>
 <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
   <td>{{Spec2("Referrer Policy")}}</td>
   <td>Added the <code>referrerpolicy</code> attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML4.01")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.a")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("link")}} is similar to <code>&lt;a&gt;</code>, but for metadata hyperlinks that are invisible to users.</li>
 <li>{{CSSxRef(":link")}} is a CSS pseudo-class that will match <code>&lt;a&gt;</code> elements with valid <code>href</code> attributes.</li>
</ul>