<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
| Attribute | Description | Deprecated? |
|---|---|---|
href | Specifies the URL of the linked page | No |
title | Provides additional information about the link | No |
rel | Indicates the relationship between the current page and the linked page | No |
target | Specifies whether the linked page should open in a new tab or window | No |
id | Used to create a unique identifier for the element | No |
class | Used to apply styles to the element | No |
style | Used to specify inline styles for the element | No |
accesskey | Used to define a keyboard shortcut for the element | No |
tabindex | Used to specify the order in which elements receive focus | No |
onclick | Used to specify a JavaScript function to be executed when the element is clicked | No |
aria-label | Used to provide additional information for screen readers | No |
aria-hidden | Used to hide the element from screen readers | No |
download | Used to specify whether the linked file should be downloaded when clicked | No |
hreflang | Used to specify the language of the linked page | No |
type | Used to specify the MIME type of the linked content | No |
media | Used to specify the media query for the linked content | No |
ping | Used to specify a list of URLs to be notified when the link is clicked | No |
shape | Used to specify the shape of the area around the link | No |
coords | Used to specify the coordinates of the shape around the link | No |
name | Used to create a named anchor for the element | Yes |
rev | Used to indicate the reverse relationship between the current page and the linked page | Yes |
charset | Used to specify the character encoding of the linked page | Yes |
datetime | Used to specify the date and time of the linked content | Yes |
type | Used to specify the MIME type of the linked content | Yes |
media | Used to specify the media query for the linked content | Yes |
ping | Used to specify a list of URLs to be notified when the link is clicked | Yes |
shape | Used to specify the shape of the area around the link | Yes |
coords | Used to specify the coordinates of the shape around the link | Yes |
name | Used to create a named anchor for the element | Yes |
rev | Used to indicate the reverse relationship between the current page and the linked page | Yes |
charset | Used to specify the character encoding of the linked page | Yes |
datetime | Used to specify the date and time of the linked content | Yes |
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
titleattribute to provide additional information about the link destination. - Use the
relattribute to indicate the relationship between the current page and the linked page (e.g. "nofollow" for sponsored links). - Use the
targetattribute 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
hrefattribute 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-labelto 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |