I’m running my site through the W3C’s validator trying to get it to validate as XHTML 1.0 Strict and I’ve gotten down to a particularly sticky (at least in my experience) validation error. I’m including certain badges from various services in the site that provide their own API and code for inclusion on an external site. These badges use javascript (for the most part) to fill an element that you insert in the markup which requires a child. This means that in the end, perfectly valid markup is generated, but to the validator, all it sees is an incomplete parent-child tag which it then throws an error on.
As a caveat, I understand that I could complain to the services that their badges don’t validate. Sans this, I assume that someone has validated their code while including badges like this, and that’s what I’m interested in. Answers such as, ‘Complain to Flickr about their badge’ aren’t going to help me much.
An additional caveat: I would prefer that as much as possible the markup remains semantic. I.E. Adding an empty li tag or tr-td pair to make it validate would be an undesirable solution, even though it may be necessary. If that’s the only way it can be made to validate, oh well, but please lean answers towards semantic markup.
As an example:
<div id='twitter_div'> <h2><a href='http://twitter.com/stopsineman'>@Twitter</a></h2> <ul id='twitter_update_list'> <script type='text/javascript' src='http://twitter.com/javascripts/blogger.js'></script> <script type='text/javascript' src='http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&count=1'></script> </ul> </div> Notice the ul tags wrapping the javascript. This eventually gets filled in with lis via the script, but to the validator it only sees the unpopulated ul.
Thanks in advance!
The following fragment is valid XHTML and does the job: