Articles » HTML Link within a page

Generally links are used to navigate to a web page where you will be taken to the top of the page.

Thats great but not if the content you want to link to is buried further down the page.

To code this choose the exact spot on your web page you want to send your link to then select an element near it. A heading tag is a common element to choose although most elements will work, add id="anchorname", you can call this anything you like as long as the names are the same in the link and the target ID.

Here is an example of a pre tag with an id:

This p has an id attribute set to "anchorname"

To link to this anchor from within the page use the following link code:

1
<a href="#anchorname">Link Name</a>

To link to this anchor from outside the page use the following link code:

1
<a href="http://www.sitename.co.uk/pagename.html#anchorname">Link Name</a>

The XHTML compliant way

A # symbol before a link location indicates that it is pointing to an anchor within a page.

To create an anchor within a page use the following code:

1
<a name="anchorname"></a>

To link to this anchor from within the page use the following link code:

1
<a href="#anchorname">Link Name</a>

To link to this anchor from outside the page use the following link code:

1
<a href="http://www.sitename.co.uk/pagename.html#anchorname">Link Name</a>



Captcha Image