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

<![CDATA[
    
]]>

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

<style type='text/css'>
.class ul&gt;li:before {
    content: &quot;&#9829;&quot;;
}
</style>

<style type='text/css'>
/* <![CDATA[ */
    .class ul>li:before {
        content: "♥";
    }
 /* ]]> */
</style>

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.

<script>
if (foo &gt; bar &amp;&amp; baz &lt; foo) {
    alert(&#39;Boo&#39;);
}
</script>

<script>
//<![CDATA[
if (foo < bar && baz < foo) {
    alert('Boo');
}
//]]>
</script>

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.

<b:widget-setting name='content'>
  &lt;p&gt;Don't Parsing Me&lt;/p&gt;
</b:widget-setting>

<b:widget-setting name='content'>
<![CDATA[
    <p>Don't Parsing Me</p>
]]>
</b:widget-setting>

Other Tag

Share This

Facebook Twitter WhatsApp LINE Google Bookmark