: The Anchor Element - HTML: HyperText Markup Language | MDN

Trang chủ » Html A Element » : The Anchor Element - HTML: HyperText Markup Language | MDN

Có thể bạn quan tâm
  1. References
  2. HTML
  3. Elements
  4. <a>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • 한국어
    • Português (do Brasil)
    • Русский
    • 中文 (简体)
    • 正體中文 (繁體)
  • Try it
  • Attributes
  • Accessibility
  • Examples
  • Security and privacy
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also
  1. HTML
  2. Tutorials
  3. HTML basics
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. References
  8. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. <footer>
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. <header>
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. <meter>
    70. <nav>
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. <output>
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. <source>
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. <summary>
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  9. Global attributes
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  10. Attributes
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  11. <input> types
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  12. Guides
    1. Content categories
    2. Block-level elements
    3. Inline elements
    4. Quirks Mode and Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. Allowing cross-origin use of images and canvas
  • Try it
  • Attributes
  • Accessibility
  • Examples
  • Security and privacy
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

Try it

Attributes

This element's attributes include the global attributes.

attributionsrc Experimental

Specifies that you want the browser to send an Attribution-Reporting-Eligible header. On the server-side this is used to trigger sending an Attribution-Reporting-Register-Source header in the response, to register a navigation-based attribution source.

The browser stores the source data associated with the navigation-based attribution source (as provided in the Attribution-Reporting-Register-Source response header) when the user clicks the link. See the Attribution Reporting API for more details.

There are two versions of this attribute that you can set:

  • Boolean, i.e. just the attributionsrc name. This specifies that you want the Attribution-Reporting-Eligible header sent to the same server as the href attribute points to. This is fine when you are handling the attribution source registration on the same server.

  • Value containing one or more URLs, for example:

    htmlattributionsrc="https://a.example/register-source https://b.example/register-source"

    This is useful in cases where the requested resource is not on a server you control, or you just want to handle registering the attribution source on a different server. In this case, you can specify one or more URLs as the value of attributionsrc. When the resource request occurs, the Attribution-Reporting-Eligible header will be sent to the URL(s) specified in attributionsrc in addition to the resource origin. These URLs can then respond with the Attribution-Reporting-Register-Source to complete registration.

    Note: Specifying multiple URLs means that multiple attribution sources can be registered on the same feature. You might for example have different campaigns that you are trying to measure the success of, which involve generating different reports on different data.

<a> elements cannot be used as attribution triggers, only sources.

download

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

  • Without a value, the browser will suggest a filename/extension, generated from various sources:

    • The Content-Disposition HTTP header
    • The final segment in the URL path
    • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)

  • filename: defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

Note:

  • download only works for same-origin URLs, or the blob: and data: schemes.

  • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.

  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:

    • If the header specifies a filename, it takes priority over a filename specified in the download attribute.
    • If the header specifies a disposition of inline, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

  • Telephone numbers with tel: URLs
  • Email addresses with mailto: URLs
  • SMS text messages with sms: URLs
  • Executable code with javascript: URLs
  • While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

Moreover other URL features can locate specific parts of the resource, including:

  • Sections of a page with document fragments
  • Specific text portions with text fragments
  • Pieces of media files with media fragments
hreflang

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

ping

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

referrerpolicy

How much of the referrer to send when following the link.

  • no-referrer: The Referer header will not be sent.
  • no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
rel

The relationship of the linked URL as space-separated link types.

target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:

  • _self: The current browsing context. (Default)

  • _blank: Usually a new tab, but users can configure browsers to open a new window instead.

  • _parent: The parent browsing context of the current one. If no parent, behaves as _self.

  • _top: The topmost browsing context. To be specific, this means the "highest" context that's an ancestor of the current one. If no ancestors, behaves as _self.

  • _unfencedTop: Allows embedded fenced frames to navigate the top-level frame (i.e. traversing beyond the root of the fenced frame, unlike other reserved destinations). Note that the navigation will still succeed if this is used outside of a fenced frame context, but it will not act like a reserved keyword.

Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.

type

Hints at the linked URL's format with a MIME type. No built-in functionality.

Deprecated attributes

charset Deprecated

Hinted at the character encoding of the linked URL.

Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

coords Deprecated

Used with the shape attribute. A comma-separated list of coordinates.

name Deprecated

Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values.

Note: Use the global attribute id instead.

rev Deprecated

Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

shape Deprecated

The shape of the hyperlink's region in an image map.

Note: Use the <area> element for image maps instead.

Accessibility

Strong link text

The content inside a link should indicate where the link goes, even out of context.

Inaccessible, weak link text

A sadly common mistake is to only link the words "click here" or "here":

html<p>Learn more about our products <a href="/products">here</a>.</p>
Result

Strong link text

Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

html<p>Learn more <a href="/products">about our products</a>.</p>
Result

Assistive software has 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.

onclick events

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

These bogus href 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.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

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

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.

html<a target="_blank" href="https://www.wikipedia.org"> Wikipedia (opens in new tab) </a>
Result

