html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Reference

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://htmldoctor.info/htmlbasics/lotsofpies.html">Hyperlink</a>

When clicked will display the webpage:
http://htmldoctor.info/htmlbasics/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://htmldoctor.info/images/chickenpiesmall.jpg"
   charset="ISO-8859-1">Chicken Pie</a> 

href specifies the target URL to link to.


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg">Chicken Pie</a>

hreflang specifies the language of target URL to link to.


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   hreflang="en">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   class="classname">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   id="idname">Chicken Pie</a> 

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


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   style="color:red;text-align:left">Chicken Pie</a> 

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


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   title="information about the content">Chicken Pie</a> 

Keyboard Attributes

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


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   accesskey="aKeyValue">Chicken Pie</a> 

tabindex - specifies a tab order for the element .


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   tabindex="someNumber">Chicken Pie</a>

Language Attributes

dir - specifies the directional flow of the content.


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

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

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


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   lang="en">Chicken Pie</a> 

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


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   xml:lang="fr">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onblur="go()">Chicken Pie</a> 

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


<!-- Executes the go() function -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   onfocus="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onkeydown="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onkeypress="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onkeyup="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onclick="go()">Chicken Pie</a>

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


<!-- Executes the go() function -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   ondblclick="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onmousedown="go()">Chicken Pie</a>

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


<!-- Executes the go() function -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   onmousemove="go()">Chicken Pie</a> 

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


<!-- Executes the go() function -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   onmouseout="go()">Chicken Pie</a>

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


<!-- Executes the go() function -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   onmouseover="go()">Chicken Pie</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://htmldoctor.info/images/chickenpiesmall.jpg"
   onmouseup="go()">Chicken Pie</a>
<!DOCTYPE> tag    << Prev          Next >>   <abbr> tag

go to home page Homepage go to top of page Top