Basic HTML: Name Anchors

Moving Around a Page

The magic of the Web is the ability to move seamlessly from one page to another, on any server anywhere in the world. The HTML that performs this magic is called an anchor. Every page on the web has its own unique URL (Universal Resource Locator). When you link your page to another page, you insert the hyperlink reference in your HTML.

Tag:  anchor
Attribute:  Hyperlink reference
Value:  URL

<a href="
/basichtml.htm"/Very Basic HTML</a>

But did you know you can create unique URLs within the same page? They are called name anchors. Adding them to your HTML enables your visitor to jump directly from one section of your page to another (without scrolling), or to a specific location on a different page.

The Name Anchor

Suppose you have created a page on your SMITH family which contains several sections: Family Migrations, Cemeteries and Burials, Marriage Records, and so forth. You have listed these in a Table of Contents at the top of the page. You want your visitor to be able to jump from the TOC to a particular section on the page. First, you must create the anchor (the unique URL) for the link.

Open the page in your text editor and locate the point on the page where you want to create the name anchor. It can be a word, a heading, a space, or any location on the page. Let's create an anchor for the section about Family Migrations. Add the name anchor to that text or section header.

Tag:  anchor
Attribute:  name
Value:  URL (the "name" you will use for the link)

<a name="migrations"><h3>Family Migrations</h3></a>

The anchor will be invisible on the page itself; but this code creates a unique URL for this specific location (the heading for the section about Family Migrations) on the page.

You may create as many name anchors as you like on a page, but each name must be unique and may be used only once on a page. Like all URLs, the names may not contain spaces, but they can be any combination of UPPER or lower case letters, numbers, hy-phen or under_score. Just remember to copy the anchor name eXacTLY when writing the link.

Getting There (Linking)

You link to this new URL the same way as any other. When a name anchor is part of the URL, it must always be preceded by the ( # ) sign.

If the link is to another location on the same page (from the TOC to the section about Family Migrations):

<a href="#migrations">Family Migrations</a>

If the link is to a location on a different page at your site ( a relative link ), include the file name of the page on which the name anchor appears:

<a href="smith.html#migrations">Family Migrations</a>

If the link is to a different URL ( an absolute link ):

/smith.html#migrations"> Family Migrations</a>

Go right to the TOP

To return to the top of the page from any point on the page, create a name anchor at the very top of your page (insert it right after the  <body> tag.) Note it does not have to enclose text.

<a name="top"></a>

At the end of the section or page, insert the link:

<a href="#top">Top</a>

That's all folks...

That's all there is to it. I have used several name anchors on the Very Basic HTML page; so you can move from the TOC to any particular topic; and return to the TOC from any section on the page. The first link at the bottom of this section will return you to the Very Basic HTML page -- to the Adding a Link section, which may be how you arrived here in the first place. Just for good measure, I've added an anchor to the top of this page so you can review.

Back to: Adding a Link

Pat's Web Page Tutorials
Copyright 2000-2018 Pat Asher