Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

104 LESSON 6: Working with Links

Linking to Specific Places Within Documents

The links you’ve created so far in this lesson have been from one point in a page to

another page. But what if, rather than linking to that second page in general, you want to

link to a specific place within that page—for example, to the fourth major section down?

You can do so by referring to the ID of the element you want to link to specifically in

the URL in your link. When you follow the link with your browser, the browser will load

the second page and then scroll down to the element you specify. (Figure 6.10 shows an

example.)

softfruits.html berries.html

Please choose a subtopic:

Soft Fruits

*Strawberries

*Cane Fruits:

*Bush Fruits:

*Blackberries

*Raspberries

*Loganberries

*Blueberries

*Huckleberries

Strawberries are an

herbaceous plant

Strawberries

Blackberries

Blueberries

Blackberries grow on canes

Blueberries grow on bushes

in colder climates

You can use links to jump to a specific element within the same page. For example, you

can assign IDs to the headings at the beginning of each section and include a table of

contents at the top of the page that has links to the sections.

The id attribute can be used with any element on a page. The only requirement is that

each ID is unique within that page. For example, here’s a heading with an ID:

<h2 id="contents">Table of Contents</a>

IDs are also often used when styling pages. I’ll discuss that more in Lesson 8, “Using

CSS to Style a Site.”

Creating Links and Anchors

When you create links using <a>, the link has two parts: the href attribute in the opening

<a>tag, and the text between the opening and closing tags that serves as a hot spot for

the link.

FIGURE 6.10

Links and anchors.