What is the difference between HTML and XHTMLProbably you have seen that a lot, when modifying or inserting new codes into your Blogger template, page element, or blog post, you may have seen error one of the messages:
code could not be parsed,
not well-formed,
broken,
the elements were not closed properly etc.
I know these errors can be really frustrating and really make you go mad but in fact these errors can be corrected if you understand the rules that must be adhered to in XHTML documents [
XHTML 1.0 Strict Document Type ]. Now, I willl explain some of the XHTML syntax & rules, so that you may resolve and troubleshoot the problems if these error messages should occur while you are trying to modify the codes *
meaning the XHTML Template*.
XML - HTML - XHTMLI will try to keep this short so that you guys won't get confused but just so you understand about document type: when viewing the
Page Source or the
Source of your Blogger template, you should see this document type declaration at the 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 and herewith I will give a short explanation:
HTML [
Hypertext Markup Language ], invented by Tim Berners-Lee, and used since the early days of internet - as most of you guys know about it.
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.
XHTML [
Extensible Hypertext Markup Language ] rules are strict, unforgiving and also conforming when attempting to modify the template & codes which would result in error messages as stated above.
What are these rules that Blogger People should take note of?!1. Basic Rules of XHTML
- Use All Lowercase Tags
- Nest Elements Correctly
- Always UseEnd Tags
- End Empty Elements
- Use Quotes for Values
- Give Every Attribute a Value
- Use Code for Special Characters
- Use id instead of name
- Separate Styles and Scripts
- Ensure you follow those steps
All codes need 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>Free Templates Blogger Tips and Tricks</TITLE>
but instead it should be like this [lowercase]:
<title>Free Templates Blogger Tips and Tricksc</title>
If you have noticed, the elements and attribute names between the
< and
> signs have to be in the lowercase. However, the value, which in this case is “Free Template Blogger Tips”, 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 example is not accepted by XHTML:
<div id=header-wrapper>
<a href=http://freetemplatesblogger.blogspot.com>The difference between HTML and XHTML</a>
<img src=photo.jpg/>
<table width=200 border=0 cellpadding=2>
Instead, single quotation as such:
<div id='header-wrapper'>
<a href='http://freetemplatesblogger.blogspot.com'>The difference between HTML and XHTML</a>
<img src='photo.jpg'/>
<table width='200' border='0' cellpadding='2'>
Or, double quotation as such:
<div id="header-wrapper">
<a href="http://freetemplatesblogger.blogspot.com">The difference between HTML and XHTML</a>
<img src="photo.jpg"/>
<table width="200" border="0" cellpadding="2">
3. Container elements must have closing tags
This is not acceptable:
<p>A paragraph
In XHTML, there must be a closing tag with a forward slash
/ at the end:
<p>A paragraph.></p>
Here are some other 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 and common examples are:
<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>
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
The elements must be closed in the reverse order. This code is not accepted in XHTML:
<form><table> ... </form></table>
Why is it not accepted!? Simply because, it is improperly nested! As you notice, the form was created first followed by the table and to close them in the proper order, the table must be closed before the form:
<form><table> ... </table></form>
6. Document to have only one root element
In the XHTML document all the codes are nested between <html< and </html<. That's what you call a
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 single or double quoated like this
name="value". Even if the value is the same as the name, it cannot be minimized to one word. Here an two examples:
<textarea readonly>Hyperlink Code</textarea>
<textarea readonly="readonly">Hyperlink Code</textarea>
ConclusionThe next time you see an error message on your blog, take a look at your codes and see if it is well formed, well parsed, properly closed, etc. Troubleshoot the problem and try out the possible solutions as you have just learned (hopefully).
