HTML5 <a> Tag

The HTML <a> tag (also known as the anchor element) is used to create a hyperlink to other web pages, files, locations within the same page or any other URL.

The only content permitted inside this element is either flow content (excluding interactive content) or phrasing content. All elements that are specifically designed for user interaction are classified under the Interactive content category. As mentioned earlier, the <a> tag cannot contain other interactive content. Since the <a> tag is itself interactive, you cannot have nested <a> tags.

The parent of the <a> tag can be any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements.

The following style is applied to this element by default:

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value); 
}

Here is a basic example of using this tag:

<a href="https://twitter.com/tutorialio">
    Tutorialio on Twitter
</a>

Attributes

The coords , shape , urn , charset , rev and name attributes are obsolete for this element.

download (Introduced in HTML5)

You can use this attribute to tell browsers that they should download the given URL instead of navigating to it. This means that the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt. The user can still change the file name if they want.

There are no restrictions on the characters allowed inside this attribute. However, keep in mind that both / and \ are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly.

You should keep in mind that this attribute only works for same-origin URLs. It is generally used along with blob: URLs and data: URLs to download content generated by JavaScript, such as pictures that created in an image-editor Web app.

href

This attribute contains a URL or a URL fragment that the hyperlink points to. A URL fragment is a name preceded by a hash mark (#). The name is used to specify an internal target location (an ID of an HTML element) within the current document. You can omit this attribute (as of HTML5) in order to create a placeholder link. A placeholder link is a traditional hyperlink that does not lead anywhere.

A new behavior that is specified by HTML5 is that you can now use href="#top" or the empty fragment href="#" to navigate to the top of the current page.

hreflang

This attribute is used to specfiy or indicate the human language of the linked resource. For exmaple, English U.S., English U.K. and Chinese etc. This attribute is purely advisory and has no built-in functionality.

referrerpolicy

This attribute indicates the referrer that should be sent when fetching the URL. It can take any of the following values:

  • no-referrer This value means that the Referer: header will not be sent.
  • no-referrer-when-downgrade This value means that no Referer: header will be sent when navigating to a domain without HTTPS. This is the default behavior.
  • origin This value means that the referrer will be the origin of the page, not including information after the domain.
  • origin-when-cross-origin means 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.
  • unsafe-url This value means the referrer will include the origin and path. However, it will not include the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.

rel

This attribute is used to specify the relationship of the target object to the link object. The value is a space-separated list of link types.

target

This attribute specifies where should the browser display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or <iframe>. The following keywords have special meanings:

  • _self This value indicates that the browser should load the URL into the same browsing context as the current one. This is the default behavior.
  • _blank This value indicates that the browser should load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
  • _parent This value indicates that the browser should load the URL into the parent browsing context of the current one. If there is no parent, this keyword behaves just like _self.
  • _top This value indicates that the browser should load the URL into the top-level browsing context (that is, the “highest” browsing context that is an ancestor of the current one, and has no parent). If there is no parent browsing context, this keyword also behaves just like _self.

When using the target attribute, you should consider adding rel="noopener noreferrer" to the link to avoid exploitation of the window.opener API.

type

This attribute is helpful when you want to specify the media type in the form of a MIME type for the linked URL. This attribute is provided strictly as advisory information. There is no built-in behavior associated with this attribute.

Further Reading

  1. Read more about the HTML <a> element on MDN.
  2. You can also visit the HTML <a> tag reference on W3C .

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top