When you want to allow your visitor to go quickly to a particular topic on a page, you can add a link to an element in the top of the page and an anchor tag to an element within the content that contains that topic.

How to add anchors to your HTML

To add a link for an anchor, you use the pound # sign within the link in front of the name of the anchor. You can also link to anchors that exist on other pages by adding the url for that page followed by the # sign.

<a href="#....">...</a>
<a href="/pagename#...">...</a>

to the anchor itself, withing the content, add the <a> tag with the name of the anchor (do not use the pound # sign here).

<a name="...">...</a>


Example of using anchor tags to link to a topic on a webpage

At the top of the page, you may have a list of the topics covered on your web page. Each one of these topics will have a link that takes the use to that topic within the same page. 

<ul>
    <li><a href =" #hawks">Hawks</a></li>
    <li><a href =" #egrets">Egrets</a></li>
    <li><a href="/#baldeagles">Bald Eagles</a></li>
</ul>

Down within the content for each topic, you add an anchor tag with <a name="..."></a>

<h2><a name="baldeagles">Bald Eagles</a></h2>

You have this all set up. You test it out. It works fine, when you click on the link at the top of the page, it scrolls immediately to that subject.


The anchor is too close to the top of the screen

Adding this anchor tag makes it so that particular item is the very first thing displayed on the browser page. Sometimes, this is uncomfortably close to the top of the browser window. You may want to add a little cushion above the anchor.

This can easily be accomplished with some CSS.

In your style sheet, you want to target only the <a> tags with the attribute of "name".

a[name] {padding-top: 15px}

This will give your anchor tag a nice little cushion of 15px from the top of the browser window. It does not have an effect on the layout of the page otherwise.