Module 2 - Page 17 - The A (anchor) Tag and the NAME Attribute

The A (anchor) Tag and the NAME Attribute

A (anchor) tags allow you to create hyper-references/hot-links to other HTML pages or resources. A (anchor) tags can also allow you to create hyper-references that jump to individual points WITHIN a particular HTML page.

Here is an example page, which demonstrates this enhanced capability of the A (anchor) tag.

To make this kind of hyper-reference work, you need two A (anchor) tags: One A (anchor) tag to mark the place that you want to jump to, and one regular A (anchor) tag to make the hyper-reference. You already know the basics of making regular hyper-references, so let's talk about the A (anchor) tag that marks the "jump-to" point.

You must place an A (anchor) tag at each point in the HTML page that you want to be able to jump to. These "jump-to" points are called "NAME anchors", and are created using the NAME attribute in the A (anchor) tag.

Tag: A
Attribute: NAME
Description: The NAME attribute turns an A (anchor) tag into a "jump-to" point, which can be referenced by other A (anchor) tags used as hyper-references/hot-links.
Example: <a name="fred">Word</a>

Note: Each NAME on an HTML page MUST be unique (no repeats). A NAME anchor MUST surround some content; it may not be placed into a page without marking something; this content will NOT be affected in appearance (e.g., it will not become "hot" or clickable).

Here is how some of these NAME anchors might look in code:

<html>
<head>
<title>Some HTML Page</title>
</head>
<body>
<p>Here is the first paragraph of text. This paragraph is not marked.</p>

<p><a name="fred">Here</a> is a second paragraph of text. 
Notice how the first word is marked with an anchor. 
You could jump to this paragraph, if you wished to.</p>

<p><a name="george">Here</a> is a third paragraph of text. 
Again, you could jump directly to this paragraph on the page because
the first word of the paragraph is marked with a NAME anchor.</p>

<p><a name="herbert"></a>This NAME anchor tag is INCORRECT. 
Notice how the tag is NOT marking content; this usage is not officially supported. 
There must always be SOME content between the opening and closing anchor tags.</p>
</body>
</html>

Remember, these NAME anchors represent "jump-to" points; they are NOT clickable hyper-references, nor do they alter the appearance of marked content.

You can mark anything on an HTML page with a NAME anchor to make it a jump-to point, whether it be text or an IMG tag.

Once marked in the HTML code, any hyper-reference may jump directly to a NAME-anchored point by calling that name as the URL, preceded by the pound (#) prefix. For instance, "#fred" would be an appropriate URL for a hyper-reference jumping to the "fred" NAME anchor elsewhere on the same page.

Tag: A
Attribute: HREF
Example:

<a href="#fred">Link that jumps to "fred" NAME anchor</a>

In the following example, I have created a pair of hyper-references at the top of the page which can jump to the NAME-anchored paragraphs further down in the code.

Example:

<html>
<head>
<title>Some HTML Page</title>
</head>
<body>
<p><a href="#fred">Link to fred</a></p>

<p><a href="#george">Link to george</a></p>

<p>Here is the first paragraph of text. This paragraph is not marked.</p>

<p><a name="fred">Here</a> is a second paragraph of text. 
Notice how the first word is marked with an anchor. You could jump
to this paragraph, if you wished to.</p>

<p><a name="george">Here</a> is a third paragraph of text.
Again, you could jump directly to this paragraph on the page because the
first word of the paragraph is marked with a NAME anchor.</p>
</body>
</html>

You may also make hyper-references that jump to the TOP of a page. You don't need any special NAME anchor to mark the top of the page, however. All you need to do is use the pound (#) sign, all by itself, as the value for the HREF attribute in the A (anchor) tag.

Example:

<a href="#">This link will jump to the top of the page</a>

Note: This functionality is broken on Internet Explorer 5 for Macintosh. Therefore, you may need to create a NAME anchor at the top of the page, which you may then jump to, just as you would any NAME anchor.

<html>
<head>
<title>Example Page</title>
</head>
<body>

<h1><a name="top">Heading Words</a></h1>

paragraphs of content...

<p>Here is a <a href="#top">link to the top</a>.</p>
</body>
</html>

You may also jump to NAME anchors that exist on OTHER HTML pages, using either absolute or relative URL syntax. Simply take the absolute or relative URL, and append the pound (#) sign, followed by the name of the NAME anchor that you want to jump to, to the end of the URL.

Example:

<a href="./page2.html#bill">Link to "bill" NAME anchor on page2.html</a>

Here are two illustrations that I've created to make this point clearer:

Note: Each NAME attribute on a page MUST have a UNIQUE name (no repeats on that page). However, an HTML page may have NAMEs which are repeats of names from OTHER pages, as long as no name inside a given page repeats.

Example:

I have two pages, page1.html and page2.html. Each page has one NAME anchor on it called "fred"; page1.html has a NAME anchor called "fred" and page2.html has a NAME anchor called "fred". On page1.html, the NAME "fred" appears only once; on page2.html, the NAME "fred" appears only once; this usage is, therefore, legal.

I can't have TWO things on a single HTML page with the same name; in other words, there couldn't be TWO "fred" NAME anchors on page1.html.

Main Menu