Jeremy Osborn: Designer, Educator, Writer

Jul 13

Html “duh” moment #56372

I was recently doing a short tutorial on how to create named anchors in html. This is html 101 material, a basic concept most people learn on their first day or two of class. It’s a concept I’ve taught dozens of times before. However, today I learned something about anchors that made me think I should go back to remedial html class.

As a refresher, when you want to link to a section of a page rather than the top, you place a named anchor somewhere in your code. That might look like this:

<a name="myanchor">Yakety yak yak</a>

Then, you need to link to this named anchor using the following syntax:

Click <a href="#myanchor">here</a> for the yaks.

Ok, so far so good. Now, I was double-checking the details for the name attribute on the W3C site, a place I seldom visit because it usually ends up  scaring and confusing me. This time, I ran into something that was surprising. Because the name attribute and the id attribute both share common syntax: the pound sign (#), this means you can link to an id the same way you do with the name attribute.

So for example, I have an id named “social” at the bottom of my home page. I can directly link to this using the following syntax:

<a href="http:www.jeremyosborn.com#social">social</a>

In real usage it works like this

This tells me I might have to go back to remedial html class, because I had either overlooked or forgotten this. Looking at the syntax it makes perfect sense, both the name attribute and the id attribute use the ‘#’ sign. This knowledge exposes my old skool HTML training as I was using named anchors long before I started flinging Id’s all around with CSS.

Now that the veil has lifted from my eyes, I can see how this knowledge could be convenient when trying to link to an external site. You can  try this yourself in the browser, because all you need is the id name. For example, to link to the footer on Dan Cederholm’s Simplebits site, simply type http://www.simplebits.com/#extra into your browser. Crazy ey? (Of course, feel free to tell me everyone knew this already and I must be either a fraud or a dope).

The “duh” moment I had is that I’ve been targeting Id names for a while, it’s what allows for all that juicy Ajax goodness as in this example that smoothly scrolls your page to your anchors. Looking ahead, a  peek into the future tells me that naming everything with ids is the way the W3C wants us to go. According to the HTML 5 spec the “name” attribute will become obsolete, so goodbye “name” we hardly knew ye . . ..

Tags: , , , ,

2 Responses to “Html “duh” moment #56372

  1. Johannes says:

    Take it to the bridge

  2. jeff says:

    I was aware of the id linking thing, but the head scratcher about the name attribute for me has always been form elements. As I understand it, name is deprecated for most/all elements, but forms seem to be the stubborn hold out. I suspect it’s a dicey subject given all the server side scripts floating around that use name in favor of id.

Leave a Reply

Jeremy Osborn's Blog

This is the weblog of Jeremy Osborn, a designer, educator and writer living in the Boston area. I write here about design, technology and other matters. Subscribe to the jeremyosborn.com RSS feed and follow me on Twitter.

Your message has been sent successfully!