<a>

The a element represents an anchor.

However, it is most commonly used in the construction of hyperlinks and web links because a link starts at the “source” anchor and goes to a “destination” anchor, i.e., an element within an HTML document, or “destination” file, e.g., an external HTML document.

Start tag:
<a>
End tag:
</a>
Example [Basic Name Anchor (Deprecated)]:

[Skip to attributes list for this element.]

Code [HTML]:

Source:
<p>[<a href="#attributesListFor">Skip to attributes lists for this element.</a>]</p>

[Code between]

Destination:
<a name="attributesListFor"></a>

Example [A Second Basic Name Anchor (Deprecated)]:

[Return to the top of this page.]

Code [HTML]:

Source:
<p>[<a href="#attributeNameFor">Return to the top of this page.</a>]</p>

[Code between]

Destination:
<p id="elementNameDefinition"><a name="attributeNameFor"><code>a</code></a> is an anchor.</p>

Example [Basic ID (Fragment Identifier) Anchor]:

[Skip to footer of this page.]

Code [HTML]:

Source:
<p>[<a href="#caveats">Skip to footer of this page.</a>]</p>

[Code between]

Destination:
<div id="caveats">

[Note: Any element’s ID can be used as an destination anchor when the source anchor has a “fragment identifier” (e.g., "#caveats") as the value in the href attribute). This method obsoletes the need to use the anchor syntax as illustrated in the two first examples above. However, that syntax may be required for Content Management Systems (CMS) workarounds.]

Example [Two Anchor Links with Title attributes]:

HTML 5 differences from HTML 4 by Anne van Kesteren has an interesting section regarding new elements.

Code [HTML]:
<p><a href="http://www.w3.org/TR/html5-diff/#new-elements" title="View HTML 5 New Elements Section"><abbr>HTML</abbr> 5 differences from <abbr>HTML</abbr> 4</a><span class="externalLink"></span> by <a href="http://annevankesteren.nl/" title="View his site">Anne van Kesteren</a><span class="externalLink"></span> has an interesting section regarding new elements.</p>
Example [Anchor (Script)]:

The “[Open this]” toggle to the left.

Code [HTML]:

Script:


<script type="text/javascript">
$(document).ready(function(){
	$("#menuCadabra").click(function(){
		$("#panel").slideToggle("slow");
                $(this).text($(this).text() == '[Close this]' ? '[Open this]' : '[Close this]');
                return false; 
               });
 
});
</script>

HTML:


<p id="menuCadabraParagraph"><a href="#" id="menuCadabra">[Open this]</a></p>
Element-Type:
Text-Level [HTML 4.01]
Transparent [HTML 5]
Attributes:

</a>