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.


The a represents a links. 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.


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.


Specific attributes


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.


<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


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.


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


A boolean value indicating if the linked resource should be downloaded to the user filesystem or open in the browser. If it presents the value "download" or the empty string ("") o if it's just 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.


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


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.


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


A space-separated list of link types, indicating the meaning that the linked resource has for the current document (the one containing the link).


<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>


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


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


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


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


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.


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


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.


<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>


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.


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


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.


<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>


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.


<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.


Global events

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