Creating website page anchors

Website Tips

Your website, most probably, consists of multiple pages. Page anchors allow visitors to jump to a specific place in the current page or to jump to a specific place on another page. The basic method is the same. It is just that for an anchor on another page, you have to specify the page name. It is OK if in both cases, you specify the web page with the anchors.

The example below is taken directly from my implementation of anchors:

On the horizontal menu above, in Promote Website, when you click on Submit Website, you would find the Master Directory List is divided into multiple files. So in order to jump to a specific location such as A, I use the anchor as

<a href="http://www.mywebsiteworkout.com/list-master-directory-a.shtml#A">A</a>.

The #A is the anchor with which you jump to A in the specified page. Now, obviously, you must have a place designated as A in http://www.mywebsiteworkout.com/list-master-directory-a.shtml file to jump to. That is where you place the following instruction:

<a name="http://www.mywebsiteworkout.com/list-master-directory-a.shtmlA">A</a>.

Notice that only A follows the file name rather than #A. Only the anchor must have the # before the letter(s). So before I list directories that start with the letter A, I use the above instruction.

I have divided the list into 26 letters plus directories that start with the numerals. I just repeat the process for all external files in the format given below:

<a href="http://www.mywebsiteworkout.com/list-master-directory-0.shtml##">0-9</a>&nbsp;
<a href="http://www.mywebsiteworkout.com/list-master-directory-a.shtml#A">A</a>&nbsp;
<a href="http://www.mywebsiteworkout.com/list-master-directory-b.shtml#B">B</a>&nbsp;

and so on...

Now, notice that when you click on Article Directory List, I have all the alphabets in the same file. However, I still treat the anchors as if they were scattered in different files. For example, in this case, I use the same format specifying the explicit file name.

<a href="http://www.mywebsiteworkout.com/list-article-directory.shtml#A">A</a>.

I thought it was a better practice and to be consistent with the first example. The jump to destination is similar except that I don't give out a specific file name because when you click on A, for example, you basically tell it to go to that page to the specific place.

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

If instead you have

<a name="http://www.mywebsiteworkout.com/list-master-directory-a.shtmlA">A</a>,

it will go to the beginning of the page rather than the specific place on that page and that is what I have implemented in dealing with pages in Master List Directory. So it lands at the beginning of the page where I want it. That means I did not have to use page anchors for this particular application.

You can position the anchors and the respective directories using the HTML <div> tag.