Anchors are named locations to which a link can point. Anchors can be created with the
<a> tag using the
or with any tag using the
Here is an example of creating an anchor with the
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>
<a href="http://www.beatles.com/about.html#paul">Read about Paul</a>
The file below shows illustrates the use of anchors.
<!DOCTYPE HTML> <html lang="en"> <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 at eleven o'clock in the morning, and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so excited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</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 in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'</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 kind old poet. As he was sitting one evening in his room, a dreadful storm arose without, and the rain streamed down from heaven; but the old poet sat warm and comfortable in his chimney-comer, where the fire blazed and the roasting apple hissed.</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.
Any tag with an
id attribute can serve as an anchor and can be linked to.
---- 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.
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.