Can i use html tags in json?

• Thorn Tech Staff
• Jul 25, 2012
• Web Development

Putting HTML in JSON – Four Things You Must Do

There are 4 things you must do if you want to include HTML content in a JSON data structure. These items were originally included in a recent post about using XSLT to include HTML in JSON. However, this information is good for anyone to remember when creating JSON data, regardless of whether XSLT is used or not.

The JSON spec does not have many restrictions. JSON data is either a string, a number, a boolean, an object, an array, or null. As long as your data is formatted as one of these types, it should be valid. However, if your data contains HTML, there are certain things that you need to do to keep the browser happy when using your JSON data within Javascript.

1. Escape quotation marks used around HTML attributes like so <img src=\"someimage.png\" />
2. Escape the forward slash in HTML end tags. <div>Hello World!<\/div>. This is an ancient artifact of an old HTML spec that didn’t want html parsers to get confused when putting strings in a <SCRIPT> tag. For some reason, today’s browsers still like it.
3. This one was totally bizarre. You should include a space between the tag name and the slash on self closing tags. I have no idea why this is, but on MOST modern browsers, if you try using javascript to append a <li> tag as a child of an unordered list that is formatted like so: <ul/>, it won’t work. It gets added to the DOM after the ul tag. But, if the code looks like this: <ul /> (notice the space before the /), everything works fine. Very strange indeed.
4. Be sure to encode any quotation marks that might be included in (bad) HTML content. This is the only thing that would really break the JSON by accidentally terminating the string early. Any " characters should be encoded as " if it is meant to be included as HTML content.

Here is a fictional example of JSON data that shows each of these suggestions. This was based on a real-world example where list items (<li> tags), where added to the <ul> dynamically in Javascript.
{
"ad_box": {
"html": "<div class=\"ad_box\"><img class=\"banner\" src=\"some_ad.png\" alt=\"\" \/>
<h3>&quot;Hot&quot; Items <\/h3> <br \/> <ul id=\"items\" \/><\/div>",
"item_id": 1234,
"click_action":"/logAction?id=1234&amp;type=click&amp;info=blah",
"icon":"http://my.images.com/icons/icon.png"
}
}
Hopefully anyone attempting to serialize HTML as JSON will find these lessons-learned helpful.

Like this post? Please share it! Then follow us on Twitter – @thorntech – and sign up for our email list below for future updates.

Get insights on SFTP Gateway, cloud computing and more, in your inbox.

Get smarter about all things tech. Sign up now!

Discover SFTP Gateway

Learn more about SFTP Gateway

Search our blog

Recent posts

This article is going to assume that you’re trying to insert HTML directly inside the JSON file.

The problem with HTML inside JSON is that HTML elements have properties that must use double quotes.

But as soon as you insert double quotes it’s going to cause syntax error because JSON can only do double quotes.

If you’re interested why this breaks, here’s an article to explain why, “Types – String“.

Okay solution: Using HTML entities

You can use HTML entities to escape that syntax error.

But it sometimes causes weird HTML side-effects.

Like adding double quotes around the double quotes. Or making link elements not work.

Best solution: Escape strings

The best solution to implement HTML with properties is to escape strings.

Just add the backslash (\) symbol before the beginning of a double quote and the before the end of a double quote.

I like to tweet about JSON and post helpful code snippets. Follow me there if you would like some too!

What characters are not allowed in JSON?

How escape HTML tag JSON?

How do I pass a json file in HTML?

How do I display data in JSON table in HTML?