XML CDATA

In a previous lesson, we learned how to escape a single character by using an entity reference. In this lesson, we'll look at how to escape a whole block of text - not just a single character.

In XML, a CDATA section is used to escape a block of text that would otherwise be parsed as markup.

Why Are CDATA Sections Useful?

You might occasionally find that your data contains large blocks of text with lots of potentially problematic characters. For example, your data could contain a programming script. Many progamming scripts contain characters such as less than/greater than signs, ampersands etc, which would cause problems for the XML processor.

CDATA allows you to escape the whole block of text. This eliminates the need to go through the whole script, individually replacing all the potentially problematic characters. The XML processor knows to escape all data between the CDATA tags.

CDATA Syntax

You declare a CDATA section using <![CDATA[ as the opening tag, and ]]> as the closing tag.

Example:

Copy to Clipboard
<root>
  <child>
  <![CDATA[
    Text you want to escape goes here...
  ]]>
  </child>
</root>

CDATA Section Example

In this example, we have a block of JavaScript code inside an XHTML document. If you've been involved in web development, you'll probably know how common JavaScript is on the web. You might also know that any block of JavaScript code could contain all sorts of potentially problematic characters.

W3C has recommended that all scripts within an XHTML document be escaped using CDATA sections.

Copy to Clipboard
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Displaying the Time</title>

<script type="text/javascript">
<![CDATA[
  var currentTime = new Date()
  var hours = currentTime.getHours()
  var minutes = currentTime.getMinutes()

  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }

  if (minutes < 10)
  minutes = "0" + minutes

  document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>")
]]>
</script>

</head>
<body>
<h1>Displaying the Time</h1>
</body>
</html>

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad