Introduction

This article looks at the invalid HTML <Variable> element, what causes it to commonly occur in some HTML validation error messages and how to fix it.

What is the HTML <Variable> element?

The element <Variable> is not a valid element. You'll not see it defined in any specification nor will you, most likely, see it willingly used in markup.

Despite it being invalid, it's quite a commonly-occurring feature in two HTML validation errors:

It is, at the time of writing, the most commonly occurring error of the type element "X" undefined.

If you're encountering either of these above HTML validation errors, this is for you.

Cause

If you're even moderately familiar with HTML you'll know that there is no <Variable> element and as such if you were to encounter an error relating to such an element you might think you inadvertently included it in your markup.

Having a <Variable> element used inadvertently in markup is not the cause of this error.

The cause of this error relates to the string <Variable … > being featured within a HTML comment. As comments are ignored by a HTML parser, this initially seems a bit odd.

That the string <Variable … > is present in a HTML comment is not the problem. Having such a comment in your markup will not result in any validation errors.

The cause of these types of error relates to the use of the string <Variable … > in a comment in markup in a section of a XHTML document that is treated differently from most of the result of your markup.

It's all due to CDATA and XHTML parsers

CDATA, short for character data, is a term used to denote parts of a document that simply contain collections of characters that are to be treated literally as just a bunch of text and which are not to be parsed in any way.

Two of the most relevant sections of your markup to which CDATA applies are the contents of <script> and <style> elements.

Unlike pretty much the rest of a HTML document, these elements do not contain text to be displayed nor do they contain markup to be parsed. The contain content that is in a different language (relative to HTML), either JavaScript instructions or CSS styling rules.

If you use text that looks like markup within a comment within a <script> or <style> element within a XHTML document, you run the risk of the text being parsed as markup which is then likely to be considered invalid.

In such cases you can mark the content of such elements as being CDATA to ensure that the XML parser interpretting your XHTML document will then ignore such sections and not try to parse it as markup.

That's the root cause of HTML validation errors relating to invalid or unclosed <Variable> elements.

Let's now see from where these errors originate and how to fix them.

Origin: The Typography Blogger template

This all stems from the Typography Blogger template for the Blogger blogging service which happens to include the following markup:

<style id='page-skin-1' type='text/css'><!--
…
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff">
…
--></style>

That's only a sample of the markup present in the template, there are many more lines in the relevant section full template.

You'll see in the above sample that there is a <style> element containing a HTML comment.

This use of a comment as-is in a HTML document is perfectly valid (ignoring the invalid id attribute). In this case it's in a XHTML document

In this case it's in a XHTML document (not a HTML document) and there is nothing to tell a XML parser that the content is CDATA. An XML parser, such as that used by the HTML validator to validate a XHTML document, can interpret the markup-like strings in the above sample as markup.

That's exactly what happens and exactly the reason you may run in to HTML validation errors relating to invalid Variable elements.

The fix

Solving this is quite straightforward once we know the cause.

We've got a bunch of text that happens to look like markup within a section of a document that should be treated literally and not parsed but which has not been marked as something that should be treated literally.

Marking the relevant content as being CDATA fixes these problems:

<style id='page-skin-1' type='text/css'>
/*<![CDATA[*/
<!--
…

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff">

…
-->
/*]]>*/
</style>

You'll notice the addition of /*<![CDATA[*/ immediately before the start of the HTML comment and the addition of /*]]>*/ immediately after the comment is ended.

This appears quite cryptic but it is merely a way of marking the content as CDATA, such that it will be safely ignored by XML parsers, whilst at the same time marking the CDATA markers as CSS comments such that the CDATA markers will be ignored if this is to be intepreted by a HTML parser.