Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is CDATA in HTML?
The full form of CDATA is Character Data. It is a section in XML used to include blocks of text that should be treated as raw character data, not as markup. The XML parser does not parse the content inside a CDATA section, so tags and entities within it are ignored.
A CDATA section starts with <![CDATA[ and ends with the delimiter ]]>. Everything between these markers is treated as plain text. CDATA sections cannot be nested.
In HTML, CDATA sections are not used − browsers treat them as comments and do not display them. CDATA is primarily relevant in XML and XHTML documents.
Syntax
The syntax of a CDATA section in XML is −
<![CDATA[ your text content here ]]>
Any text, special characters like <, >, &, or even markup-like content placed inside the CDATA block is treated as plain text by the XML parser.
Key Points About CDATA
- CDATA is used to include text in an XML document that should not be parsed as markup.
- Special characters like
<,>, and&do not need to be escaped inside a CDATA section. - CDATA sections cannot be nested − you cannot place one CDATA block inside another.
- CDATA sections can appear anywhere in an XML document but cannot be empty.
- They are useful when including large blocks of text that contain characters which would otherwise need entity encoding.
CDATA Object Properties
| Property | Description |
|---|---|
data |
Returns or sets the text content of the CDATA node |
length |
Returns the number of characters in the CDATA section |
CDATA Object Methods
| Method | Description | Syntax |
|---|---|---|
appendData() |
Appends data to the end of the node | node.appendData(string) |
deleteData() |
Deletes data from the node | node.deleteData(start, length) |
insertData() |
Inserts data into the node at a position | node.insertData(start, string) |
replaceData() |
Replaces data within the node | node.replaceData(start, length, string) |
splitText() |
Splits the CDATA node into two nodes | node.splitText(offset) |
substringData() |
Extracts a substring from the node | node.substringData(start, length) |
Example: Basic CDATA in XML
In this example, the CDATA section contains text with special characters that would otherwise need escaping −
<?xml version="1.0" encoding="UTF-8"?>
<document>
<employee>
<name>Clark Gable</name>
<hiredate>October 25, 2005</hiredate>
<![CDATA[
<messages> Hope </messages>
]]>
<![CDATA[
<message> Welcome </message>
]]>
</employee>
</document>
The XML parser treats <messages> Hope </messages> and <message> Welcome </message> as plain text, not as XML tags.
Example: CDATA with Special Characters
In this example, the CDATA section includes characters like <, >, &, and quotes without requiring entity encoding −
<?xml version="1.0" encoding="UTF-8"?>
<Softwareproduct>
<empl id="01">
<name>
<projectname>Alexa</projectname>
<Workingdomain>Machine Learning</Workingdomain>
</name>
<details>
<![CDATA[This project uses Machine Learning for Alexa. Special chars: '"&<> are all valid here. Submission date: 20/06/2024]]>
</details>
</empl>
</Softwareproduct>
The characters '"&<> inside the CDATA block are not parsed or escaped − the XML parser passes them through as raw text.
Example: CDATA vs Entity Encoding
This example shows the difference between using CDATA and entity encoding for the same content −
<!-- Without CDATA: must use entity encoding --> <price>Value is <100 & >50</price> <!-- With CDATA: no encoding needed --> <price><![CDATA[Value is <100 & >50]]></price>
Both produce the same result, but the CDATA version is easier to read and write when dealing with special characters.
Conclusion
CDATA (Character Data) is an XML feature that lets you include raw text without entity encoding. It is useful when your content contains special characters like <, >, or & that would otherwise need escaping. While CDATA is not used in HTML, it remains essential in XML and XHTML documents for handling unescaped text blocks cleanly.
