The XML CDATA section, where the term CDATA means 'Character Data'. CDATA is defined as blocks of text that are not encoded or parsed by the parser, but are recognized as markup. When parser parsed block of code, the predefined entities such as <, >, & will resulting an &lt;, &gt;, and &amp; as output. By using CDATA section, we are commanding the parser that the particular section of the document contains no markup and should be treated as regular text. This mean any Blogger Language will not be processed in this section if any.

CDATA Syntax

Syntax for CDATA section
<![CDATA[
    
]]>
  • CDATA start with the nine-character delimiter <![CDATA[
  • CDATA section ends with ]]> delimiter.
  • Nesting is not allowed in CDATA section.
  • A comment line must be added if it used for CSS or JS.

CDATA VS XML Parser

When we type some internal code, CSS and JS between <style> and <style> or <script> and <script>, before we left the Blogger HTML Editor, the block of code looks normal. If we comeback to the editor and see our code, we will found them look nasty. This because the XML has encoded or parsed our code. To avoid that, we must bring CDATA along, to keep our code look beauty.

CDATA Eexample

CSS without CDATA
<style type='text/css'>
.class ul&gt;li:before {
    content: &quot;&#9829;&quot;;
}
</style>
CSS with CDATA
<style type='text/css'>
/* <![CDATA[ */
    .class ul>li:before {
        content: "♥";
    }
 /* ]]> */
</style>
In a CSS style part ,CDATA must be wrapped by CSS comment line /* cdata */

Sometimes, our Javascript marked as Error and XML Blogger HTML Editor wont accept our code, this, because we have special charachter present in our code such as an & (ampersand) to avoid an error, we must decode our JS or wrapping them inside CDATA section.
Javascript without CDATA
<script>
if (foo &gt; bar &amp;&amp; baz &lt; foo) {
    alert(&#39;Boo&#39;);
}
</script>
Javascript with CDATA
<script>
//<![CDATA[
if (foo < bar && baz < foo) {
    alert('Boo');
}
//]]>
</script>
In a Javascript script block, CDATA start and end section must be marked by the comment  line // cdata. This mean the code inline with him will be marked as comment together, to avoid an error, we must start inputting our JS code on the Next Line like above layout.


The tag <b:widget-setting> value are aslo parsed by XML, we can use cdata inlining with them to its value to avoid encoded text.
Value of a Widget setting without CDATA
<b:widget-setting name='content'>
  &lt;p&gt;Don't Parsing Me&lt;/p&gt;
</b:widget-setting>
Value of a Widget setting with CDATA
<b:widget-setting name='content'>
<![CDATA[
    <p>Don't Parsing Me</p>
]]>
</b:widget-setting>


Other Tag

Share This

About
BloggerBasics101 is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc
Course