...

View Full Version : Anchor Tag: Intra-Document Linking, Proper Style



Sayako
05-19-2010, 12:55 AM
Hello there! I've searched the forums and the internet at large for information related to my question, but I can't seem to find anything conclusive. I was hoping you could help me.

I have a website with multiple pages. I manage as much of the formatting/visual presentation as possible using CSS. On each page, there is a little area up near the top with a list of what's contained in the document -- the contents. By clicking on the items in this list, the user jumps down to the pertinent area on the same page.

The contents is constructed like this:

<a href="#item01">Item #1</a>
<a href="#item02">Item #2</a>
<a href="#item03">Item #3</a>

Later on down the page, I have the following code (option #1):

<h2><a name="item01">Item #1</a></h2>
<p>Information about Item #1.</p>
<h2><a name="item02">Item #2</a></h2>
<p>Information about Item #2.</p>
<h2><a name="item03">Item #3</a></h2>
<p>Information about Item #3.</p>

However, I COULD write the same code like this instead (option #2):

<h2><a name="item01"></a>Item #1</h2>
<p>Information about Item #1.</p>
<h2><a name="item02"></a>Item #2</h2>
<p>Information about Item #2.</p>
<h2><a name="item03"></a>Item #3</h2>
<p>Information about Item #3.</p>

The only difference is the location of the </a> closing tag.

I suspect that option #1 is more correct. Since I think of the target of the link in the contents as being the title of the pertinent section of the page, it makes sense to me to include the entire target heading (e.g., <h2>Item #1</h2>) within anchor tags, and it seems reasonable that machines (like search engines) will be designed to expect this.

However, option #1 presents a visual problem. Because the text of a given header is included within anchor tags, it behaves visually like a regular link that leads to somewhere off of the current page (i.e., like <a href="www.google.com">Google</a>). This means that, among other things, it becomes underlined when the cursor hovers over it.

It seems to me that the only way to fix this problem is to add a new class in CSS specifically for these anchor tags, but that's annoying and seems unnecessary -- you would think that the browser would recognize that this anchor is the target of an intra-page link, so it wouldn't treat it the same as a link that links to an external page...but that doesn't seem to be the case.

So here's the question: what are the benefits of option #1 over option #2, and vice versa? Which should I use? Which is more "correct"? Is there really any reason to include text within the tags of an anchor that serves as the target for an intra-page link? Additionally, is the use of the name attribute advisable? Should I use the id attribute instead? Should I just stick the id attribute into my <h2> tag instead and do away with anchors entirely? (Of course, that same trick wouldn't work if for some reason I wanted to jump to a line in the middle of a paragraph that wasn't already contained in html tags of some kind.)

Thanks in advance.

Arbitrator
05-19-2010, 03:44 AM
I suspect that option #1 is more correct. Since I think of the target of the link in the contents as being the title of the pertinent section of the page, it makes sense to me to include the entire target heading (e.g., <h2>Item #1</h2>) within anchor tags, and it seems reasonable that machines (like search engines) will be designed to expect this.If the items are indeed second-level headings, then "option #1" is the most correct although the code could be improved. The name attribute is deprecated on every element except form control elements (e.g., input); use the id attribute instead. Further, since you appear to only need the anchor elements to serve as anchors (as opposed to links), your code would be less verbose if you simply set the ID attribute for each of the h2 elements:


<h2 id="item01">Item #1</h2>


However, option #1 presents a visual problem. Because the text of a given header is included within anchor tags, it behaves visually like a regular link that leads to somewhere off of the current page (i.e., like <a href="www.google.com">Google</a>). This means that, among other things, it becomes underlined when the cursor hovers over it.

It seems to me that the only way to fix this problem is to add a new class in CSS specifically for these anchor tags, but that's annoying and seems unnecessary -- you would think that the browser would recognize that this anchor is the target of an intra-page link, so it wouldn't treat it the same as a link that links to an external page...but that doesn't seem to be the case.I would not expect any style to be assigned given that the anchor elements lack href attributes.

However, if you are still having formatting issues, assigning classes can be avoided by using specific selectors. Below are several examples of varying specificity:


h2 a { /* ... */ } /* CSS1 */
h2 a[name] { /* ... */ } /* CSS2.1; the |name| attribute is deprecated */
h2 a[name^="item"] { /* ... */ } /* CSS2.1; the |name| attribute is deprecated */
h2 a[id] { /* CSS2.1; ... */ } /* CSS2.1 */
h2 a[id^="item"] { /* ... */ } /* CSS3 Selectors */
h2 > a[id] { /* ... */ } /* CSS2.1 */
h2 > a[id^="item"] { /* ... */ } /* CSS3 Selectors */
h2 > a[id]:only-child { /* ... */ } /* CSS3 Selectors */
h2 > a[id^="item"]:only-child { /* ... */ } /* CSS3 Selectors */
h2[id] { /* ... */ } /* CSS2.1 */
h2[id^="item"] { /* ... */ } /* CSS3 Selectors */


Should I just stick the id attribute into my <h2> tag instead and do away with anchors entirely? (Of course, that same trick wouldn't work if for some reason I wanted to jump to a line in the middle of a paragraph that wasn't already contained in html tags of some kind.)If you want to do that, simply use a span element. You can also use an anchor element for that, although, as far as I'm aware, it makes no difference. (I'm not certain if there's a best practice related to that.)

Basically, add elements if they are needed as anchors while using existing elements (with IDs), if possible. You want your code to remain uncluttered.

Sayako
05-19-2010, 11:06 AM
Thank you!

I just learned today (after posting here) that in CSS, you can select HTML tags based on what attributes are used, or based on those attributes' values.

Your other comments were helpful, too. I'll just use the id attribute from this point on, then.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum