Linking Within the Same Page

Now that you know how to link to other resources, you might want your hyperlinks to be more meaningful. HTML enables you to use hyperlinks to point to a specific spot (or anchor) in an HTML document, instead of just pointing to the entire document. As an example, suppose that you have a list of headlines at the top of your HTML document that points to a more complete article at the bottom of your document. This is easy in HTML. Remember that anchor tags come with three attributes: HRef (which has already been discussed), and name and id (which always appear together).

Anchor

A named point on a Web page. The same tag is used to create hyperlinks and anchors.

Caution

In the new XHTML and XML standards (which will eventually replace HTML), the W3C is calling for the use of a new attribute for the <a> tag (called id) to replace the name attribute. The smart thing to do (to make sure that you comply with the new standard when it is released) is to use both attributes in your documents. To avoid problems, use the same value for both attributes, for example, if name="dogs" then as well.

The <a> tag also enables you to name an anchor (or bookmark) in your document with the name and id attributes. HTML then enables you to use the anchor tag to point directly to that bookmark. Figure 4.1 demonstrates how the example in the previous paragraph might look in HTML. Figure 4.2 shows that same document in the browser.

Figure 4.1. Notice how the href attribute points to the location named by the name and id attributes.

Figure 4.2. The <a> tag with the HRef attribute is highlighted, but the <a> tag with the name and id attributes is not.

Caution

The <a href> tag includes the same URL format you've seen before, but also includes the # symbol to separate the filename from the named anchor.

Tip

When naming anchors, remember to keep the names short and not to use spaces. These aren't HTML requirements, but following these guidelines certainly makes linking easier. Look at the example in Figure 4.1 again. The named anchor for the Red, White, and Blue article is the abbreviated red.

Linking to an Anchor in Another Page

Creating a hyperlink to an anchor in another page requires only one more element: the URL. As you learned before, you can link to an anchor in a file on your own Web site, as shown in Figure 4.3, or you can link to a known anchor in a file on another Web site. The keyword in that sentence is known. You can't link to a specific spot on a file unless that spot is already recognized by the Web browser as a named anchor.

Figure 4.3. Notice that each href attribute includes a folder name (articles), a filename (colors.htm), and the specific anchor name (red).

Tip

You can use style sheets to add visual interest to your hyperlinks. Lesson 5, "Adding Your Own Style," will show you how.

Table 4.1 lists the HTML tags that were discussed in this lesson.

Table 4.1. HTML Tags Used in This Lesson

HTML Tag	Closing	Description of Use
<a href="...">	</a>	Surrounds text that links to another location.
<a name="...">	</a>	Surrounds text that is linked to.
<a >	</a>	Same as <a name>, but might soon replace it. Use them together as: <a name="..." >.

In this lesson, you've learned:

• Anchor tags come with three attributes: HRef (which links to someplace), and name and id (which link from someplace).

• You can copy the URL of any Web page from your browser and paste it between the quotes of the href attribute in your <a> tag.

• The same HRef attribute links to email addresses, to other pages of your own Web site, or even to other files on your own computer.