Exploring Google's +1 Button, I found two things odd about the code they supply:

<script type="text/javascript" src=".js">
  {lang: 'en-GB'}
</script>

<g:plusone size="tall" href=""></g:plusone>

So I have two questions:
First:       How is Google able to use the text between the script tags?
Second:  Is the syntax <g:plusone ... HTML valid? What's this called?

Exploring Google's +1 Button, I found two things odd about the code they supply:

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

<g:plusone size="tall" href="http://www.google.com"></g:plusone>

So I have two questions:
First:       How is Google able to use the text between the script tags?
Second:  Is the syntax <g:plusone ... HTML valid? What's this called?

• javascript
• html
• google-plus-one

• 1 It isn't namespaced XML since xmlns:g is never specified. – Quentin Commented Jul 15, 2011 at 21:21

3 Answers 3

How is Google able to use the text between the script tags?

<script> elements are perfectly visible in the DOM:

<script type="text/javascript">//FIRST SCRIPT BLOCK</script>

<script type="text/javascript">
    var s= document.getElementsByTagName('script')[0];
    alert(s.textContent); // "//FIRST SCRIPT BLOCK"
</script>

Google's sneaky trick is to put content in a <script> that has an external src. In this case the src overrides the content inside the block and executes the external script instead, but the contents of the <script> element are still readable through the DOM even though they do nothing.

Is the syntax <g:plusone ... HTML valid? What's this called?

No. If they made their own doctype for HTML+plusone it could be valid that, but it doesn't satisfy validity for HTML, and it isn't even namespace-well-formed in an XHTML document, unless you add an extra xmlns:g for it too.

Is the syntax <g:plusone ... HTML valid?

No

What's this called?

Invalid psuedo-namespaces

The first trick is interesting. It looks like a creative way to pass "global" arguments from the page markup to external scripts. There are ways to find the <script> element that sources the code that's currently running, and I would not be surprised if the inner text of that <script> element was accessible from the DOM even though the browser ignores it.

In your question, this pattern allows each external client-side script to use (at least) its own localization settings, and also allows server-side code to render that parameter as a side effect of rendering the <script> element itself. That's impressive.

The second trick, I'm not so sure about. Basically, I think most browsers would consider the namespaced <g:plusone> element as unknown or even invalid, so they should render its content, but it won't do anything, of course, since that element is empty to begin with.

However, client-side code might still be able to match the namespaced element using DOM navigation, and replace it with its own generated content.