html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Reference

HTML5 <a> tag

Definition

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

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

This is commonly known as a link.

To another document using the href attribute.

This is commonly known as a hyperlink.

Example


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

When clicked will display the webpage:
http://htmldoctor.info/htmlbasics/lotsofpies.html

<a> Specific Attributes


Attribute Value Description
downloadresource[value]Specifies that the link is to be used for downloading a resource, which can optionally have a value.
hrefURLSpecifies the URL to link to.
hreflanglanguage_codeSpecifies the language of target URL to link to.
Should be only be used when the href attribute is present.
rel



alternate

author

bookmark

help

license


next


nofollow


noreferrer


prefetch

prev


search


tag
Specifies that the link is to be used for downloading a resource, which can optionally have a value.
Should be only be used when the href attribute is present.

Alternative representation of current document.

Link to author of this document.

Gives a permalink for the nearest ancestor.

Link to a help document for current context.

Referenced document provides the copyright license terms for current document.

Indicates that the document is part of a sequence, and that the link to the referenced document is next.

Indicates that the link is not endorsed by the original author or publisher of the page.

Indicates that no referrer information is to be leaked when following the link.

Specifies target document should be cached.

Indicates that the document is part of a sequence, and that the link to the referenced document is previous.

Specifies that referenced document provides an interface specifically for searching the document and its related resources.

Specifies a tag that applies to the current document.
target



_blank

_parent

_self (default)

_top

framename
Specifies the relationship between the current document and linked document.
Multiple values can be used using a space as a delimiter.

Opens linked document in new window or tab

Opens linked document in parent frame.

Opens linked document in same frame as it was clicked in.

Opens linked document in window body.

Opens the linked document in a named framename.
typeMIME-typeSpecifies MIME type of the linked resource.
Should be only be used when the href attribute is present.

Attribute Examples


download:

<!-- href attribute value used to download resource -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   download>Chicken Pie</a> 

<!-- download attribute value used to download resource -->
<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   download="someresource.fileExtension">Chicken Pie</a>

href:

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

hreflang:

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

rel:

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

target:

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

type:

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

Global Attributes

The following attributes are common to and may be specified on all HTML elements (even those not defined in the W3C Editor's Draft

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


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

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> 

contenteditable - Specifies whether the user can edit the content or not. Valid values are "" and "true" which map to the true state and "false" which maps to the false state.


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

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>

hidden - Specifies that the element is not yet, or is no longer, relevant to the current state of the displayed page.
All browser/user agents do not display elements that have the hidden attribute present. Valid values are "" and "hidden".


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   hidden="hidden">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> 

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


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

spellcheck - Specifies the spelling of the content is checked. Valid values are "" and "true" which map to the true state and "false" which maps to the false state.


<a href="http://htmldoctor.info/images/chickenpiesmall.jpg"
   spellcheck="true">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> 

tabindex - Specifies a tab order for the element.


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

title - Specifies a title to associate with the element and browser/user agents may display this when the element is hovered over.


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

translate - Specifies whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. Valid values are "" and "yes" which map to the yes state and "no" which maps to the no state.


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

Event Handler 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()"></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

HTML5 Elements

The complete set of HTML5 elements also known as HTML5 tags from the latest HTML5 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<address>

<area>

<article>

<aside>

<audio>

<b>

<base>

<bdi>

<bdo>

<blockquote>

<body>

<br>

<button>

<canvas>

<caption>

<cite>

<code>

<col>

<colgroup>

<datalist>

<dd>

<del>

<details>

<dfn>

<dialog>

<div>

<dl>

<dt>

<em>

<embed>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1> - <h6>

<head>

<header>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<kbd>

<keygen>

<label>

<legend>

<li>

<link>

<main>

<map>

<mark>

<menu>

<menuitem>

<meta>

<meter>

<nav>

<noscript>

<object>

<ol>

<optgroup>

<option>

<output>

<p>

<param>

<pre>

<progress>

<q>

<rp>

<rt>

<ruby>

<s>

<samp>

<script>

<section>

<select>

<small>

<source>

<span>

<strong>

<style>

<sub>

<summary>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<time>

<title>

<tr>

<track>

<u>

<ul>

<var>

<video>

<wbr>