When I added the Google +1 button to one of my Web sites, I noticed that the button code given by Google is not valid HTML 5. There is a HTML 5 version, but when used with i18n (for instance, in German) the JavaScript code is:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Now this isn’t valid HTML 5 because the script tag can have either a source reference (src) or some inline script content.

So I began to search the Web and found solutions like this:

$(function(){
  $('#gplus').append('<g:plusone></g:plusone>');
});

Why doesn’t make this any sense?

Short answer: If you read a newspaper and don’t understand the text - would it be helpful to find instructions how you can write the doubtful text by yourself?

Long answer: Let’s first ask why you want your code to be valid HTML. Probably to get the greatest possible compatibility with current and future browsers and to support the development of the Web. Who do you write the HTML code for?

1. User agents: Current and future user agents should be able to understand and render your code. In the actual case of the +1 button, user agents may either understand the code and render it or they simply ignore it. There is no need to “hide” the HTML code for them and then insert it by JavaScript because they have to interpret the code inserted by JavaScript nevertheless.

2. Robots: Normally, they don’t use JavaScript so they would be the target group for “hiding HTML by JS”. However, robots are designed to get most information of the Web and can parse most code that is somehow understandable. In case of correctly opened and closed tags, there is no reason why a robot shouldn’t understand a page that contains an unknown tag. Also, the most important robot is Google and I doubt that Google will reject your page because you embedded the Google +1 button. Furthermore, the actual problem is related to the

3. For yourself: Do you really feel better when a HTML validator tells you that your code is valid, but you know that it inserts invalid code by JavaScript?

Of course, I have a strong preference for really valid Web code - but moving invalid code from HTML to JavaScript doesn’t make any sense for me.