Anchors

Contact Us or call 1-877-932-8228
Anchors

Anchors

Anchors are named locations to which a link can point. Anchors can be created with the <a> tag using the name attribute or with any tag using the id attribute.

Anchors with the name Attribute

Here is an example of creating an anchor with the <a> tag.

<a name="paul"></a>

As you can see, anchors are created using the <a> tag with the name attribute. To link to an anchor, use the pound sign (#) followed by the anchor name. For example,

<a href="#paul">Read about Paul</a>

You can also link to anchors on other pages.

<a href="about.html#paul">Read about Paul</a>

Or

<a href="http://www.beatles.com/about.html#paul">Read about Paul</a>

The file below illustrates the use of anchors.

Code Sample:

Links/Demos/Anchors.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Anchors</title>
</head>
<body>
<h1><a name="top" id="top"></a>Anchors</h1>
<h2>Links to Anchors on Remote Pages</h2>
<div>
	<a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.3">W3C anchors.</a>
</div>

<h2>Links to Anchors on This Page</h2>
<div><a href="#winnie">Pooh Goes Visiting</a></div>
<div><a href="#alice">A Mad Tea-Party</a></div>
<div><a href="#naughtyboy">The Naughty Boy</a></div>
<hr>

<h2>Anchors on This Page</h2>
<p>Each title below has an anchor.</p>

<h3><a name="winnie" id="winnie"></a>POOH GOES VISITING - A.A. Milne</h3>
<p>Pooh always liked a little something...'</p>
---- C O D E   O M I T T E D ----
<hr>
<h3><a name="alice" id="alice"></a>A MAD TEA-PARTY - Lewis Carroll</h3>
<p>There was a table set out under a tree....'</p>
---- C O D E   O M I T T E D ----
<hr>
<h3><a name="naughtyboy" id="naughtyboy"></a>THE NAUGHTY BOY - Hans Christian Andersen</h3>
<p>Along time ago, there lived an old poet, a thoroughly....</p>
---- C O D E   O M I T T E D ----
<div><a href="#top">Back to top</a></div>
</body>
</html>

You'll notice the <a> tag anchors use both the id attribute and the name attribute with the same value. Although this is not required, it is considered good practice.

Anchors with the id Attribute

Any tag with an id attribute can serve as an anchor and can be linked to.

Code Sample:

Links/Demos/AnchorsIds.html
---- C O D E   O M I T T E D ----
<h3 id="winnie">POOH GOES VISITING - A.A. Milne</h3>
---- C O D E   O M I T T E D ----
<h3 id="alice">A MAD TEA-PARTY - Lewis Carroll</h3>
---- C O D E   O M I T T E D ----
<h3 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h3>
---- C O D E   O M I T T E D ----

The behavior of these links is identical to those in the previous example.

name vs. id

The major advantage of using the <a> tag with the name attribute is that it's supported by older browsers.

The advantage of using the id attribute is that it can be applied to any tag, so there is no need to explicitly create anchors.

Next