When is a CDATA section necessary within a script tag?

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>

Calumniate

Now that XHTML is essentially dead, is this no longer a relevant concern? – Xyloid

@allyourcode: what makes you think XHTML is dead? HTML5? There's XHTML5 to go right along with it :) – Dibasic

@DoktorJ AFAIK xHTML was at version 1. It's HTML equivalent was version 4. There was an effort concentrated in xHTML 2.0 intending to push the xform, xlink, time and svg namespaces into the spec as a manner of improving the same features HTML 5 was adding - xform/input-validation, time/animations, svg/canvas - but efforts for the xHTML 2 spec were refocused towards the HTML 5 features. That's not to say that xHTML 2 was dropped or became obsolete but it's not planned in the near future. – Backing

XHTML is not dead in Java Seam / JSF / Facelets development. – Konstanz

@Mihai Stancu -- that is not entirely correct. According to W3C there is an XML syntax for HTML5: "The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the w3.org/1999/xhtml namespace following the rules set forth by the XML specifications." – Pipette

@allyourcode: Mate XHTML is the preferred now, and is not dead. HTML should be dead except messy coders wouldnt be able to work. – Leatri

@Xyloid my military customers in the UK have just upgraded from IE6 to IE8 after five years of shouting at them. If XHTML is dead then I need a big paddle to get me out of this creek. Auto-updating browsers are not used by many large corporations (sadly). – Nikolaus

@Nikolaus But IE8 does not support XHTML yet. When IE9 arrives, then you will be able to use XHTML! Yes! – Attrahent

@DoktorJ I doubt XHTML5 will become popular. XHTML has outlived its usefulness IMO. – Hymanhymen

SVG is alive and well, and requires CDATA declarations for any internal ecmascript that includes < and &. – Moderate

To prove that XHTML is not dead, visit this website. It's a genuine real XHTML website(!) – Tadtada

Answer 1

A CDATA section is required if you need your document to parse as XML (e.g. when an XHTML page is interpreted as XML) and you want to be able to write literal i<10 and a && b instead of i<10 and a && b, as XHTML will parse the JavaScript code as parsed character data as opposed to character data by default. This is not an issue with scripts that are stored in external source files, but for any inline JavaScript in XHTML you will probably want to use a CDATA section.

Note that many XHTML pages were never intended to be parsed as XML in which case this will not be an issue.

For a good writeup on the subject, see https://web.archive.org/web/20140304083226/http://javascript.about.com/library/blxhtml.htm

Scraggy

There's a lot more to it than just "validation". Most strict XML parsers won't go through the page if they hit an illegal character. It's more than simply about making W3C happy and getting green instead of red. – Correction

If you avoid & and < characters, you don't need a CDATA section; it'll work fine in both HTML and XHTML. You can easily achieve this by putting all significant code in external scripts and just using inline scripts to eg. initialise variables (escaping &/< to \x26/\x3C in string literals if you need). – Steadman

What about in the case of HTML5? – Oat

@Mathew Attle - this is a good question. Be a great question to ask on a separate thread to ensure it gets the attention it needs. – Ixion

@Loren: Then it's still completely about validation. The extent to which a user-agent rejects invalid XML is orthogonal. – Baculiform

@chief: wrong, html5 contains a xhtml dialect enabled by serving it with xhtml mime type (for local files, that’s the .xhtml file ending) – Colotomy

what do you mean by parsed data vs. character data? – Apple

@Mathew Attlee: According to the W3C, there is an XML syntax for HTML5. When using the XML syntax, the case would be the same. – Pipette

@CoffeeAddict character data is plain text. Something like &quot;</script> is used as is. Parsed data is parsed as HTML (or XML): &quot;</script> is interpreted as " and then the parser stops parsing because it encounters an end tag. – Attrahent

@MathewAttlee this will not be necessary for HTML5. – Risky

The many comments about XHTML being dead are misleading because there are various other XML formats out there in common use, some of which are de facto parts of HTML5. For example, you still need CDATA for script elements inside SVG, because SVG is XML. – Moderate

From archived link to about.com: "<!-- // hide from really old browsers that noone uses anymore" ;^D – Berry

Answer 2

When browsers treat the markup as XML:

<script>
<![CDATA[
    ...code...
]]>
</script>

