How To Make Lunch (HTML) - IDs, anchors, and targets

First off, the ID. To those of you who know what it is, please go on to the next paragraph. For those of you who don't, an ID in HTML is the same as a real-life ID. It's an identifier for a certain element, be it a div, an a (as in <a href... >), a span, et cetera, et cetera. Just as how each of us have our unique passport number, each ID in code can only be used once; hence, identifier. All web-related languages (HTML, CSS, JavaScript, etc) call on IDs one way or another, but what we're interested in is the symbol for an ID. It's the pound sign, the number sign, or whatever you prefer to call it: #. Let's say an element's ID is neopetsisawesome. The method to call that element would be #neopetsisawesome. How does this relate? Soon, my neofriend, soon.

Next we must take a look at the idea that I keep talking about. What I usually see when someone is trying to explain anchored pages is something along the lines of this (of course, with more flare and explanation, but I think I get my point across):

First up, we must put a link to the anchor, like so:

<a href="#one">Link text here</a>

Then, we must put where the anchor will be:

<a name="one"></a>

Now yes, that works, of course, as proven through thousands of users using that code (and it was the original method). See the pound sign in the reference? (By the way, href stands for hypertext reference) That means that it's targeting an element with ID "one." If you're wondering why the link still goes to where the <a name...> tag is, that's because the name attribute is synonymous with the ID attribute, but it's used specifically for the <a> tag. To sum it up, you can get rid of the <a name...> attribute and just give the element that you want targeted the ID. For example:

<a href="#one">Link to One</a>

-some other content here-

<div id="one">And this div will be targeted when the link is clicked</div>

The function is the same; it's just cleaner and much more streamlined than the old <a name...> method. Also, just to clarify: I've been saying that the link "targets" an element; when an element is targeted, the default function is to go to where the element is. There's also another upside to using this method as opposed to the other one, which I'll go over in the next paragraph.

Like I've said before, the reference is targeting an element with an ID of so-and-so; the keyword here being target. In CSS, there's a pseudo-selector called (wait for it...) the :target pseudo-selector (yes, with the colon). Basically, in your CSS styling, you can add that pseudo-selector to the end of and ID selector to give an element with that ID another set of styles when it is being targeted. One of the most basic examples has to do with opacity. Take the following example:

<style>

#one <top: 50px;left:100px;opacity:0.25>

#one:target <opacity:1>

...

</style>

<a href="#one"> Target element with ID one</a>

<div id="one">

-content here-

</div>

It's fairly evident what would happen when the link is clicked; div#one will be targeted, and its opacity would change from 25% (what it was originally) to 100% (what it should be when targeted). Now, a lot of styles could be applied for the target element. It could shift to the left, to the right, up or down, it could go from invisible to visible or vice versa, it could have borders, it could change its borders, it could change the font, and so much more possibilities, all waiting to be experimented with. So try that out in your next userlookup layout; it may just be the awesomest thing ever (it might even be enough to get you that lovely spotlight trophy)!

To close this article, I'd like to mention a few things. First off, my intentions aren't to criticize those who use <a name...> method, it's to enlighten them on a newer and more versatile method. Second, the <a name...> method is the original one, as I have said; the proof being a dissection, which, by the way, will also explain why the types of pages are called anchored: the a stands for anchor, and so <a href> would be anchor hypertext reference, and if an ID string were the reference, the user would be directed to where the anchor name (<a name...>) was located. Its original usage was to bookmark within a page, rather than the page itself. I'm glad to see that a more practical use has been found for it, but alas, all things evolve, and the story of the anchor is no different. Third is a warning. The name attribute is now deprecated as of HTML5. This means two things: should Neo update all of its pages to the HTML5 doctype (which, if you were wondering, is simply <!doctype>), then the name tag would become unusable and you must use the ID method instead, and if you were to code out beyond the safe, protected confines of Neopets, which is, for your information, protected by Meepit defense systems, the name tag would also be useless, unless you want to sacrifice all of HTML5's functions and versatility. Last but not least, I want to thank you all for taking the time to read through this article, and I sincerely wish that you have obtained something from it, be it information or gratitude or just another way to kill time.

Cheers,

Richard, Unofficial Meepit Organization Code Guru (Who has by now finished his lunch and is waiting for a snack)