a element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The a element represents a link, if the href attribute is present, or a placeholder for a link otherwise. Links are the most essential part of HTML and one of the main reasons why it was born. They allow authors to link a piece of content (generally text or images) to an external resource, which can be another document, an image or any other type of resource. The attribute href is responsible for specifiying, through a URI, the location of the linked resource.

Browsers usually provide the means to follow a link to the resource it's pointing to, generally by clicking the text inside the a element.

Links can be used, not only to link to other documents, but also to reference a specific piece of its content. To set up this type of links, the destination document must have an element or section with a value in its id attribute. Then, links that must refer to this section will have to append to the document's URI a hash sign ("#") and the id of such section. When a link of this type is followed, browsers usually scroll to the linked section once the page has been loaded.

In HTML5, the bookmark notion has been adapted to allow any element with the id attribute defined, to act as a bookmark. This is a very convenient update for authors, that in older versions of the standard could only place bookmarks with the a element.

The HTML5 specification now allows a to wrap entire blocks of content (with elements like p, section and article, formerly considered "block level"), as long as they don't contain any interactive element like buttons or other links.

Traditionally, the a element could be used to define an area in a client-side image map. HTML5 considers this use of the element to be obsolete. The area element should be used instead.

Examples

In our first example, we're creating a basic link pointing to the homepage of HTMLQuick.com. To achieve this, we're using the href attribute with the URL of this website ("http://www.htmlquick.com/"). The content of the element will be the visible text, that we can click to follow the link.

<p>Hello, enjoy the free <a href="http://www.htmlquick.com/">HTML tutorials</a> at HTMLQuick.com</p>

Hello, enjoy the free HTML tutorials at HTMLQuick.com

Now, it's time to try a link that points to a bookmark on this very page. We'll point the link to the title "Description", placed almost at the beginning of the document. That title already has an id attribute with the value "description" in it.

So, we'll build the link exactly as in the previous, but with the URI of this document (that's an empty string, as we're using a relative URI) followed by a hash sign ("#") and the id of the linked element ("description"). In most browsers you'll see how, when this link is clicked, the browser scrolls back to the description of this element (a).

<p>Want to go back to the <a href="#description">Description of the a element</a>?</p>

Want to go back to the Description of the a element?

The idea in the last example, can also be used to link to a bookmark in another document. The browser will follow the link to the destination document and once there, it will scroll to the correponding section of it.

Attributes

Specific attributes

href

The address (represented by a URI) of the linked resource. This attribute is the heart of the link, and tells browsers where to go when the link is activated.

The a element can be declared without the href attribute. In such cases, the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant. This could be the case of navigational menus, where the link that points to the current page is omitted.

Example

<p>Link to page on this site: <a href="../../tutorials/links.html">HTML tutorial about links</a></p>
<p>Link to external site: <a href="http://www.w3.org/">The World Wide Web Consortium</a></p>

Link to page on this site: HTML tutorial about links

Link to external site: The World Wide Web Consortium

target

A value specifiyng where the destination document should be open. This value can be a browsing-context name (like the value of the name attribute of a iframe) or any of the following values (case-insensitive):

  • _blank: the link will open in a new window.
  • _parent: the link will open in the immediate parent context.
  • _self: the link will open in the same context that's containing the link.
  • _top: the link will open in the topmost context (the greatest parent context containing the link).

The target attribute was deprecated in previous versions of HTML, but it's been reinstated in HTML5 as it becomes useful in combination with the iframe element.

Example

<a href="http://www.htmlquick.com/" target="_blank">Open HTMLQuick.com in a new window</a>

download

A boolean value indicating if the linked resource should be downloaded to the user filesystem or open in the browser. If it's present, the browser will download the linked resource when the link is activated. Additionally, authors can specify as value of this attribute, a suggested name for saving the file on disk.

When choosing a value for this attribute, authors must be aware that most filesystems have restrictions that prevent the use of certain characters in the names of files.

Example

<p><a href="/" download="htmquick.html">Download HTMLQuick's home page</a></p>

ping

A list of space-separated URLs the browser should ping (request or navigate) when the link is activated. This attribute is useful when there's a need to collect statistical information about hyperlinks.

Browsers may completely ignore this attribute upon user request. Authors shouldn't rely completely in the results taken with this method of auditing links.

Example

<a href="/articles/clean-energy.html" ping="/audit.php?page=article-clean-energy&link=5">Article about clean energy</a>

rel

