views:

86

answers:

2

Hi all, I was thinking about Web standards, and i was wondering if we need to have valid HTML and CSS before we apply JavaScript?

Can anyone enlighten me on the relation between valid HTML, CSS and JavaScript? For instance, does invalid HTML and CSS prevent JavaScript from working correctly?

Best Regards.

+4  A: 

As much lip service as we pay to having valid HTML, browsers are extremely forgiving. The reasons for this are historical. There was (and still is) a lot of bad HTML in the beginning.

But you may get unpredictable differences between browsers with badly formed HTML. For example, different browsers may treat an unclosed tag differently.

All the markup causes to happen is to form a DOM (Document Object Model) in the browser based on how that browser interpreted it. CSS and Javascript are both applied to the DOM.

cletus
They're forgiving ... until they're not. At my last job we had to run our social media pages in harmony with client HTML, CSS and Javascript. And let me tell you, some of that stuff didn't play nice at all. You find out that certain browsers ignore unbalanced elements, incorrectly self-closed elements, etc., and some don't. The absolute worst mess to clean up was someone's poorly nested tables. Or (true story) someone who put DIV elements around all his TR elements "for the extra CSS class" that would give him.
Robusto
Sadly, I must agree. "Valid" HTML in terms of 100% W3C Compliant is a bit of overkill. Certainly all you tags must be closed, and being conistent with best practces is always good, but I've never had javascript fail on me because I missed "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"Heh.
cazlab
hi thank you for your response. Does that mean the DOCTYPE, or XHTML, or HTML does not really affects how JavaScript works?
HTMLCSS_noob
@HTML No XHTML has DOCTYPEs too http://www.htmlite.com/XH005.php
cletus
+2  A: 

I disagree with the above responses: I have had very bad times hunting through apparent javascript bugs before I remembered to validate the page I was working on. As soon as I corrected the glaring errors, the scripts worked as intended.

The most obvious problem (not one I have experienced, because I already look for that): have two elements with the same id attribute, and try to make your script that depends on that to work as intended :)

While it may be true that the level of validation needed is somewhat low, when you are banging your head against the table because your website doesn't work and you don't know why, you'll remember this fondly.

Adriano Varoli Piazza
While I don't disagree with @cletus, I do agree with your broad point. But that seems to be the point that cletus hints at: JS/CSS operates on the DOM, html forms the basis of the DOM. So if the DOM is badly-formed -from invalid (x)html- then js/css will not necessarily work (or work as intended). I'd up-vote, but I'm already out of votes for the day. =/
David Thomas
well, if the question is "do negligible html / css errors stop js from working", then cletus is right. Though CSS errors can be quite unforgiving. But in the general case, it's not. It's far cheaper and easier to check your html and CSS for validity. It's cheaper yet (but harder) to build valid html and css. I'm not talking about zealot levels of validity, but about ensuring that the DOM tree is valid and that there are no css errors.
Adriano Varoli Piazza