CancelImage Upload

How to define Anchors within a HTML document

Although not used as much now days, one of the anchor tags original and main purposes used to be to actually act as an anchor. This means that you could define a place inside a text where the browser would automatically scroll down to if a link was clicked on.

Defining an anchor is simple. Inside the anchor tag there is a little used name attribute that we will set to this purpose. Now we can link to that anchor through placing that name inside an href attribute, following the # number symbol:

<a href="#bottom">Go to some text at the bottom of the page</a>

...

<a name="bottom">Anchor Text Bottom</a>

Now take the following example for instance. Here we have on link at the top of the page with a defined href attribute, pointing to the anchor of the name bottom, which as indicated is located at the bottom of the page. Now because the anchor at the bottom has not got a defined href attribute the text within it is just simple plain text. It is not a link in any shape or form, simply an anchor:

<a href="#bottom">Go to some text at the bottom of the page</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="bottom">Anchor Text Bottom</a>

All this changes of course as soon as the link receives a defined HREF attribute. Now for instance we do indeed have a link at both the top and bottom:

<a name="top" href="#bottom">Go to some text at the bottom of the page</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#top" name="bottom">Anchor Text Bottom</a>


Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com