Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anchor Tag: Intra-Document Linking, Proper Style

    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.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Sayako View Post
    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:

    Code:
    <h2 id="item01">Item #1</h2>
    Quote Originally Posted by Sayako View Post
    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:

    Code:
    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 */
    Quote Originally Posted by Sayako View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •