When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.
XML, HTML and XHTML
We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?
Basic Rules of XHTML
1. Codes to be in lowercase
Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-
<TITLE>Tips for New Bloggers</TITLE> |
|---|
but this:-
<title>Tips for New Bloggers</title> |
|---|
If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.
2. Attribute values to be in quotation marks
All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-
<div id=header-wrapper> <a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a> <img src=photo.jpg/> <table width=200 border=0 cellpadding=2> |
|---|
Instead, they should be written as such:-
<div id='header-wrapper'> <a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a> <img src="photo.jpg"/> <table width="200" border="0" cellpadding="2"> |
|---|
3. Container elements must have closing tags
This is not correct:-
<p>A paragraph. |
|---|
In XHTML, there must be a closing tag with a forward slash (/) at the end:-
<p>A paragraph.</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 to be closed
Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-
<br> <img> <input> <frame> <hr> <meta> <link> |
|---|
Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-
<br/> <img/> <input/> <frame/> <hr/> <meta/> <link/> |
|---|
The second way is to add a corresponding closing tag like this:-
<br> ... </br> <img> ... </img> <input> ... </input> <frame> ... </frame> <hr> ... </hr> <meta> ... </meta> <link> ... </link> |
|---|
5. Elements to be properly nested
This means that elements must be closed in the reverse order. For 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 them in the proper order, the table must be closed before the form, like this:-
<form><table> ... </table></form> |
|---|
6. Document to have only one root element
In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-
<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 Add Text Box and Textarea article, the textarea code is not this:-
<textarea readonly>Hyperlink Code</textarea> |
|---|
but this:-
<textarea readonly="readonly">Hyperlink Code</textarea> |
|---|
XHTML Character Entities
Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.
| " | " |
|---|---|
| & | & |
| < | < |
| > | > |
The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.
© Tips for New Bloggers
22 comments:
Hi there,
Nice stuff you got, very interesting to read.
Well, I do have also in my sleeves, if you have time don't forget to visit
bookoftips.blogspot.com
Many thanks
Great Blog! Thanks. I mean: thanks!
Hi there,
This may not be relavant to the topic of your post but I would like to ask you regarding the Blogger.com sub-domain.
There are many nice blogspot sub-domains being taken but the blogger(s) have not been posting anything for, say more than 12 months or some even more than 2 years or longer.
May I know can we write to Blogger.com to request for taking over the ownership of the sub-domain?
What's your opinion on this issue.
Any suggestion?
Thank you.
Hi Anonymous
If you are asking an official question, I suppose it would be best to direct it to the Blogger team itself.
This is a great post since there are still new bloggers coming everyday and some of other bloggers still don't know about this thing.
Good piece. I learned something.
But I have a question.
What is the proper code for an internal comment (for example I want to identify the code that follows only for my own use so that I know what the dickens it was/is
Lary Crews
Hi Lary Crews
In the template, it would be this:-
/* Your Comments */
Hi bizwhiz,
May I know how could I centralize my blogger template?
This is my blog, sttang.blogspot.com.
The default alignment is to the left and I don't know how to centralize it.
Your help is very much appreciated.
Cheers.
Hi fly
Read the article in our Blogger FAQ blog on Center Alignment of Page Elements.
Hi great site really help me! with your tips I can actually manage to work things out! Ive added you to my favourite links!to let other people know about you.
http://meakb1.blogspot.com
Hii there...
Your template is simple, but your posting info is very helpfully for newer blogger like me.
there is much tutorial and trick for blog that usefull for me
Nice Blog with great job...congratulations!!!, ...
yeeaa...
I'm new commer in blog..., please be acquainted with here same my blog:
musicallyric
e-technonews
software-freeware
e-olympics
e-movienews
e-linknet
I have also some new template in e-linknet that best of mine, that create from HTML.
What do you think about my blog, in design template, article and do you have any comment for my blog posted???
thank...before for link my blog...
Sincerely
de_naturaleza
nice to know you
Hi.. you have put up a great blog for novices like us :-) Anyways, I have a query relating to positioning of banner at the top. My blog is http://milliondollarstory.blogspot.com
You will notice that there is no space between the header image and the ad banner at the top, nor there is any space between the header image and the google adsense unit in the right sidebar. Can I insert some space say 5-10 pixels in between?
Fabulous tips! Thank you so much for the information. Woofs, Johann
Hi The Story Brewer
Space can either be in the margin or padding settings. Try adding values in them and preview the blog to see the effect.
Hey Bizwhiz! I wanted to know if you know a way to put this banner
http://apps.eyewonderlabs.com/adWdrVideoSpace/ad/28148/approvalJSTags.html
In my blog... I only have the url and I just really want that banner on my blog!
Thanks!
Right click on the banner to view or download. However, be aware of copyright issues if you intend to use the banner on your blog. Get permission from the site owner where necessary.
Thank you.
i think great post.
Excellent tips for bloggers like me.
I have used your guide to create a third column to my two column blog. It looks a little cluttered. I am thinking whether it is possible to change the color of the middle column so that it looks better. I will appreciate your guidance.
Thank you so much.
Hi Jesieblogjourney
I don't seem to see three columns in your blog. There is a missing } which should appear after this:-
div#newsidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: right;
width: 15%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}
Add the ) and preview the template. As for the color, try adding the color code under this:-
div#main {
background: #FCDFFF;
Look at our color code chart for the color code.
At last, technical stuff explained simply, I will come back to this blog, but for now I am adding it to "my favourite websites" in my blog!
beautiful and very useful blog, congratulations! Waiting for new tips!
Especially some up-to-date tips on SEO for blogs!
www.r10.net küresel ısınmaya hayır seo yarışması
I have something to say ...