Anchors -- Jumping to the Middle of a Page

Links -- Jumping into the Middle of a Page

We've already learned to use the anchor <a> tag to link to other web pages. Here we learn to jump to the middle of those pages. Before we can do this, we must learn a second use for the anchor tag.

The anchor tag is used in two ways:

As a link -- causes the browser to load a new page.
As the destination for a link -- to mark the spot within a page, that the browser is to go to.

The Anchor Tag as a Marker

An anchor tag is used as a destination marker by placing it anywhere within a page and giving it an id. Headings are good spots to place destination anchors. They help to orient the reader, when the new page comes up. The destination anchor needs nothing but an id. The very next heading was turned into a destination with this code:

<h4>This Heading is Marked.<a id="mark"></h4>

This Heading is Marked.

Now that we have a destination marker, we can link to it as follows:

<a href="#mark">Go to the Marked Heading </a>

and producing the link:

Go to the Marked Heading

Clicking the link moves the marked heading to the top of the page.

Using Anchor Tags to jump to a Specific Spot in Another of Your Pages

Insert a destination anchor at the spot where you wish to open the page. For example:

<h4>The Incredible Auk <a id="auk"> </h4>

The code for the link anchor uses a # to append the destination id to the file URL. Thus:

Click here to learn about 
 <a href="htmwrite.html#auk">
 The Incredible Auk </a>.

produces the result:

Click here to learn about The Incredible Auk .

Using Anchor Tags to jump to a Specific Spot in Someone Else's Web Page

Whether you can do this depends on whether the web page author placed a destination anchor in his page at the spot where you need it. If so, he most likely has a link to that spot too.

If you find such a link, you can learn the id (or name) of the marker anchor by viewing the source code of the web page. Right click on the page, then click "View Source".

Append the destination id to the web page URL with a #, and use it as the href in your link anchor. For example:

<a href="http://www.yourhtmlsource.com/myfirstsite/basiclinks.html#STRUCTURE" target="_top">
    Another View of Links </a>

Another View of Links from Your HTML Source, by Ross Shannon.