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