HTML validators

[garettharper]

Hey guys,

Many of the websites submitted for review could use a tool such as a HTML validator and I was wondering, what options are out there and which is best? Lets stick to free ones for now, as many of these budding webmasters aren't looking to spend money at this point...

[greeneagle]

http://validator.w3.org/ for HTML
http://jigsaw.w3.org/css-validator/ for CSS

Ken

[Lerza]

Both validators that Ken provided are from the W3C (World Wide Web Consortium) and reflect accepted web standards.

Results from these validators are to be taken quite seriously.

[johngroup]

If you use Firefox, there's a W3C validator extension as well.

[bj]

I know I'm sticking my foot in it but believe it or not, the w3 css validator is not the best. There are one or two things it shows as errors on the css validator that according to their own specs are not. One that I hit a lot is this:

.clearA {
overflow: hidden;
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

This is a standard bit of code that is usually used in a br tag to clear floats. If put through the w3 css validator in a stylesheet, it will cause this error:

Line: 191 Context : .clearA

Invalid number : line-height Parse Error - [empty string]

The rule for line-height reads like this:

"The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited."

Null is not a negative value. It is a null value. A null value is also not an empty string.

Yes, if you're just starting out it can pick up a lot of the common errors, but don't expect it to be the be all and end all. And if something doesn't make sense, look it up in the spec.

I also highly recommend htmltidy for cleaning up your html code. It can also be used to "translate" an html 4.0 doc into xhtml, which I've used more than once to clean up someone else's nasty code with all the TAGS in CAPITAL LETTERS. :)

[dharrison]

Originally Posted by bj

I know I'm sticking my foot in it but believe it or not, the w3 css validator is not the best. There are one or two things it shows as errors on the css validator that according to their own specs are not. One that I hit a lot is this:

.clearA {
overflow: hidden;
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

This is a standard bit of code that is usually used in a br tag to clear floats. If put through the w3 css validator in a stylesheet, it will cause this error:

Line: 191 Context : .clearA

Invalid number : line-height Parse Error - [empty string]

The rule for line-height reads like this:

"The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited."

Null is not a negative value. It is a null value. A null value is also not an empty string.

Yes, if you're just starting out it can pick up a lot of the common errors, but don't expect it to be the be all and end all. And if something doesn't make sense, look it up in the spec.

I also highly recommend htmltidy for cleaning up your html code. It can also be used to "translate" an html 4.0 doc into xhtml, which I've used more than once to clean up someone else's nasty code with all the TAGS in CAPITAL LETTERS. :)

Although I do use W3C CSS I do agree that it is not the best.

I can get my stylesheet validated with no problem on W3C. It just throws up a long list of warnings which basically says to me "Oh, your CSS is fine, but ...." What good is that?

And it picks up really anal things as well. Like "No Background color on Heading X".

I am intrigued to try htmltidy based on what you say bj. That should come in handy for when I next have to clean up a site for a client (God I love this community!). ;)

I use FireFox a lot and I am only just getting to grips with its many functions. Is their HTML/CSS validator just as good as W3C?

[bj]

Unfortunately htmltidy doesn't have css validation. I wish it did.

The best two tools for css are both extensions for Firefox.

The Aardvark FF extension-- this is my MOST USED TOOL. Bar none. Why? It's simple to use and it actually shows what div is "pushing" on what, so when I edit my stylesheet I know instantly where the problem lies. Using it has actually made me a better coder, since I now know which mistakes to avoid.

The other tool is Chris Pederick's Web Developer Toolbar, but unfortunately the validation just brings you to the same w3 css validator.

The BEST way to validate CSS is to first run both the xhtml/css in the w3 validators, and then post the page to the CSS-Discuss Mailgroup. If you have any mistakes in your markup, they'll gleefully point them out. :)

[bj]

One more thing.

I can get my stylesheet validated with no problem on W3C. It just throws up a long list of warnings which basically says to me "Oh, your CSS is fine, but ...." What good is that?

And it picks up really anal things as well. Like "No Background color on Heading X".

Though I find those warnings just as annoying as you do, they are there for a reason. Just go into your browser settings and switch your "default" background color to fuscia . . . and the one time you make the mistake of NOT setting the white background that's always been your browser default, it will be a REAL eye opener!

[greeneagle]

I am starting to think that the newer-found interest in making sure to declare background colors, even if "transparant" may reflect how the SE's could be looking for CSS SPAM.

I could be "off" there, but it makes sense and it's really no special effort for the extra mile. I haven't had time to check that aspect more thoroughly.

Ken

[bj]

Hmm, I guess that's possible.

There was a discussion awhile ago on Matt Cutts' blog about that, but it was also brought to his attention by more than one person that a lot of things we do for accessibility can be construed as "deceptive" even though the intent is not. One thing is though that usually when an image replacement technique is used it's simply for a short headline, and in only one place on the page, which we'd all hope can and will be filtered out of the algorithm.