Looking for internal links/anchors on a page? Look for "A ID" or "DIV ID" in addition to "A NAME"

If you know what named anchors are (most typically created with A NAME tags) and what they do, and you're ever looking for them in a page whose internal contents you want to link to, did you know that an alternative that may be used (to look for) would be the A tag and its ID attribute, or DIV and its ID? What's the use in knowing this?

What if you want create a URL to link to a particular part of someone else's page, and they didn't offer any such links, but may have offered such internal anchors. When I wanted that, I've been looking at the source of the HTML document for only A NAME tags, and I didn't realize until that A ID or DIV ID tags (or even H tags like H3 ID, and there may be others, too) could be used. IF the above isn't enough info for you to take this ball and run with it, here's more info.

Background

Some readers will know that when an HTML page has lots of content, it can be helpful for the page creator to offer internal link points, or "named anchors", whereby readers can click a link and jump to a point specific point (the anchor) within the page. Better, still, they can also bookmark (and share) such a link so that on returning to the page they jump right to that specific part of it.

But sometimes you come upon a page which has no such apparent internal links. You may really wish you could offer someone else a way to link to a specific part of the page, but you see none. If you're savvy, you may do a "view source" on the page, to look for any named anchor. Those who know about these things would look for a tag like <a name="something"> near their desired content. But what if you don't see one? Are you stuck? Is there no way to give someone a link to the page that jumps right to that desired part of the page? I thought so, for 10 years, until today.

If you're not familiar with named anchors, here's are some examples of one.

Using "A NAME"

Most know that Amazon pages are very content rich, and sometimes you want to jump just to a specific section of the deep page. For instance, the URL for a book I've recently contributed to is http://www.amazon.com/dp/032151548X . But one might want to jump to the reviews for a book, or give out a link that goes to them, and that would be http://www.amazon.com/dp/032151548X#customerReviews .

Notice the difference? The #customerReviews jumps right to the reviews. That's an anchor, and the anchor is defined in that page using <a name="customerReviews"> right above the reviews section.

(PS If you like the book above and might want to buy it, could you consider using this link , instead, which while more complicated, will give me some small credit for your purchase. :-) And while we're at it, it gives me a chance to show you how to add an anchor in such a URL that has a query string (the stuff after the ?). You just add it to the end of the query string, in other words, the end URL.)

But I've sometimes found pages that had no link to such a section, and when I viewed the source, I saw no A NAME tag. I assumed that meant I could not offer anyone a link to a specific portion of the page. Now I know I can. A page author could have used any of a few alternatives, so we need to look for these as well when we want to know if a page has an internal link we could use.

Using "A ID"

The site woot.com has a help page (http://www.woot.com/WhatIsWoot.aspx ) with LOTs of content, but they've helpfully provided a list of the named anchors down the left, so if you wanted to jump instead directly to the portion of the page explaining, "what is woot?", you could instead click that--or share the URL with someone to go to http://www.woot.com/WhatIsWoot.aspx#q1 . Note the #q1. Again, that's the  anchor reference.

But if you viewed the code for that portion of the page, you'd see it has the tag: <a id="q1">What is Woot and who's behind it?</a>. Aha, so it's not just A NAME tags, but also A ID tags that do this sort of anchoring.

Using "H2 ID"

But as I started researching this blog entry, I learned that there are still other  ways folks may offer anchor links. For instance, if you view the Adobe products page (http://www.adobe.com/products/) you'll notice that they have links to categories of products, such as that for digital imaging (http://www.adobe.com/products/#digital_imaging ). Well, if you do a view source on that page, you'll see that this section is reachable because the HTML that precedes it uses: <h3 id="digital_imaging"> . Wow. I never knew that anything but an A tag supported this.

Using "DIV ID"

But what really started me looking into this was that I found that one of my blogs (carehart.org/blog) used yet another way to anchor such linkable content. I wanted to point someone to a specific comment, and when I looked, I noticed that it used DIV ID instead. This isn't the comment I wanted to share, but it makes the point. Consider the URL to this blog entry: http://carehart.org/blog/client/index.cfm/2006/11/23/deepfried_turkey (a timely one for the season, though it's from last year). If I wanted to point someone to a specific comment, I could use http://carehart.org/blog/client/index.cfm/2006/11/23/deepfried_turkey#c1A537F79-99B4-4809-872F26D699F70DC1

The code to make that latter link work is via code doing this: <div id="c1A537F79-99B4-4809-872F26D699F70DC1">

Conclusion

So there you have it. At least 3 ways that a page may do anchoring, so if you're looking sometime for an anchor by which to offer a URL to someone, so they jump to a specific part of a page, don't look just for A NAME tags, but look for ID attributes for tags like A, DIV, Hx, and so on. Drop its value into the url (after the filename, and before--not after--any query string data), and see if that doesn't give you a deep link into the page.

Hope that may help someone else.

links: digg this    del.icio.us    technorati    reddit