HTML <a> tagS2C Home   « HTML <a> tag

Definition

The <a> tag and its' closing </a> tag are used to define an anchor in two ways:

To another part of the current document using the href attribute in conjunction with the name attribute or the id attribute.

This type of anchor is commonly known as a link.

To another document using the href attribute.

This type of anchor is commonly known as a hyperlink.

Example


Link anchor:
<a href="#bigpie">Big Pie Link</a>

When clicked will move the webpage to the link below:
<h2 id="bigpie">Link To same Page</h2>

Hyperlink anchor:
<a href="http://server2client.com/html4basics/lotsofpies.html">Hyperlink</a>

When clicked will display the webpage:
http://server2client.com/html4basics/lotsofpies.html

Required Attributes

NONE

Optional Attributes

coords - limited browser support - use the area attribute instead.

name - use the id attribute instead.

shape - limited browser support - use the area attribute instead.

rel - no browser support - used by search engines to ascertain the relationship of the linked document to the current page.

rev - no browser support - used by search engines to ascertain the relationship of the current page to the linked document.

target - limited browser support - specifies where to open the target.

charset specifies the character set of the linked document.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   charset="ISO-8859-1"></a> 

href specifies the target URL to link to.


<a href="http://server2client.com/images/chickenpiesmall.jpg"></a>

hreflang specifies the language of target URL to link to.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   hreflang="en"></a> 

Common Attributes

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   class="classname"></a> 

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   id="idname"></a> 

style - specifies an inline style for the element allowing you to apply the style to the content.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   style="color:red;text-align:left"></a> 

title - specifies an inline style for the element allowing you to apply the style to the content.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   title="information about the content"></a> 

Keyboard Attributes

accesskey - specifies a keyboard shortcut to associate with the element .


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   accesskey="aKeyValue"></a> 

tabindex - specifies a tab order for the element .


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   tabindex="someNumber"></a>

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   dir="ltr"></a> 

<!-- The text will flow from right to left -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   dir="rtl"></a>

lang - specifies a language code for the content of the element.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   lang="en"></a> 

xml:lang - specifies a language code for the content of the element in XHTML documents.


<a href="http://server2client.com/images/chickenpiesmall.jpg"
   xml:lang="fr"></a> 

Document Event Attributes

NONE

Form Event Attributes

onblur - The JavaScript code to be run when the element loses focus.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onblur="go()"></a> 

onfocus - The JavaScript code to be run when the element gets focus.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onfocus="go()"></a>

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onkeydown="go()"></a>

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onkeypress="go()"></a>

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onkeyup="go()"></a>

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onclick="go()"></a>

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   ondblclick="go()"></a>

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onmousedown="go()"></a>

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onmousemove="go()"></a> 

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onmouseout="go()"></a>

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onmouseover="go()"></a> 

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<a href="http://server2client.com/images/chickenpiesmall.jpg"
   onmouseup="go()"></a>

go to home page Homepage go to top of page Top