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
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
|
---
title: <a>
slug: Web/HTML/Element/a
translation_of: Web/HTML/Element/a
---
<p>The <em>HTML <code>Anchor</code> Element</em> (<strong><code><a></code></strong>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.</p>
<pre class="brush: html"><a href="https://developer.mozilla.org">MDN</a>
</pre>
<ul class="htmlelt">
<li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut de flux</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, contingut interactiu, contingut palpable.</li>
<li><dfn>Contingut permès</dfn> <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, conté o <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contingut de flux</a> o <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content"> phrasing content </a>.</li>
<li><dfn>Omissió de l'etiqueta</dfn> {{no_tag_omission}}</li>
<li><dfn>Elements pares permesos</dfn> Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, o qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contingut de flux</a>.</li>
<li><dfn>Interfície DOM</dfn> {{domxref("HTMLAnchorElement")}}</li>
</ul>
<h2 id="Atributs">Atributs</h2>
<p><span style="line-height: 21px;">Aquest element només inclou els </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>
<dl>
<dt><strong>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</strong></dt>
<dd>This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly.
<div class="note">
<p><strong>Note: </strong></p>
<ul>
<li>Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app.</li>
<li>If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.</li>
<li>If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.</li>
<li>This attribute is only honored for links to resources with the same-origin.</li>
</ul>
</div>
</dd>
<dt><strong>{{htmlattrdef("href")}}</strong></dt>
<dd>This was the single required attribute for anchors defining a hypertext source link, but the attribute may now be omitted (as of HTML5) in order to create a placeholder link. A <a>placeholder link</a> presents itself like a traditional hyperlink but when activated does not result in redirection to a new page or a sub-section of the same document. The href is still required when specifying a link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents.
<div class="note">
<p><strong>Note: </strong>You can use the special fragment "top" to create a link back to the top of the page; for example <a>href="#top">Return to top</a>. This behavior is specified by HTML5.</p>
</div>
</dd>
<dt><strong>{{htmlattrdef("hreflang")}}</strong></dt>
<dd>This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.</dd>
<dt><strong>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</strong></dt>
<dd>The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.</dd>
<dt><strong>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</strong></dt>
<dd>A string indicating which referrer to use when fetching the resource:
<ul>
<li>'no-referrer' meaning that the Referer: header will not be sent.</li>
<li>'no-referrer-when-downgrade' meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
<li>'origin' meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li>
<li>'origin-when-cross-origin' meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li>
<li>'unsafe-url' meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
</ul>
</dd>
<dt><strong>{{htmlattrdef("rel")}}</strong></dt>
<dd>For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.</dd>
<dt><strong>{{htmlattrdef("target")}}</strong></dt>
<dd>This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
<ul>
<li>_self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li>
<li>_blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li>
<li>_parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.</li>
<li>_top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.</li>
</ul>
Use this attribute only if the href attribute is present.
<div class="note">
<p><strong>Note: </strong>When using target you should consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.</p>
</div>
</dd>
<dt><strong>{{htmlattrdef("type")}}</strong></dt>
<dd>This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.</dd>
</dl>
<h3 id="Obsolete">Obsolete</h3>
<dl>
<dt><strong>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</strong></dt>
<dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1.
<div class="note">
<p><strong>Usage note: </strong>This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.</p>
</div>
</dd>
<dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
<dd>For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.
</dd>
<dt><strong>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</strong></dt>
<dd>This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values.
<div class="note">
<p><strong>Usage note: </strong> This attribute is obsolete in HTML5, use global attribute id instead.</p>
</div>
</a></dd><a>
<dt><strong>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</strong></dt>
<dd>This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.</dd>
<dt><strong>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</strong></dt>
<dd>This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used.
<div class="note">
<p><strong>Note: </strong>It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.</p>
</div>
</dd>
</a></dl><a>
<h3 id="Non_standard">Non standard</h3>
</a><dl><a>
<dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt>
</a><dd><a>This attribute specifies the column name from that data source object that supplies the bound data.
</a><div class="note"><a>
</a><p><a><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as </a><a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically</p>
</div>
<table class="fullwidth-table">
<tbody>
<tr>
<td rowspan="2">Support</td>
<td>Gecko</td>
<td>Presto</td>
<td>WebKit</td>
<td>Trident</td>
</tr>
<tr>
<td>Not implemented</td>
<td>Not implemented</td>
<td>Not implemented</td>
<td>IE4, IE5, IE6, IE7 (Removed in IE8)</td>
</tr>
<tr>
<td>Normative document</td>
<td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td>
</tr>
</tbody>
</table>
</dd>
<dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt>
<dd>This attribute indicates the ID of the data source object that supplies the data that is bound to this element.
<div class="note">
<p><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as <a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically.</p>
</div>
<table class="fullwidth-table">
<tbody>
<tr>
<td rowspan="2">Support</td>
<td>Gecko</td>
<td>Presto</td>
<td>WebKit</td>
<td>Trident</td>
</tr>
<tr>
<td>Not implemented</td>
<td>Not implemented</td>
<td>Not implemented</td>
<td>IE4, IE5, IE6, IE7 (Removed in IE8)</td>
</tr>
<tr>
<td>Normative document</td>
<td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td>
</tr>
</tbody>
</table>
</dd>
<dt>{{htmlattrdef("hreflang")}}</dt>
<dd>This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> for HTML5 and by <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.</dd>
<dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
<dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd>
<dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
<dd>This attribute is required in an anchor defining a target location within a page. A value for <strong>name</strong> is similar to a value for the <strong>id</strong> core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, <strong>id</strong> and <strong>name</strong> both can be used with the <a> element as long as they have identical values.
<div class="note">
<p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use <a href="/en-US/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">global attribute <strong>id</strong></a> instead.</p>
</div>
</dd>
<dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
<dd>This attribute specifies a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It is useful for indicating where an object came from, such as the author of a document.</dd>
</dl>
<dl>
<dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
<dd>This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value <code>default</code> for shape requires that the entire enclosed area, typically an image, be used.
<div class="note"><strong>Note: </strong>It is advisable to use the <strong>usemap</strong> attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <strong>shape</strong> attribute.</div>
</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
<dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt>
<dd>This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Linking_to_an_external_location">Linking to an external location</h3>
<pre class="brush: html"><!-- anchor linking to external file -->
<a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>">
External Link
</a>
</pre>
<h4 id="Result" name="Result">Result</h4>
<p><a class="external" href="http://www.mozilla.com/">External Link</a></p>
<h3 id="Linking_to_another_section_on_the_same_page">Linking to another section on the same page</h3>
<pre class="brush: html"><!-- anchor link to section on this page named id="attr-href" -->
<a href="#attr-href">
Description of Same-Page Links
</a>
</pre>
<h4 id="Result" name="Result">Result</h4>
<p><a class="external" href="https://developer.mozilla.org/ca/docs/Web/HTML/Element/a$edit#attr-href">Description of Same Page Links</a></p>
<h3 id="Creating_a_clickable_image">Creating a clickable image</h3>
<p>This small example use an image to link to the MDN home page. The home page will open in a new browsing context, that is a new page or a new tab.</p>
<pre class="brush: html"><a href="https://developer.mozilla.org/en-US/" target="_blank">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
</a>
</pre>
<h3 id="Result" name="Result">Result</h3>
<figure>
<p>{{EmbedLiveSample("Example.3A_Creating_a_clickable_image", "320", "64")}}</p>
</figure>
<h3 id="Creating_an_email_link">Creating an email link</h3>
<p>It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:</p>
<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre>
<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
<p>For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p>
<h3 id="Creating_a_phone_link">Creating a phone link</h3>
<p>With phones viewing web documents and laptops being connected to phones offering clickable phone links becomes increasingly helpful.</p>
<pre class="brush: html"><a href="tel:+491570156">+49 157 0156;/a>
</pre>
<p>For additional details about the tel URL scheme, see {{RFC(2806)}} and {{RFC(2396)}}.</p>
<h3 id="Using_the_download_attribute_to_save_a_canvas_as_a_PNG">Using the download attribute to save a canvas as a PNG</h3>
<p>If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:</p>
<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">'download image'</span><span style="color: #339933;">;</span>
link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">"mypainting.png"</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre>
<p>You can see this in action <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p>
<h2 id="Specifications" name="Specifications">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<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="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>href="#top"</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("10.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>download</td>
<td>{{CompatChrome("14")}}</td>
<td>{{CompatGeckoDesktop("20.0")}}</td>
<td>Edge 13 [5]</td>
<td>{{CompatOpera("15")}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>ping</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}} [2]</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>referrerpolicy</code></td>
<td>{{CompatChrome(46.0)}} [3]</td>
<td>{{CompatGeckoDesktop("45")}} [4]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>href="#top"</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("10.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>download</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("20.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>ping</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}} [2]</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>referrerpolicy</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(46.0)}} [3]</td>
<td>{{CompatGeckoMobile("45.0")}} [4]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(46.0)}} [3]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without href attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).</p>
<p>[2] <a href="http://kb.mozillazine.org/Browser.send_pings">Disabled by default</a></p>
<p>[3] Implemented behind a flag.</p>
<p>[4] <a href="https://developer.mozilla.org/ca/docs/Web/HTML/Element/14.14357">Attempting to download data URIs causes Edge to crash</a> until v14.14357.</p>
<h2 id="Clicking_and_focus">Clicking and focus</h2>
<p>Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.</p>
<table>
<caption>Does clicking on an {{HTMLElement("a")}} give it the focus?</caption>
<tbody>
<tr>
<td>Navegadors d'escriptori</td>
<th>Windows 8.1</th>
<th>OS X 10.9</th>
</tr>
<tr>
<th>Firefox 30.0</th>
<td style="background-color: LawnGreen;">Sí</td>
<td style="background-color: LawnGreen;">Sí</td>
</tr>
<tr>
<th>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>)</th>
<td style="background-color: LawnGreen;">Sí</td>
<td style="background-color: LawnGreen;">Sí</td>
</tr>
<tr>
<th>Safari 7.0.5</th>
<td style="background-color: silver;">N/A</td>
<td style="background-color: yellow;">Només quan <code>tabindex</code><em> </em>està definit</td>
</tr>
<tr>
<th>Internet Explorer 11</th>
<td style="background-color: LawnGreen;">Sí</td>
<td style="background-color: silver;">N/A</td>
</tr>
<tr>
<th>Presto (Opera 12)</th>
<td style="background-color: LawnGreen;">Sí</td>
<td style="background-color: LawnGreen;">Sí</td>
</tr>
</tbody>
</table>
<table>
<caption>Does tapping on an {{HTMLElement("a")}} give it the focus?</caption>
<tbody>
<tr>
<td>Mobile Browsers</td>
<th>iOS 7.1.2</th>
<th>Android 4.4.4</th>
</tr>
<tr>
<th>Safari Mobile</th>
<td style="background-color: yellow;">Només quan <code>tabindex </code>està definit</td>
<td style="background-color: silver;">N/A</td>
</tr>
<tr>
<th>Chrome 35</th>
<td>???</td>
<td style="background-color: yellow;">Només quan <code>tabindex</code> està definit</td>
</tr>
</tbody>
</table>
<h2 id="Notes">Notes</h2>
<p>The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.</p>
<p>HTML 3.2 defineix només <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, i <strong>title</strong>.</p>
<p>L'atribut <strong>target</strong> no està definit en navegadors que no suporten<em> frames</em>, com ara la generació de navegadors Netscape 1. Furthermore, target is not allowed under strict variants of <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> but is limited to frameset or transitional forms.</p>
<h3 id="Recomanacions_per_JavaScript">Recomanacions per JavaScript</h3>
<p>It is often the case that an anchor tag is used with the <code>onclick</code> event. In order to prevent the page from refreshing, <strong>href</strong> is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.</p>
<h2 id="Veure">Veure</h2>
<ul>
<li>Altres elements pertanyents a <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</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>
<div>{{HTMLRef}}</div>
|