The HTML <a> element is used to create links, called hyperlinks or anchors, to other resources on the internet. Examples of such resources are other webpages, e-mail addresses, downloadable files, etc. This is done using the href attribute, which indicates the link's destination in the form of it's URI.
Example of a hyperlink:
<a href="http://example.com/">hyperlink</a>
In HTML 5, this is the only possible use of the <a> element. In HTML 4 and below, it is one of two possible uses. The other function is to mark a position (know as fragment) in a document that another hyperlink can point to, using a so-called fragment identifier. This way, the element becomes the destination of a hyperlink. This is done using the name attribute. One <a> element can be both a source and destination, by having both a href and a name attribute. The destination functionality has been replaced by using the generic attribute id on any HTML element.
Example of such use:
<a href="#destination">link to target</a>
<a name="destination">target</a>
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and colored blue (ex. HTML & CSS Wiki)
- A visited link is underlined and colored purple (ex. HTML & CSS Wiki)
- An active link is underlined and colored red (ex. HTML & CSS Wiki)
Attributes[]
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | Deprecated |
| coords | coordinates | Deprecated |
| href | URL | The target URL of the link. |
| hreflang | language_code | Specifies the base language of the target URL. Use only if the href attribute is present.
|
| media | media query | Specifies what media/device the target URL is optimized for. Use only if the href attribute is present. Default value: all.
|
| name | section_name | Deprecated |
| ping | URL | Space separated list of URL's that gets notified when a user follows the hyperlink. Use only if the href attribute is present.
|
| rel | alternate archives author bookmark contact external first help icon index last license next nofollow noreferrer pingback prefetch prev search stylesheet sidebar tag up |
Specifies the relationship between the current document and the target URL. Use only if the href attribute is present.
|
| rev | text | Deprecated |
| shape | default rect circle poly |
Deprecated |
| target | _blank _parent _self _top |
Specifies where to open the target URL. Use only if the href attribute is present.
|
| type | mime_type | Specifies the MIME type of the target URL. Use only if the href attribute is present.
|
HTML example:
<a href="http://htmlcss.wikia.com/wiki/Main_Page">HTML & CSS Wiki</a>
This element can also be used to link to an email address which the user can click on to send messages. Here is an example:
<a href="mailto:community@wikia.com">Click here to message Wikia staff.</a>
To link to an email on Wikia wikis, it is the same as linking to an external source:
[mailto:community@wikia.com]
That makes this: [1] which will allow you to send a message to Wikia staff when you click on it.
Rendering[]
Most graphical web browsers render links in blue with an underline, and the mouse pointer changes to a hand cursor while hovering over it. Visited links are colored purple, and active ones are red. Focused anchors show a dotted outline in the same color as the link text.
Most browsers have settings that allow the user to modify the default colors and underlining, and possibly even block these from being modified by the website.
Link colors can also be modified using the (deprecated) attributes link (for general links), alink (for active links) and vlink (for visited links) of the <body> element.
Named links (destinations) are not rendered differently from normal text.
Typical CSS representation[]
a:link {
cursor: pointer;
text-decoration: underline;
color: #0000EE;
}
a:active {
color: #EE0000;
}
a:visited {
color: #551A8B;
}
a:focus {
outline: 1px dotted;
}
Notable exceptions[]
Mobile Safari:
- Focus and hover are not supported.
- Active links are not colored, but have a semi-transparent black background.
Mobile Chrome:
- Hover is not supported.
- Focused elements get an orange outline with rounded corners.
- Active links are not colored, but have a semi-transparent orange background.
Opera Mini:
- Hyperlinks are not underlined.
- Visited links are dark blue (#000070).
- Focused links have a blue outline and a semi-transparent blue background.
- Active links show a less-transparent blue background.
Gmail mobile web interface:
- All hyperlinks are converted to plain text.
- Instead, plain text URL's are converted to hyperlinks.
Example HTML source:
<p>Testing <a href="http://someexample.com/">hyperlink</a>
and URL http://anotherexample.com/</p>
Gmail's mobile web interface will convert this to:
<p>Testing hyperlink
and URL <a href="http://anotherexample.com/">http://anotherexample.com/</a></p>
Conclusions[]
- Hover, focus and active states are not available on all devices. Do not depend on them to supply vital information. For example, not all users can view a link destination by hovering over the link.
- When sending emails, always include full URLs of hyperlinks in the text.
Coding rules[]
The <a> element belongs to the Flow content category.