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.
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.