An unordered set of unique space-separated list of link types, indicating the meaning that the linked resource has for the current document (the one containing the link). This attribute may take the following values:

  • alternate: an alternate representation for the current document.
  • author: a link to the author of the current document or article.
  • bookmark: a permalink for the nearest ancestor section.
  • external: the linked resource isn't part of the same site as the current document.
  • help: a link to context-sensitive help.
  • license: a description of a copyright license that covers the main content of the current document.
  • next: the next document in a series of documents.
  • nofollow: the current document's original author or publisher does not endorse the referenced document.
  • noopener: indicates that any browsing context created by following the link to disown its parent.
  • noreferrer: indicates the browser not to send information about the referer (current document) when the link is followed.
  • opener: forces the browser to send information about the parent of a new browsing context created by the element. This value is useful, for example, to prevent the default behavior in links that open in new browsing contexts (with _blank value in their taget attribute)
  • prev: the previous document in a series of documents.
  • search: a link to a resource that can be used to search through the current document and its related pages.
  • tag: a tag, identified by the linked document, that applies to the current document.

Example

<a rel="prev" href="article1.html">Read previous article</a>
<a rel="next" href="article3.html">Read next article</a>
<a rel="license" href="copyright.html">Article copyrights</a>
<a rel="alternate" href="spanish-version.html" hreflang="es">Spanish version</a>

hreflang

A language tag identifying the language that's expected to be used in the liked resource.

Example

<a hreflang="es" href="spanish-version.html">Spanish version</a>

type

The content type (or Internet Media Type) that the linked resource is expected to have. The defaut value is "all".

Example

<a href="logo.gif" type="image/gif">Check out our logo</a>
<a href="article.html" type="text/html">Read the article</a>

referrerpolicy

Sets the referrer policy used when processing the element's attributes, which involves what information is sent about the referrer in a request to another resource. It may contain any of the following values:

  • no-referrer: No information about the referrer is sent in all requests.
  • no-referrer-when-downgrade: A full URL is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • same-origin: A full URL is sent only in requests made in the same origin.
  • origin: A URL composed by protocol, host and port is sent in all requests.
  • strict-origin: A URL composed by protocol, host and port is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests.
  • strict-origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests, only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • unsafe-url: A full URL is sent in all request.

Note: When the empty string is specified, the value no-referrer is assumed.

Example

<a rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">This content belongs to the public domain</a>

charset

The character encoding used by the linked resource.

This attribute has become obsolete in HTML5 and its use is no longer valid. Authors are encouraged to use HTTP Content-Type headers to provide information about character sets in documents and other resources.

Example

<a charset="utf-8" href="http://www.htmlquick.com/">HTML tutorials</a>

coords

A set of coordinates defining size and position of a shape in an image map. This attribute is used together with the shape attribute, and the coordinates it contains (that are always separated by commas) depend on the type of shape that's defined. The following list indicates what information should this attribute provide according to the value of shape:

  • rect: two opisite corners "left-x, top-y, right-x, bottom-y".
  • circle: the center and the radius "center-x, center-y, radius". If the radius is measured in percentage, its calculated as relative to the smaller size of the associated object.
  • poly: one by one, the coordinates of the vertexes "x1, y1, x2, y2, ..., xN, yN". If they define an open polygon, the browser should close it by adding a segment between the first vertex and the last one.

The use of this attribute in the a element has become obsolete in HTML5 and, therefore, it's no longer valid. Areas of image maps can only be defined with the area element.

Example

<a href="document1.html" alt="First document" shape="circle" coords="50, 50, 30"></a>
<a href="document2.html" alt="Second document" shape="rect" coords="10, 10, 90, 90"></a>
<a href="document3.html" alt="Third document" shape="poly" coords="10, 10, 10, 40, 15, 40"></a>

name

A name for the element.

This attribute was used in older versions of HTML to act as an identifier for the element and to define bookmarks in the document. In HTML5 its use has become obsolete and authors should replace it with the id attribute.

Example

<h1><a name="first-title">Knowledge</a></h1>

rev

The meaning of the current document (the one containing the link) for the linked resource.

This attribute became obsolete in HTML5 and its use is no longer valid. Authors are encouraged to replace it with the rel attribute.

Example

<a rev="index" href="article1.html">Article 1</a>
<a rev="index" href="article2.html">Article 2</a>
<a rev="index" href="article3.html">Article 3</a>

shape

The form of the shape used to define an area in an image map. The values this attribute can take are the following (case-insensitive):

  • default: the entire area of the map.
  • circle: a circular regin.
  • rect: a renctangular region.
  • poly: the area inside a polygon.

The use of this attribute in the a element has become obsolete in HTML5 and, therefore, it's no longer valid. Areas of image maps can only be defined with the area element.

Example

<a href="page1.html" alt="Page 1" shape="poly" coords="0, 0, 20, 20, 20, 0"></a>
<a href="page2.html" alt="Page 2" shape="circle" coords="80, 40, 30"></a>
<a href="page3.html" alt="Page 3" shape="rect" coords="100, 100, 110, 110"></a>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.