If an icon is used to signify link behavior, make sure it has an alt attribute to describe its purpose. In case the icon is missing, the alt attribute's content will still convey the link's behavior.

html<p> <a href="https://www.wikipedia.org/" target="_blank"> Wikipedia <img src="new-tab.svg" width="14" alt="(Opens in new tab)" /> </a> <br /> <a href="2017-annual-report.ppt"> 2017 annual report <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" /> </a> </p> <p> <a href="https://www.wikipedia.org/" target="_blank"> Wikipedia <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" /> </a> <br /> <a href="2017-annual-report.ppt"> 2017 annual report <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" /> </a> </p>
Result
  • WebAIM: Links and Hypertext - Hypertext Links
  • MDN / Understanding WCAG, Guideline 3.2
  • G200: Opening new windows and tabs from a link only when necessary
  • G201: Giving users advanced warning when opening a new window

A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

html<body> <a href="#content" class="skip-link">Skip to main content</a> <header>…</header> <!-- The skip link jumps to here --> <main id="content"></main> </body> css.skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; }

Result

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

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.

  • WebAIM: "Skip Navigation" Links
  • How-to: Use Skip Navigation links
  • MDN / Understanding WCAG, Guideline 2.4 explanations
  • Understanding Success Criterion 2.4.1

Size and proximity

Size

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 CSS pixels is recommended.

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.

  • Understanding Success Criterion 2.5.5: Target Size
  • Target Size and 2.5.5
  • Quick test: Large touch targets

Proximity

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.

Spacing may be created using CSS properties like margin.

  • Hand tremors and the giant-button-problem

Examples

Linking to an absolute URL

HTML

html<a href="https://www.mozilla.com">Mozilla</a>

Result

Linking to relative URLs

HTML

html<a href="//example.com">Scheme-relative URL</a> <a href="/en-US/docs/Web/HTML">Origin-relative URL</a> <a href="p">Directory-relative URL</a> <a href="./p">Directory-relative URL</a> <a href="../p">Parent-directory-relative URL</a> a { display: block; margin-bottom: 0.5em; }

Result

Linking to an element on the same page

html<!-- <a> element links to the section below --> <p><a href="#Section_further_down">Jump to the heading below</a></p> <!-- Heading to link to --> <h2 id="Section_further_down">Section further down</h2>

Result

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

Linking to an email address

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

html<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Result

For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

Linking to telephone numbers

html<a href="tel:+49.157.0156">+49 157 0156</a> <a href="tel:+1(800)555-0123">(800) 555-0123</a>

Result

tel: link behavior varies with device capabilities:

  • Cellular devices autodial the number.
  • Most operating systems have programs that can make calls, like Skype or FaceTime.
  • Websites can make phone calls with registerProtocolHandler, such as web.skype.com.
  • Other behaviors include saving the number to contacts, or sending the number to another device.

See RFC 3966 for syntax, additional features, and other details about the tel: URL scheme.

Using the download attribute to save a <canvas> as a PNG

To save a <canvas> element's contents as an image, you can create a link where the href is the canvas data as a data: URL created with JavaScript and the download attribute provides the file name for the downloaded PNG file:

HTML
html<p> Paint by holding down the mouse button and moving it. <a href="" download="my_painting.png">Download my painting</a> </p> <canvas width="300" height="300"></canvas>
CSS
csshtml { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; }
JavaScript
jsconst canvas = document.querySelector("canvas"); const c = canvas.getContext("2d"); c.fillStyle = "hotpink"; let isDrawing; 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) => draw(event.offsetX, event.offsetY), ); canvas.addEventListener("mousedown", () => (isDrawing = true)); canvas.addEventListener("mouseup", () => (isDrawing = false)); document .querySelector("a") .addEventListener( "click", (event) => (event.target.href = canvas.toDataURL()), );
Result

Security and privacy

<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks, although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

Technical summary

Content categories Flow content, phrasing content, interactive content, palpable content.
Permitted content Transparent, except that no descendant may be interactive content or an <a> element, and no descendant may have a specified tabindex attribute.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content, but not other <a> elements.
Implicit ARIA role link when href attribute is present, otherwise generic
Permitted ARIA roles

When href attribute is present:

  • button
  • checkbox
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • radio
  • switch
  • tab
  • treeitem

When href attribute is not present:

  • any
DOM interface HTMLAnchorElement

Specifications

Specification
HTML Standard # the-a-element

Browser compatibility

BCD tables only load in the browser

See also

  • <link> is similar to <a>, but for metadata hyperlinks that are invisible to users.
  • :link is a CSS pseudo-class that will match <a> elements with URL in href attribute that was not yet visited by the user.
  • :visited is a CSS pseudo-class that will match <a> elements with URL in href attribute that was visited by the user in the past.
  • :any-link is a CSS pseudo-class that will match <a> elements with href attribute.
  • Text fragments are user-agent instructions added to URLs that allow content authors to link to specific text on a page, without IDs being required.

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Nov 26, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html A Element