One of the best ways to ensure that your pages look and function the same on as many browser variants as possible
is to use the W3C's own HTML/XHTML Validation Service to check your pages for errors and inconsistencies.
As the W3C icons at the bottom of every htmlfixit.com page show, we validate using them on a regular basis whenever
we add new pages to the site.
We have discussed HTML to XHTML in previous tutorials, so we won't go over old ground. Suffice it to say that just
because a page looks ok in Internet Explorer doesn't mean that the HTML code behind it is sound. IE is a notoriously
lax browser, it will accept pretty much anything and try to display it properly. Great for users, but not so good for
developers as they get lazy and stop checking their HTML for errors.
My personal preference for a browser is Mozilla I use it for pretty much everything now days.
Its W3C compliant and has allot of cool features like "tabbed browsing", "spam controls", "popup blockers" and lots of other cool stuff.
Best of all its free. And it has allot of developer friendly features like its JavaScript console/debugger, DOM inspector and
the Mozilla HTML composer, which is a GUI web page development tool.
Check it out, you won't regret it. As an added benefit, you know almost immediately when you have made an error in your HTML when
you are using Mozilla, which is great for developing clean pages.
Anyway, onto the point of this little tute. Once you have written a page, its important to check it for errors and the easiest way to do that
is to use the W3C's own validator. (The W3C are the organization responsible for developing HTML/XHTML).
The validator is located at: http://validator.w3.org/ and all you have to do
is paste your address into the box provided and click "validate". (It is important that your page contains a valid
doc type as its first line. (see this page for
info on Doc type declarations.)
If you have errors, (and most people have many on their pages that they were not aware of) you will get a list of
error messages that will likely not make any sense to you at all. That is the reason I have written this page.
Below is a list of the error messages in no particular order and an attempt to explain what they mean.
This message means you have not specified what type of document you wish to validate. you need to add a doc type declaration to the top of your pages. See: this page For more info on document types.
The word "head" could be replaced with several tags, basically it just means that something that should be in the tags (in this case the head tags) isn't there, or isn't complete. In most cases with the head tag the problem is that you've forgotten the title tags.
The characters used in all the different lanugages of the world are classed by character encodings. You need to
tell the validator what character encoding it should use when validating your page. the most common are:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
and:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
These first is the western european character set and the second is essentially the same with the addition of the
Euro dollar character. If your site is in english, the chances are either of these will work for you.
Most often seen in JavaScript or CSS declarations. you have not specified the file type by adding:
type="text/css" or type="text/javascript" in your <style> and/or <script> tags.
This error just means that the element the validator has indicated is not a recognized tag for your doc type. In other words, you have either used a tag from another doc type, or you are using the wrong doc type for your needs.
This error indicates that you have used an attribute that doesn't officially exist in your doc type. or that you
have used it in the wrong place.
For example, many people put "border='0'" in their frameset tags on frame pages, the border attribute is not
permissible in the frameset tag, instead it should go in the frame src tag. Other places this error message will
appear is in body tag and table/td and tr tags. But really any tag that can take attributes will result in this
error if you use unsupported attributes.
This error is a common one, and is often the result of putting embed tags, or flash content or other external content
content in your page. The correct way of doing this now is to use the "object" tag.
See:
this page for more info on the object tag and its usage.
All images in a page should have alt tags, even spacer gifs and other alignment images.
If you like you can just put alt=' ' in your img tags to remove these errors.
Alt tags are there to help people with image challenged browsers, (and sight challanged people) to get an
explanation of what the images were representing.
For those getting this message about attributes other then ALT, the story is the same. The attribute mentioned
is compulsory and you should add it to the relevant tags on your page.
You have closed a tag that you didn't open in the first place.
For example, you might have a </p> in your page for which you didn't have a corresponding <p> opening
tag.
Its really important that all your tags have open and close tags, this is particularly important with XHTML, both
strict and transitional.
This error just means that the element the validator has indicated is not a recognized tag for your doc type. In other words, the validator doesn't think the tag is a real tag.
Basically this one is just saying that you have a tag in the wrong place.
maybe you have declared your styles or meta tags outside your head /head tags or you have HTML code
outside the body /body tags, things of that nature.
You have chosen a doc type which states that all open tags have corresponding closing tags but you have forgotten to close the tag mentioned in the error.
This cute little message is just telling you where the start tag for the previously listed error. so if you forgot to close a tag, this will tell you where the start tag you didn't close was.
This obscure message is usually the result of links in your page that contain the & char or other characters that
should have been been encoded in ASCII.
You really should encode such characters to avoid trouble. For example, & should be encoded as "&".
The reason is that the & character is used in encoding characters themselves, so when the validator sees
the & character, it tries to decode it, and if its used in a string, it will try and decode whatever follows
the &, which results in the error message.
I will add more explanations as I come across new errors, but that should get you started.
The last thing I want to do is try to explain the "foo" and "bar" references you will very likely come across on
the W3C site.
The use of "foo", "bar" and "foobar" as part of explanations and documentation long established in programming circles.
I can't say with any certainty when it started, but I can tell you want it means (I think).
Everyone has heard of "fubar" which is an uncouth method of saying "messed up real bad". Well I'm pretty sure that's
the origin of the usage of foo/bar in technical documents.
Their usage is pretty simple, they are used as placeholders or variables in explanations where the text in question
doesn't want to be specific about a term, so they replace that term with the word for, or bar, or foobar.
As an example, in the above error messages above, I could have used foo or foobar in the place of the XXXX's I used instead.
Had I the foresight to put this explanation up the top, I probably would have. :-)
I hope this helps clear up your problem. If not, please post to our forum at:
htmlfixit.com forum. with the error message you need explained and I will see what I can do for you and I'll also add
any new ones to this tute.
So if you are ready to learn more:
Back to the Tutorial Index