When browsers treat the markup as HTML:

<script>
    ...code...
</script>

When browsers treat the markup as HTML and you want your XHTML 1.0 markup (for example) to validate.

<script>
//<![CDATA[
    ...code...
//]]>
</script>

Kirakiran

Just as a matter of code safety, it is better to surround your CDATAs with block comments /* ... */ because otherwise if the line breaks are removed, the code will break – Valse

shouldn't "...as XML" in first section be "...as non-interpreted text"? In https://mcmap.net/q/25969/-what-does-lt-cdata-gt-in-xml-mean we see "...these strings includes data that could be interpreted as XML markup, but should not be." – Gingergingerbread

@mattwilkie, What I mean with "as XML" is "When browsers use their XML parser (as opposed to the HTML parser) to parse the markup because the document was sent with an XML-based mime type or the file containing the markup has an XML-based file extension". – Kirakiran

Answer 3

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.

Whiny

The statement “A CDATA section has no effect at all” is not true for (the proposed) HTML5, which recognizes the construct. w3.org/TR/html5/syntax.html#cdata-sections – Dovetailed

@Dovetailed Interesting. I think that's a pretty ugly mix. Still no effect in script content though. – Whiny

Wow, I thought having scripts as PCDATA in XHTML was cumbersome and pointless; wasn't thinking of what would happen if "</script>" is used if it was CDATA like in HTML4. I love XHTML :) – Clinkerbuilt

diveintohtml5.info/past.html#xhtml Apparently not all XHTML is made (or served) equal. – Tonkin

Did not know that any </ inside script tags is bad. – Homonym

@SalmanA That's one of HTML's odditys and officially called ETAGO. Learn more: mathiasbynens.be/notes/etago (while the article states that no browser ever implemented that feature, I'm pretty sure it caused some trouble for me. Maybe in some other tool) – Whiny

Actually I ran into validation problems -- <script>var b = "<b>bold</b>";</script> fails to validate but after reading your answer and changing to <script>var b = "<b>bold<\/b>";</script> fixed it. – Homonym

Answer 4

Basically it is to allow to write a document that is both XHTML and HTML. The problem is that within XHTML, the XML parser will interpret the &,<,> characters in the script tag and cause XML parsing error. So, you can write your JavaScript with entities, e.g.:

if (a > b) alert('hello world');

But this is impractical. The bigger problem is that if you read the page in HTML, the tag script is considered CDATA 'by default', and such JavaScript will not run. Therefore, if you want the same page to be OK both using XHTML and HTML parsers, you need to enclose the script tag in CDATA element in XHTML, but NOT to enclose it in HTML.

This trick marks the start of a CDATA element as a JavaScript comment; in HTML the JavaScript parser ignores the CDATA tag (it's a comment). In XHTML, the XML parser (which is run before the JavaScript) detects it and treats the rest until end of CDATA as CDATA.

Support

Answer 5

It's an X(HT)ML thing. When you use symbols like < and > within the JavaScript, e.g. for comparing two integers, this would have to be parsed like XML, thus they would mark as a beginning or end of a tag.

The CDATA means that the following lines (everything up unto the ]]> is not XML and thus should not be parsed that way.

Zahara

Answer 6

Do not use CDATA in HTML4 but you should use CDATA in XHTML and must use CDATA in XML if you have unescaped symbols like < and >.

Correction

CDATA is not valid in HTML4. Simply put, it's not part of the grammar. CDATA is a syntax of XML, and XHTML is an XML subset. Therefore it should only be used inside XML (and its subsets). HTML on the other hand is not XML. – Correction

Answer 7

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.

Staceystaci

Answer 8

CDATA indicates that the contents within are not XML.

Here is an explanation on wikipedia

Humankind

Answer 9

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

Retentivity

Answer 10

to avoid xml errors during xhtml validation.

Vocational

Answer 11

CDATA tells the browser to display the text as is and not to render it as an HTML.

Jonajonah

Answer 12

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

Stilton

Answer 13

CDATA indicates that the contents within are not XML.

Zerelda

Answer 14

When you want it to validate (in XML/XHTML - thanks, Loren Segal).

Teens

Answer 15

That way older browser don't parse the Javascript code and the page doesn't break.

Backwards compatability. Gotta love it.

Mosira