Chapter 7: Anchors

 < Day Day Up > 



HTML links, or anchors as they are properly called, enable us to point not only to files, but also to specific sections of a page, and can be a handy way of "linking with precision," narrowing the focus of a destination. In this chapter, we'll take a look at the difference between four different methods of anchoring, noting what benefits either method may gain. We'll also look at the title attribute, and how it can improve a link's accessibility, as well as the styling of links using CSS.

When Pointing to a Specific Portion of a Page, What is the Best Way to Mark up an Anchor?

It's a common web design action—you'd like to link to a specific section of a web page, either within the current page that the user is on, or within a separate page. You may choose to do this one of the four ways discussed in the following sections.

Let's set up the examples by saying that our intention is to link to a particular heading within the same page.

Method A: An Empty Name

 <p><a href="#oranges">About Oranges</a></p> ... some text here ... <a name="oranges"></a> <h2>Oranges Are Tasty</h2> ... more text here ... 

Using an empty anchor tag along with the name attribute to mark a specific point will probably look very familiar to you. By placing the empty <a> element and closing </a> just above the heading tag and linking to it (using the # character, followed by the value matching the name attribute), it will allow us to link to that specific portion of the page, which is especially helpful if the page consists of a long, scrolling list of items that we'd like to point to individually.

Figure 7-1 shows the results of clicking the "About Oranges" link, anchoring the page to where we've marked the <a name="oranges"></a>, just above the heading.

click to expand
Figure 7-1: Demonstration of clicking a link to a named anchor

It works great, although it's a bit unsemantic to just waste an empty element as the marker. We can improve on that by taking a look at Method B.

Method B: It's all in a Name

 <p><a href="#oranges">About Oranges</a></p> ... some text here ... <h2><a name="oranges">Oranges Are Tasty</a></h2> ... more text here ... 

As with Method A, we're still using the <a> tag with the name attribute, yet this time we're wrapping it around the heading that we're intending to target. It does makes a little more semantic sense this way; in Method A, we're giving meaning to . . . well, nothing, whereas in Method B, we're saying that not only is this a heading tag, but it's also an anchored section of the page.

Beware of Global <a> Styling

One thing to watch out for if using Method B is that if you're setting a global CSS style for all <a> elements (color, size, decoration, etc.), that styling would override any styles you have for <h2> elements. This would occur because the <a> tag, in this example, is a child element and sits inside of the <h2> that surrounds it all.

For instance, if in your CSS you had a declaration that went something like this:

 a {   color: green;   font-weight: bold;   text-decoration: underline;   } 

using Method B along with the preceding CSS would result in the heading being green, bold, and underlined along with any other <a> elements on the page—perhaps different from the way you'd like <h2> elements to be styled.

We can avoid this (and gain some other benefits) by using the :link pseudo-class for <a> elements, which we'll go over in detail in the "Extra credit" section, later in this chapter.

Richer Name Attribute

One upside to using Method B, or Method A for that matter, is that the name attribute has the ability to handle richer anchor names—more specifically, the ability to use character entities in the names.

For instance, if using Method B, you could do this (where the entity &#233; represents the "e"):

 <p><a href="#resum&#233;">My Resum&#233;</a></p> ... some text here ... <h2><a name="resum&233;">Dan's Resum&#233;</a></h2> ... more text here ... 

This becomes more important when dealing with foreign languages and the characters that stray from the English alphabet.

But there are a few more methods to investigate—the first of which eliminates completely the need for using the <a> tag to set the anchor point. Let's take a close look at Method C.

Method C: Lose the Name

 <p><a href="#oranges">About Oranges</a></p> ... some text here ... <h2 >Oranges Are Tasty</h2> ... more text here ... 

Aha! The id attribute acts just like the name attribute, in that it also sets an anchor point on the page. In addition, by using Method C, we can eliminate the need for the extra <a> element that's necessary when going with the name attribute in Methods A and B. We're cutting down on code, and that of course is always a good thing.

Because the id attribute can be added to any element, we can easily anchor anything we'd like on the page. In this case, we're choosing to anchor the heading, but we could also just as easily anchor a <div>, <form>, <p>, <ul>—and the list goes on.

Two Birds with One Stone

Another benefit to using Method C lies in the fact that, many times, we can utilize a preexisting id attribute that we've added for the purposes of style or scripting. Because of this, we'll eliminate the need to add additional code in order to set the anchor point.

For instance, let's say you had a comments form at the bottom of a long page that you'd like to link to nearer the top. This form had an already in place, particularly for purposes of styling it uniquely. We could link to that id as an anchor—without having to insert an <a> element with the name attribute.

The code would look something like this:

 <p><a href="#comments">Add a Comment!</a></p> ... a lot of text here ... <form  action="/path/to/script"> ... form elements here ... </form> 

Also, if your page requires a long scroll, you could make it easy for users to get "back to top" by adding a link at the bottom that refers to a top-level element's id (for instance, a logo or header).

start sidebar

It's a good idea to point out that, while it's the most obvious choice, it's best to avoid using the name "top" when anchoring. There are some browsers that have that particular name reserved and using it can cause mixed results. It's best to choose something similar, knowing that it won't cause problems. #genesis perhaps? #utmost? You get the idea.

end sidebar

Older Browsers and the Id Attribute

An important downside to mention when using only the id attribute for anchors is that some older browsers don't recognize them. Ouch. This is certainly something to consider when marking up your own anchors, and an unfortunate case for backward compatibility. Let's take a look at the final example, Method D.

Method D: The All-In-One

 <p><a href="#oranges">About Oranges</a></p> ... some text here ... <h2><a  name="oranges">Oranges Are Tasty</a></h2> ... more text here ... 

If both forward and backward compatibility are the most important points for you when building anchors, then this method should please everyone. Older and newer browsers alike will recognize the named anchor tag—but because the name attribute is depreciated by the W3C in the XHTML 1.0 recommendation (http://www.w3.org/TR/xhtml1/#C_8), you're covered for the future using the id attribute as well.

As with Method B, we'll have to beware of any global styling that may be done on the <a> tag itself.

Sharing Names

If choosing to go with Method D, it's perfectly acceptable (and probably convenient) to use the same value for both the id and name attributes—but only when they are contained in a single element. Furthermore, this is allowed only within a few certain elements: <a>, <applet>, <form>, <frame>, <iframe>, <img>, and <map>, to be exact. For this reason, we've moved the from the <h2> tag to the anchor within.

Now that we've looked at four different methods to create anchors, let's summarize what each has to offer.



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net