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.
Table of contents
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.
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.
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 theirtaget
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.