How To Link To A Specific Spot On A Page

When you are designing your website, you may have a requirement to link to a specific spot on a page. Or maybe you want to add a link back to the top so they can get back to your navigation menu or any other area within the page? Targeting within a page is very easy.

 

The XHTML Compliant Way to Link Within a Page

XHTML compliant means that it will help your pages validate as XHTML Strict, the old way will not pass. This method is just as easy as the older link jump and when you continue getting better at designing you will probably be glad you did it this way in the first place as there is no messy editing later.

 

1) Name the Target

Choose the exact spot you want to send your link to, choose and element near it, such as a div, header tag, paragraph, it does not matter as long as it's in the right spot. Add id="something", you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).

 

An example would look like this:

 

<div id="whatever-you-want-to-call-it">

The content of your div here.

</div>

 

2) Link To Your Anchor Target

To link to your anchor simply use:

 

<a href="#whatever-you-want-to-call-it">Link Text Here</a>

 

or if it's on another page:

 

<a href="pagename.html#whatever-you-want-to-call-it">Link Text Here</a>