FANDOM


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:

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.
  • _blank - The target URL will open in a new window.
  • _self - The target URL will open in the same document as it was clicked.
  • _parent - The target URL will open in the parent document.
  • _top - The target URL will open in the full body of the window.
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 &amp; 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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.