XHTML Lesson 5: Anchors within a Page

Usually it is a good idea to keep Web pages short but sometimes you may find it convenient to create a lengthy page. Often you will do this to allow the reader to print a large amount of information without having to load and print multiple pages.

If you have a large page, you will often find it convenient to allow the reader to navigate to sections of the page. You can do this using named references within the page and links to those named references. For example, click this link to navigate to the detailed explanation of the code found at the bottom of this page.

Assignment:

Type the code below into any text editor and save it with the name "lesson05.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser. If you haven't already figured it out, you can save a lot of time by copying and pasting code from previous pages and just changing the content as needed.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 5: Named References and Links</title>
</head>
<body bgcolor="white">
<h1><a id="pagetop" name="pagetop">Named References</a></h1>
<p><a href="#adage">Go to adage at the end</a></p>
<p>Type any text you like below. Copy and paste it as many times as you like to create a really long page. Type any text you like below.</p>
<p><a id="adage" name="adage">Here is the adage:</a></p>
<p>All work and no play makes John a dull boy.</p>
<p><a href="#pagetop">Return to Top of Page</a></p>
</body>
</html>

A Detailed Explanation:

A named reference is a type of anchor and uses the <a> </a> tag pair. The attribute "name" is set to any name you like to identify the anchor. To comply with the rules of XHTML, also include an id attribute. You can set the id attribute to the same value or a different one. To create a link to the anchor, use the attribute "href" (hypertext reference) and type # and the name of the anchor. Together, named references and links to those references can help your reader navigate the sections of a long document.

<a id="sometext" name="sometext">Some text or blank space here.</a>

<a href="#sometext">Go to the section called sometext</a>

It is customary to create a named anchor called "top" or "pagetop" at the top of the page and create links to #top throughout a long page to allow the reader to easily return to the top of the page. One such link can be seen below.

Return to the top of the page

Previous Lesson | Next Lesson