Named Anchors

Previous page...

There is of course a way to link to a specific part of a document. Using a standard hyperlink, of course, but with a small addition. Found in the HREF attribute, the name is tacked onto the end of the URL of the document in which it appears. To do this, just enter document's URL, and then add a hash-sign (#) and the name to the end of the URL. For example, assuming that the document's URL is "http://www.site.edu/food.htm" the pointer to the named anchor part3 would be:

http://www.site.edu/food.htm#part3

A hyperlink which has the above URL in its HREF attribute will take the reader straight to the text contained within the anchor <A NAME="part3">...</A> within the file "food.htm." (Incidentally, if the browser loads a file but can't find the named anchor which has been specified, it simply goes to the top of the file, just as it would have if there hadn't been a name in the URL at all.)

Now, you may be confused about why a hash-sign (#) is in the URL. That hash-sign is how the browser knows that it's looking for a name, and how it keeps the named anchor separate from the document's filename. Therefore, if you are writing a hyperlink which points to a named anchor found within the same document, you only need to have the hash-sign followed by the name of the anchor. For example, a hyperlink to Part 3 which is found within the file "food.htm" would have this markup:

<A HREF="#part3">Part 3</A>

The HTML

Page 1 (index.htm)

<html>
<head>
	<title>Home Page</title>
</head>

<body>
	
	<h1>Home Page</h1>
		
	The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here 
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
	
	<p>&nbsp;
	
	<p><a href="food.htm#part3">Go to Food Part 3</a>

</body>
</html>

Page 2 (food.htm)

<html>
<head>
	<title>Food Page</title>
</head>

<body>
	
	<h1>Food Page</h1>
	
	<h3>Part 1</h3>
	
	The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here 
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
		
		
	<h3>Part 2</h3>
	
	The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here 
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
	
		
	<a name="part3"><h3>Part 3</h3></a>
		
	The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here 
		
	<p>The document content goes here
		
	<p>The document content goes here
		
	<p>The document content goes here
	
	<p><a href="#Top">Go to Top of Page</a>

</body>
</html>