Creating a link within the same HTML document or to a specific fragment of another document is a two-step process. The first step is to make the target fragment; the second is to create the link to the fragment.

Use the <a> tag with its name attribute to identify a fragment. The value of the name attribute is used in hyperlinks that point to the fragment. Here’s a sample fragment identifier:

<h3><a name=”Section_7″>Section 7</a></h3>

A hyperlink to the fragment is an <a> tag with the href attribute, in which the attribute’s value–the target URL–ends with the fragment’s name, preceded by the pound sign (#). A reference to the previous example’s fragment identifier, then, might look like:

See <a href=”index.html#Section_7″>Section 7</a> for further details.

By far the most common use of fragment identifiers is in creating a table of contents for a lengthy document. Begin by dividing your document into several logical sections, using appropriate headers and consistent formatting. At the start of each section, add a fragment identifier for that section, typically as part of the section title as a header. Finally, make a list of links to those fragment identifiers at the beginning of your document.

Our sample document extolling the life and wonders of the mighty kumquat, for example, is quite long and involved, including many sections and subsections of interest. It is a document to be read and read again. To make it easy for kumquat lovers everywhere to quickly find their section of interest, we’ve included fragment identifiers for each major section, and placed an ordered list of links–a hotlinked table of contents, as it were–at the beginning of each of the Kumquat Lover’s documents, a sample of which appears below along with sample fragment identifiers that appear in the same document. The ellipsis symbol (…) means there are intervening segments of content, of course.

…
<h3>Table of Contents</h3>
<ol>
<li><a href=”#soil_prep”>Soil Preparation</a>
<li><a href=”#dig_hole”>Digging the Hole</a>
<li><a href=”#planting”>Planting the Tree</a>
</ol>
…
<h3><a name=soil_prep>Soil Preparation</a></h3>
…
<h3><a name=dig_hole>Digging the Hole</a></h3>
…
<h3><a name=planting>Planting the Tree</a></h3>
…

The kumquat lover can thereby click the desired link in the table of contents and jump directly to the section of interest, without lots of tedious scrolling.

———————–

thanks fly to original author @ http://www.unix.org.ua/orelly/web/html/ch07_03.html