When is a CDATA section necessary within a script

Question

Are CDATA tags ever necessary in script tags and if so when?

In other words, when and where is this:

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>

preferable to this:

<script type="text/javascript">
...code...
</script>

Answer 1

When you are going for strict XHTML compliance, you need the CDATA so less than and ampersands are not flagged as invalid characters.

Answer 2

to avoid xml errors during xhtml validation.

Answer 3

It to ensure that XHTML validation works correctly when you have JavaScript embedded in your page, rather than externally referenced.

XHTML requires that your page strictly conform to XML markup requirements. Since JavaScript may contain characters with special meaning, you must wrap it in CDATA to ensure that validation does not flag it as malformed.

With HTML pages on the web you can just include the required JavaScript between and tags. When you validate the HTML on your web page the JavaScript content is considered to be CDATA (character data) that is therefore ignored by the validator. The same is not true if you follow the more recent XHTML standards in setting up your web page. With XHTML the code between the script tags is considered to be PCDATA (parsed character data) which is therefore processed by the validator.

Because of this, you can't just include JavaScript between the script tags on your page without 'breaking' your web page (at least as far as the validator is concerned).

You can learn more about CDATA here, and more about XHTML here.

Answer 4

CDATA is necessary in any XML dialect, because text within an XML node is treated as a child element before being evaluated as JavaScript. This is also the reason why JSLint complains about the < character in regexes.

References

• Creating a declarative XML UI language
• The Future of the Web: Rich Clients, Rich Browsers, Rich Portals

Answer 5

CDATA indicates that the contents within are not XML.

Here is an explanation on wikipedia

Answer 6

HTML

An HTML parser will treat everything between <script> and </script> as part of the script. Some implementations don't even need a correct closing tag; they stop script interpretation at "</", which is correct according to the specs.

Update In HTML5, and with current browsers, that is not the case anymore.

So, in HTML, this is not possible:

<script>
var x = '</script>';
alert(x)
</script>

A CDATA section has no effect at all. That's why you need to write

var x = '<' + '/script>'; // or
var x = '<\/script>';

or similar.

This also applies to XHTML files served as text/html. (Since IE does not support XML content types, this is mostly true.)

XML

In XML, different rules apply. Note that (non IE) browsers only use an XML parser if the XHMTL document is served with an XML content type.

To the XML parser, a script tag is no better than any other tag. Particularly, a script node may contain non-text child nodes, triggered by "<"; and a "&" sign denotes a character entity.

So, in XHTML, this is not possible:

<script>
if (a<b && c<d) {
    alert('Hooray');
}
</script>

To work around this, you can wrap the whole script in a CDATA section. This tells the parser: 'In this section, don't treat "<" and "&" as control characters.' To prevent the JavaScript engine from interpreting the "<![CDATA[" and "]]>" marks, you can wrap them in comments.

If your script does not contain any "<" or "&", you don't need a CDATA section anyway.