How To Make Lunch (HTML) - IDs, anchors, and targets
Let me just say this first: I had trouble coming up with a good title, and I was eating lunch as I wrote this, so there's the story behind the title. Anyways, I've been looking around all the coding help pages here on Neo -- and if you're one of those site owners, congratulations on a job well done -- but there's always this one thing that irks me (and my Meepit legion). It's about anchored pages and somehow 75% of the pages I've looked at utilize an old, outdated idea (in Meepit terms, it existed back in the reign of the Feepit). I don't blame the page owners so much as I do whoever taught them or what resources they used to teach themselves. If you aren't HTML-savvy, now's the time to click away. If you are, or just want to learn new things, or want to correct existing knowledge, here's the place to be. Also, in this article, I substitute the angle brackets used in HTML for curly brackets, as the NT submission has trouble processing the angle brackets. As such, try not to get confused between the substituted HTML tags and the brackets used in CSS. To help with that, I have bolded all the HTML tags.
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:
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:
#one <top: 50px;left:100px;opacity:0.25>
<a href="#one"> Target element with ID one</a>
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.
Richard, Unofficial Meepit Organization Code Guru (Who has by now finished his lunch and is waiting for a snack)
Search the Neopian Times