Is there a standard for embedding JSON in HTML?

Question

I would like to embed JSON in HTML. The most elegant solution I have found makes use of the script-tag and the mime media type application/json.

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script> 

Is this the standard way of embedding JSON? If not, are there any risks with the above solution?

Reasons for using inline JSON (instead of a JSON-P service):

• Small amounts of JSON-data
• Less HTTP-requests
• Preference for inline-JSON to data in HTML-attributes

[UPDATE] Reason for embedding json.

I have a gallery widget for a website with very high traffic. The gallery can consist of a 100 images or more. I am only showing one image at a time and the rest of the images will be lazy loaded. However the information (image src) to all images will be rendered in the html on page load. There are various ways to render the image information in the html. Instead of using JSON I could also use html data attributes as shown below:

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

Will result in:

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

The disadvantage with the above solution is the extra markup. I would rather use JSON and a Javascript-Templating engine such as doT.js.

Answer 1

What you suggest is absolutely correct. The type attributes of the script tag must be a valid MIME descriptor. According to the official JSON RFC section 6 "IANA Considerations":

The MIME media type for JSON text is application/json.
Type name: application
Subtype name: json

So your HTML is valid:

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script> 

And, no, there are no additional risks involved in doing this.