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.
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.
- It is worth learning more about Xhtml/DOCTYPE/encoding, and the logic behind the standards.