When dealing with the W3C’s HTML Validator, you know that the error messages try to be helpful. But when you are new to HTML and Web design in general, the messages can be hard to decode.
One such error a student of mine recently encountered. When they ran a Web site through the HTML validator, she found an error message that confused her:
general entity “FID” not defined and no default entity .
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
HTML Character Entities
When dealing with a markup language that has markers like and > to indicate the start and end of tags is fairly simple. But when you want to actually use characters like and > when you want to talk about tags or you want to demonstrated how much greater this part of this sentence is > compared to this side.
It turns out that HTML has a method for handling these cases. You use a series of characters typed out in the right order in the HTML code to represent one character. For example, typing out < and > the HTML file will produce and >. Other examples include copyright (©) and em-dashes (&em;).
The ampersand character is a trigger that tells the browser that a character entity is about to be formed and should be transformed when it is rendered on the screen.
But what happens when you want to present an actual ampersand and not tell the browser it’s some other character? Well, in this case, the only way out of this situation is through! There’s a character entity for ampersands and it looks like this & if you were to write in HTML code.
For more information on character entities, check the listing of XML and HTML character entities.
But What About the HTML Error?
The “FID” error the student found is a little confusing, especially since it’s not really an error in the sense we have a malformed tag called “FID” that we need to fix.
Rather what’s happening is that the long link has an ampersand in its query string that is not properly formed. Since ampersands are supposed to be escaped and they aren’t in the long link in the source code, the browser is expecting the characters after the ampersand to be one of those special HTML characters it knows. Since it’s not, it’s throwing up it’s hands and giving up.
So, when placing links with query strings in your Web document, be sure to write out the character for ampersand in the href value:
add-cart.html?isbn=9780470177082&id=023
That removes the error and allows you to get on with life™!
Getting More Out of the W3C Validator
When checking out sites with the validator, you can click on an option called “Verbose Output” which will give you more insight into error or probable cause of the error messages you are receiving.
However, I’ve found that most people don’t know about this option even though Zeldman made W3C put it in way back in 2003, a magical time when we didn’t have to be told to leave Britney alone.
To help with that, I’ve made a bookmarklet which sets Verbose Output on when testing a page for validation.
To use it, first drag this link to your browser’s bookmark menu:
Then surf over to a site you want to check out and press the “HTML Validation (Verbose)” bookmark in your browser’s menu.
You are automatically taken to the validation report with Verbose Output and, as an added bonus, Show Source already turned on.
I remember figuring out the ampersand error a while back too, for the longest time I didn’t think adding the html entity $amp; to a link would work. I had assumed that’d end up in the link too but it sure doesn’t!
I did not, however, know about the verbose error output option, I’ll definitely have to check that out.
@Steve: Verbose error output is handy when you need a little bit more explanation as to why the validator might flag something. But I’ve found having the View Source option turned on by default more helpful personally. It’s nice to be able to see an error and link directly to the part in the code.
I couldn’t agree more Christopher, I have a Firefox extension called HTML Validator that I got from http://users.skynet.be/mgueury/mozilla/. It attaches itself to the status bar at the bottom and also shows errors right in the view source in browser.
There were 3 ampersands in the W3C CSS validator-generated URL referrer link-back provided with the validation results. When I added the referrer code to my document it no longer validated. I made the adjustments and now it works like it is supposed to! Thank you for sharing your insight, Christopher!