Creating a Document Menu

Whenever a document contains a significant amount of text, you should consider creating a menu at the top of the document (a "document menu") that links to sections further down in the document. If your document extends far past "the fold" (or the bottom of the viewport in a browser window set at 800 Ч 600, the most common browser window dimensions), a document menu can help visitors to easily access the different parts of your page.

Creating a document menu is a two-step process. First, you need to mark the spot you want to jump to, and then you need to create a link that jumps to that spot.

Creating a Destination Anchor

You mark a spot you want to jump to by creating a destination anchor. You create a destination anchor using the A element, but using the NAME attribute to name the anchor (instead of the HREF attribute to specify a link object). Create a destination anchor for the first H2 element in the page:

<h2><a name="safety"></a>Egg Safety and Quality</h2>

<p>All foods have the capability of carrying microorganisms
that can cause disease or illness. Common symptoms of food-
borne illness include nausea, vomiting, diarrhea, cramps,
headache, and fever. While the risk of getting sick from eat-
ing eggs is relatively low, following are some tips for
reducing the likelihood of contracting food-borne illness
from eating eggs:</p>

Note

You will notice that the A element used to create the destination anchor is nested inside of the H2 element, but does not bracket its content. There is no need to bracket any content in a destination anchor, since it is only marking a spot. The A element is an inline element and, as such, should always be nested inside of a block element—browsers don't care about this, but an HTML validator will likely report an error if the A element is not nested inside of a block element.

Creating a Menu Link

You create a menu link by specifying a special form of link object, called a fragment identifier. A fragment identifier is composed of a # character and a link name (#safety, for instance). When linking to a destination anchor located in the same document, a fragment identifier is inserted as the sole content of the HREF value (href="#safety", for instance); when linking to a destination anchor located in another document, a fragment identifier is inserted following the URL (href="http://www.someplace.com/somepage.html#safety", for instance).

A bulleted (or unordered) list has already been created for you; turn the first list item into a menu link that jumps to the "safety" destination anchor (see Figure 3.2):

<ul>
<li><a href="#safety">Egg Safety and Quality</a>

<li>Egg Sizes
<li>Egg Grades
</ul>

Figure 3.2: A menu link has been created that jumps to a destination anchor.

Note

The keyboards for some Macintoshes marketed in the United Kingdom substitute the Pound symbol (Ј) for the number sign (#).To insert the number sign on those computers, press Option+3 (or Alt+3).

Testing the Menu Link

Test the menu link you just created. Be sure to save your document in your text editor (File, Save) and refresh the display of your page in your browser (click the Restore or Reload button, or press Ctrl+R). Click on the first list item, which has been turned into a link. Your browser should display the level-two heading ("Egg Safety and Quality"), which you marked previously with the "safety" destination anchor, at the top of the browser window (see Figure 3.3).

Figure 3.3: The browser jumps down to the specified destination anchor after a menu link is clicked on.

To return to the top of the document, just click your browser's Back button.

Creating the Other Menu Links

Set destination anchors to mark the two remaining H2 elements:

<h2><a name="sizes"></a>Egg Sizes</h2>
<p>The size or weight class of a carton of eggs refers to the
minimum weight per dozen. Size and quality are not related.
The following table shows the different egg weight class-
es:</p>
[...]
<h2><a name="grades"></a>Egg Grades</h2>
<p>Eggs are federally graded as U.S. Grade AA, U.S. Grade A,
or U.S. Grade B. Eggs are graded based on the appearance and
characteristics of the shell, yolk, and white. All three
grades of eggs are equally nutritional and safe to eat[...]

Return to the top of the document and create the two remaining menu links in the document menu that jump to the two destination anchors you have just created (see Figure 3.4):

<ul>
<li><a href="#safety">Egg Safety and Quality</a>
<li><a href="#sizes">Egg Sizes</a>
<li><a href="#grades">Egg Grades</a>
</ul>

Figure 3.4: Two additional menu links are added to the document menu.

Note

Internet Explorer 6 displays all links to locations within the same document as visited links (rather than unvisited links), displaying them in a purple color (rather than blue). Most other browsers, however, initially display these links as blue, unvisited links.

Save your document in your text editor and refresh it in your browser (click the Refresh, or Reload, button). If you now click on the third menu link ("Egg Grades"), it should jump to the heading you marked with the "grades" destination anchor (see Figure 3.5).

Figure 3.5: The third menu link jumps down to the "Egg Grades" heading.

Click your browser's Back button to return to the top of the page.

Note

A PRE (Preformatted Text) element containing a series of hard returns is included at the bottom of the page's body. The PRE element is the only element in which hard returns are preserved and displayed. Doing this lets text marked by a destination anchor be displayed at the top of the browser's viewport, by adding visible space that can be displayed at the bottom of the page. You will learn more about using the PRE element later in this session.

Caution

When creating destination anchors and menu links, you need to be aware that anchor names and fragment identifiers are case-sensitive. Thus, if you have inserted name="eggsizes" as the destination anchor, you must insert href="#eggsizes" and not href="#EggSizes" in the menu link.

Destination anchor names also must be unique. If the same anchor name is used more than once in a document, a browser will only be able to find the first one or won't be able to find any (depending on which browser is being used).

Tip

You can also include "loop-back" links at the end of the document sections that will jump back to the document menu. This can be done in two ways. The first is to insert a destination anchor at the start of the document menu and then create links at the end of the sections that jump back up to that destination anchor. You can also just add links at the end of the sections that reopen the page (href="tutor2.html", for instance), which will cause the top of the page to be redisplayed in the browser window's viewport.