How To Link to a Specific Spot on a Page

How To Link to a Specific Spot on a Page

Want to give your website visitors a shortcut to a specific spot on a page? Or maybe 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 really easy and there's 2 ways to do this, here's how.

The XHTML Compliant Way to Link Within a Page

If you don't know what XHTML compliant means, don't worry it just means that it will help your pages validate as XHTML Strict, the old way won't 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 (no messy editing later).

1) Name the Target
Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever 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>

The Old Way

This way of jumping to a spot within a page is not as good an idea for a few reasons. The "name" attribute has been depreciated for XHTML, and using tags you already have on your page like <h1>, <p> or any other places you can add id's will leave you less clutter on your page. (ie, you can use them for css styles, javascript and a lot more. And yup, if you happen to already have a something styled on your page using ID, linking to it works just fine.)

With that said, just in case for some reason you want to try the other way, here it is. As with the linking method above, you can call it anything you'd like, try not to use spaces though (they look rather messy in an address bar).

1) Naming the Target
Choose a spot on the page you want to link to and make an anchor by making a link mostly as usual but instead of "href" add "name" inside it.

Here's an example:
<a name="whatever-you-want-to-call-it">something here so you don't have an empty tag</a>

2) Linking to your new jump spot
This step is the same as above:
<a href="#whatever-you-want-to-call-it">Link Text Here</a>

See, either way you choose to link within the page it's fast, easy and can be very helpful to your visitors.

<< More H

Posted in: HTML