The problem with invalid html

21 September 2010 chennai

I never really cared about validity of HTML I write until I faced this problem.

Not that I was not aware of markup validity, but in practice, I had never faced a problem due to invalid html. Browsers generally display it just fine. Also, most of my markup is generated by the framework I use (ruby on rails), so I cared even less.

The problem is that I am trying to insert some html in an element using the Jquery .html() method, and it just fails. As usual, because it is javascript, it doesn’t show up any errors - just that the thing doesn’t work. I am using Firebug, so I notice there is some vague error. Did google search, and still no clue on what went wrong. Read all the .html() documentation on the jquery site, and a very small hint - someone in the comments section says something like you can’t claim it went wrong if your html is invalid.

So I start experimenting. Instead of asking it to render all the big markup, I push a small piece of markup that I think should be safely valid, and it works. Next I go to the w3c html validator, and check the markup I was trying to insert. And it very nicely points out all the mistakes. Next I remove/change the problem elements, and .html() works.

My learnings from this experience (in no particular order):

  • Having custom attributes makes the markup invalid. <div myAttribute="value"></div> is invalid. It might work thought. And can be used in a particular way in HTML5
  • Custom tags have another problem. If in future, a tag of the same name is introduced, your site may not work.
  • html should be written like XML. And it should follow its DOCTYPE. And mentioning DOCTYPE is necessary.
  • Many html elements are not allowed with-in others. eg - heading tags within paragraph tags is invalid.
  • Checking markup validity is easy.
  • Character encoding should also be mentioned.
  • Using valid html markup is not tough.
  • Browser errors / firebug errors should not be ignored even if the thing is working.

And,

  • It is worth learning more about Xhtml/DOCTYPE/encoding, and the logic behind the standards.
blog comments powered by Disqus