<a>: The Anchor element - HTML

Strong link text Luckily, this is an easy fix, and it's actually shorter than the inaccessible version! htmlLearn more about our products. 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

`External links and linking to non-HTML resources`

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. Link that opens a new tab/window html Wikipedia (opens in new tab) Result Link to a non-HTML resource 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 Wikipedia 2017 annual report Wikipedia 2017 annual report 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

`Skip links`

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

html Skip to main content … 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 Mozilla Result

`Linking to relative URLs`

`HTML`

html Scheme-relative URL Origin-relative URL Directory-relative URL Directory-relative URL Parent-directory-relative URL a { display: block; margin-bottom: 0.5em; } Result

`Linking to an element on the same page`

html


Jump to the heading below


Section further down

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 Send email to nowhere Result For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

`Linking to telephone numbers`

html

+49 157 0156
(800) 555-0123

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`

To save a 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:

Example painting app with save link HTML html Paint by holding down the mouse button and moving it. Download my painting CSS css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } JavaScript js const 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`

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 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 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 # the-a-element

`Browser compatibility`

See also is similar to , but for metadata hyperlinks that are invisible to users. :link is a CSS pseudo-class that will match elements with URL in href attribute that was not yet visited by the user. :visited is a CSS pseudo-class that will match 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 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? Learn how to contribute.This page was last modified on Jun 7, 2025 by MDN contributors. View this page on GitHub • Report a problem with this content