<a>

Definition

The <a> tag is used to create a hyperlink to another web page or a different location on the same page. It is commonly known as the anchor tag.

Examples

<a href="https://www.example.com">This is a link to another website</a>

This code will create a hyperlink that says "This is a link to another website" and, when clicked, will take the user to the specified URL (in this case, https://www.example.com).

An example of creating a mailto anchor link in HTML would be:

<a href="mailto:[email protected]">Contact Us</a>

This creates a link with the anchor text "Contact Us" that, when clicked, will open the user's email client and allow them to send an email to the specified address, in this case "[email protected]".

Attributes

AttributeDescriptionDeprecated?
hrefSpecifies the URL of the linked pageNo
titleProvides additional information about the linkNo
relIndicates the relationship between the current page and the linked pageNo
targetSpecifies whether the linked page should open in a new tab or windowNo
idUsed to create a unique identifier for the elementNo
classUsed to apply styles to the elementNo
styleUsed to specify inline styles for the elementNo
accesskeyUsed to define a keyboard shortcut for the elementNo
tabindexUsed to specify the order in which elements receive focusNo
onclickUsed to specify a JavaScript function to be executed when the element is clickedNo
aria-labelUsed to provide additional information for screen readersNo
aria-hiddenUsed to hide the element from screen readersNo
downloadUsed to specify whether the linked file should be downloaded when clickedNo
hreflangUsed to specify the language of the linked pageNo
typeUsed to specify the MIME type of the linked contentNo
mediaUsed to specify the media query for the linked contentNo
pingUsed to specify a list of URLs to be notified when the link is clickedNo
shapeUsed to specify the shape of the area around the linkNo
coordsUsed to specify the coordinates of the shape around the linkNo
nameUsed to create a named anchor for the elementYes
revUsed to indicate the reverse relationship between the current page and the linked pageYes
charsetUsed to specify the character encoding of the linked pageYes
datetimeUsed to specify the date and time of the linked contentYes
typeUsed to specify the MIME type of the linked contentYes
mediaUsed to specify the media query for the linked contentYes
pingUsed to specify a list of URLs to be notified when the link is clickedYes
shapeUsed to specify the shape of the area around the linkYes
coordsUsed to specify the coordinates of the shape around the linkYes
nameUsed to create a named anchor for the elementYes
revUsed to indicate the reverse relationship between the current page and the linked pageYes
charsetUsed to specify the character encoding of the linked pageYes
datetimeUsed to specify the date and time of the linked contentYes

Best Practices

  • Use descriptive and clear anchor text to help users understand the destination of the link.
  • Avoid using generic anchor text such as "click here" or "more" as it does not provide any context for the link destination.
  • Use the title attribute to provide additional information about the link destination.
  • Use the rel attribute to indicate the relationship between the current page and the linked page (e.g. "nofollow" for sponsored links).
  • Use the target attribute to specify whether the linked page should open in a new tab or window.
  • Avoid using too many links on a page as it can be overwhelming for users and impact the page's load time.
  • Use appropriate styling for the anchor element, such as underlining for links that have not been visited and a different color for links that have been visited.
  • Use the correct URL for the href attribute to ensure the link points to the correct destination.
  • Use the mailto: protocol for email links to allow users to easily open their email client and send a message.
  • Use proper accessibility attributes such as aria-label to provide additional information for screen readers.

Accessibility Considerations

When using the anchor element, it is important to consider accessibility for users with disabilities. This can be done by using descriptive and clear anchor text to help users understand the destination of the link, and using the title attribute to provide additional information about the link destination. It is also important to use the rel attribute to indicate the relationship between the current page and the linked page, and the target attribute to specify whether the linked page should open in a new tab or window.

Additionally, using the mailto: protocol for email links allows users to easily open their email client and send a message. Properly using accessibility attributes such as aria-label can also provide additional information for screen readers. Avoiding using too many links on a page can help prevent overwhelming users and impacting the page's load time.

Overall, ensuring that the anchor element is properly used and accessible can improve the user experience for all users, including those with disabilities.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes