XML CDATA

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="xml CDATA, cdata sections, duplicate element names, syntax, programming, how to, xml tutorial, extensible markup language, learn xml"> <meta name="Description" content="Learn about CDATA sections with this free XML tutorial."> <link rel="canonical" href="https://www.quackit.com/xml/tutorial/xml_cdata.cfm"> <title>XML CDATA</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">XML CDATA</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/xml/tutorial/xml_creating_entities.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Creating Entities</a></li> <li><a href="/xml/tutorial/dtd_introduction.cfm">DTD Introduction <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Escape a whole block of text with a CDATA section.</p> <p>In a <a href="/xml/tutorial/xml_entities.cfm">previous lesson</a>, 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.</p> <p>In XML, a <dfn>CDATA section</dfn> is used to escape a block of text that would otherwise be parsed as markup.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Why Are CDATA Sections Useful?</h2> <p>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.</p> <p>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 <code>CDATA</code> tags. </p> <h2>CDATA Syntax</h2> <p>You declare a CDATA section using <code><![CDATA[</code> as the opening tag, and <code>]]></code> as the closing tag.</p> <p>Example:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><root>
 <child>
 <![CDATA[
 Text you want to escape goes here...
 ]]>
 </child>
</root></textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CDATA Section Example</h2> <p>In this example, we have a block of <a href="/javascript/">JavaScript</a> code inside an <a href="/xhtml/xhtml_tutorial.cfm">XHTML document</a>. 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.</p> <p>W3C has recommended that all scripts within an XHTML document be escaped using CDATA sections.</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><?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></textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <ul class="pager"> <li><a href="/xml/tutorial/xml_creating_entities.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Creating Entities</a></li> <li><a href="/xml/tutorial/dtd_introduction.cfm">DTD Introduction <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/xml/tutorial/" title="">XML Tutorial</a></h3> <ul> <li><a href="/xml/tutorial/about_xml.cfm" title="">About XML</a></li> <li><a href="/xml/tutorial/xml_viewers.cfm" title="">XML Viewers</a></li> <li><a href="/xml/tutorial/xml_editors.cfm" title="">XML Editors</a></li> <li><a href="/xml/tutorial/xml_documents.cfm" title="">XML Documents</a></li> <li><a href="/xml/tutorial/xml_syntax.cfm" title="">XML Syntax</a></li> <li><a href="/xml/tutorial/xml_elements.cfm" title="">XML Elements</a></li> <li><a href="/xml/tutorial/xml_attributes.cfm" title="">XML Attributes</a></li> <li><a href="/xml/tutorial/xml_css.cfm" title="">XML with CSS</a></li> <li><a href="/xml/tutorial/xml_xsl.cfm" title="">XML with XSL</a></li> <li><a href="/xml/tutorial/xml_namespace.cfm" title="">XML Namespace</a></li> <li><a href="/xml/tutorial/xml_local_namespace.cfm" title="">XML Local Namespace</a></li> <li><a href="/xml/tutorial/xml_default_namespace.cfm" title="">XML Default Namespace</a></li> <li><a href="/xml/tutorial/xml_entities.cfm" title="">XML Entities</a></li> <li><a href="/xml/tutorial/xml_creating_entities.cfm" title="">XML Creating Entities</a></li> <li><a href="/xml/tutorial/xml_cdata.cfm" title="">XML CDATA</a></li> </ul> </li> <li> <h3 class="heading-only">DTD</h3> <ul> <li><a href="/xml/tutorial/dtd_introduction.cfm" title="">DTD Introduction</a></li> <li><a href="/xml/tutorial/dtd_doctype.cfm" title="">DTD DOCTYPE</a></li> <li><a href="/xml/tutorial/dtd_internal_dtd.cfm" title="">DTD Internal</a></li> <li><a href="/xml/tutorial/dtd_external_dtd.cfm" title="">DTD External</a></li> <li><a href="/xml/tutorial/dtd_combined_dtd.cfm" title="">DTD Combined</a></li> <li><a href="/xml/tutorial/dtd_fpi.cfm" title="">DTD FPI</a></li> <li><a href="/xml/tutorial/dtd_elements.cfm" title="">DTD Elements</a></li> <li><a href="/xml/tutorial/dtd_element_operators.cfm" title="">DTD Element Operators</a></li> <li><a href="/xml/tutorial/dtd_attributes.cfm" title="">DTD Attributes</a></li> <li><a href="/xml/tutorial/dtd_attribute_default_values.cfm" title="">DTD Attribute Default Values</a></li> <li><a href="/xml/tutorial/dtd_attribute_types.cfm" title="">DTD Attribute Types</a></li> <li><a href="/xml/tutorial/dtd_general_entities.cfm" title="">DTD General Entities</a></li> <li><a href="/xml/tutorial/dtd_parameter_entities.cfm" title="">DTD Parameter Entities</a></li> <li><a href="/xml/tutorial/dtd_embedded_images.cfm" title="">DTD Embedded Images</a></li> </ul> </li> <li> <h3 class="heading-only">XSLT</h3> <ul> <li><a href="/xml/tutorial/xslt_introduction.cfm" title="">XSLT Introduction</a></li> <li><a href="/xml/tutorial/xslt_example.cfm" title="">XSLT Example</a></li> <li><a href="/xml/tutorial/xslt_syntax.cfm" title="">XSLT Syntax</a></li> <li><a href="/xml/tutorial/xslt_template.cfm" title="">XSLT <template></a></li> <li><a href="/xml/tutorial/xslt_apply-templates.cfm" title="">XSLT <apply-templates></a></li> <li><a href="/xml/tutorial/xslt_value-of.cfm" title="">XSLT <value-of></a></li> <li><a href="/xml/tutorial/xslt_for-each.cfm" title="">XSLT <for-each></a></li> <li><a href="/xml/tutorial/xslt_sort.cfm" title="">XSLT <sort></a></li> <li><a href="/xml/tutorial/xslt_if.cfm" title="">XSLT <if></a></li> <li><a href="/xml/tutorial/xslt_choose.cfm" title="">XSLT <choose></a></li> </ul> </li> <li> <h3 class="heading-only">XPath</h3> <ul> <li><a href="/xml/tutorial/xpath_introduction.cfm" title="">XPath Introduction</a></li> <li><a href="/xml/tutorial/xpath_location_path.cfm" title="">XPath Location Path</a></li> <li><a href="/xml/tutorial/xpath_location_path_absolute.cfm" title="">XPath Location Path - Absolute</a></li> <li><a href="/xml/tutorial/xpath_location_path_relative.cfm" title="">XPath Location Path - Relative</a></li> <li><a href="/xml/tutorial/xpath_attributes.cfm" title="">XPath Attributes</a></li> <li><a href="/xml/tutorial/xpath_axis.cfm" title="">XPath Axis</a></li> <li><a href="/xml/tutorial/xpath_node_test.cfm" title="">XPath Node Test</a></li> <li><a href="/xml/tutorial/xpath_predicate.cfm" title="">XPath Predicate</a></li> <li><a href="/xml/tutorial/xpath_node_set.cfm" title="">XPath Node Set</a></li> <li><a href="/xml/tutorial/xpath_comparison_operators.cfm" title="">XPath Comparison Operators</a></li> <li><a href="/xml/tutorial/xpath_boolean_operators.cfm" title="">XPath Boolean Operators</a></li> <li><a href="/xml/tutorial/xpath_number_operators.cfm" title="">XPath Number Operators</a></li> <li><a href="/xml/tutorial/xpath_string_functions.cfm" title="">XPath String Functions</a></li> <li><a href="/xml/tutorial/xml_tutorial_summary.cfm" title="">Tutorial Summary</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

XML CDATA