For those who went through the migration from the OLD Blogger to the NEW one, I believe we have had our share of XML coding issues...
Have you ever bumped into error messages while inserting widgets or codes into the Blogger template such as:
..code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly..
Do not fret, these errors can be rectified but we need to understand the rules and requirements needed in XHTML documents.
The New Blogger uses XHTML 1.0 Strict Document Type.I will try to explain the jargons and also syntax rules so that we can correct errors when we are faced with one.
XML, HTML and XHTML
When you are viewing your Blog .. Go to View > Page Source (or Source) you willsee this document type declaration on the top of the source text.
What XML, HTML and XHTML refer to is the markup language that is used in creating the web pages. We are all familiar with HTML which stands for Hypertext Markup Language which was commonly used in the earlier days of the WWW. XML isExtensible Markup Language is classified as a Meta Language which are used to create other markup languages. The classical HTML was subsequently recast to use the XML rules and thus resulting in a new XML application which is known as XHTML (Extensible Hypertext Markup Language) XHTML rules are strict unlike the HTML and error message will pop up when you do not conform to the requirements and rules.
Basic Rules of XHTML
1. The Codes Must be in Lower case
XML is case sensitive, thus all the element attribute names and keywords being used should be in the lowecase. As an example the template code should not be this:
<TITLE>MoneyShiok</TITLE>
But this:
<title>MoneyShiok</title>
The elements and attribute names in this case title between the < and > has to be lower case.. However, the value, which in this case is “Money Shiok”, can be in the uppercase, lowercase, or mixed case.
2. Attribute values must be in quote marks " "
All the attribute values have to be enclosed either in single or double quotation marks. The following example is not accepted by XHTML:-
<div id=header-wrapper>
<a href=http://moneyshiok.blogspot.com>Text Link</a>
<img src=myphoto.jpg/>
<table width=200 border=0 cellpadding=2>
It should be written in this way:
<div id='header-wrapper'>
<a href="http://moneyshiok.blogspot.com">Text Link</a>
<img src="myphoto.jpg"/>
<table width="200" border="0" cellpadding="2">
3. Container elements must have closing tags
This will prompt an error
<p>Hello World...
For XHTML, there must be a closing tag with a forward slash (/) at the end:-
<p>Hello World...</p>
Examples of the many non-empty elements that have opening and corresponding closing tags are:-
<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>
4. Standalone elements must be closed
Not all elements need to be closed. Some of the elements that do not need a closing tags are:
<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>
There are two ways to terminate these elements being used inXHTML: Method 1 is to put a forward slash
Alternatively you may add a corresponding closing tag like this:-
<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>
5. Elements must be properly nested
Elements must be closed in the reverse order. As an example, this code is not accepted in XHTML:-
<form><table> ... </form></table>
It is improperly nested because the form was created first followed by the table. To close it in the correct order the table must be closed before the form.
<form><table> ... </table></form>
6. Document must have only one root element
Aside from the document type declaration we have seen earlier, ALL the codes are Nested between the HTML and / HTML. This is referred to as the root element and all other subelements are placed in between.
<html>
<head> ... </head>
<body> ... </body>
</html>
7. Attribute minimization is not allowed
In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our About Moneyshiok page, the textarea code cannot be this:
<textarea readonly>Hyperlink Code
but this:-
<textarea readonly="readonly">Hyperlink Code
XHTML Character Entities
Many readers who wanted to use blog templates and they were unable to display HTML codes in their blog and gets an error of not well parsed codes when they insert the codes into their blog template. If you realise the codes are wrapped in the < and > symbols. These will be interpreted as codes and will trigger an action by the browser. If you want to display these as part of a text use their character entities instead. I have added a HTML Parser here.
