XML Structure & CDATA

Dive into the core XML structure of a Blogger theme and learn the importance of CDATA.

Every Blogger theme is an XML document. Understanding its structure and special rules is the first step to mastering theme development. We will also cover CDATA, a crucial concept for including CSS and JavaScript.

The Root `<html>` Element

The theme starts with an <html> tag containing several namespace declarations (xmlns). These are essential for the Blogger renderer to understand the special b: and data: tags.

What is `b:skin` and `CDATA`?

The <b:skin> tag holds all your CSS. To prevent the XML parser from misinterpreting CSS characters like > or &, the styles must be wrapped in a <![CDATA[ ... ]]> section.

CDATA stands for "Character Data" and it tells the parser to treat the content inside it as raw text, ignoring any potential XML markup. This is also essential for embedding JavaScript directly in your theme.

Code Examples

xmlBasic Blogger XML Structure
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/* CSS styles go here */]]></b:skin>
  </head>
  <body>
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
  </body>
</html>

Pro Tip

Always wrap your CSS and JavaScript inside CDATA blocks to avoid frustrating parsing errors.

Exercises

  • In your test blog, go to "Edit HTML" and locate the `<b:skin>` tag. Try adding a simple CSS rule inside the CDATA section, like `body { background: red; }`, and save to see the effect.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback