What’s the Difference Between xhtml and html?

YouTube Preview ImageI was surprised to get this question emailed to me after my HTML W3C Tutorial. This article will be a bit more technical, but I’ll try to keep it light on jargon. By the end of the article, you’ll be able to tell people you know how to write Extensible Hypertext Markup Language version 1.0 Strict that is W3C complaint!

First W3C stands for the World Wide Web Consortium (W3C). They are the group of people that tell everyone how to write HTML and Cascading Style Sheets properly, among other things. What is well written HTML (W3C)? It is HTML that can be viewed on most any device with a browser.

The most current version of HTML W3C is referred to as XHTML 1.0 Strict. XHTML is now known as eXtensible Hypertext Markup Language because it has borrowed format from another language called XML. XML is a language that is used to markup, or structure any type of document, with tags just like HTML. The major difference between XML and HTML is that with XML you can create your own tags, instead of being stuck with the limited quantity found in traditional HTML.

If you are getting confused, just understand that you want to write HTML code that is standards compliant if you want your site to show up properly on any device. That is the long and short of it! So, how do you do it? What I’m going to do is use the code from the HTML W3C Tutorial to explain how to make it xHTML Strict, compliant. You can check any web page for compliance by going to the W3C HTML Validator site. If your website does not validate properly, just check the box marked Clean up Markup with HTML Tidy, to fix most of the problems. This is a quick fix that most people are unaware of. Well, back to showing you how to validate the HTML code from the tutorial. I’ll show the old code in black and white and the new xHTML Strict code in blue boxes.

<! DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

This line of code says that we are going to try to follow the rules of xHTML 4.01, with the word Transitional. We are going to change that if we now are deciding to follow those rules strictly. So replace this line of code with the following:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />

<style type=”text/css”>

h1 {color:red}

</style>

Here we have to change the <html> tag to inform the browser that we are going to follow the guidelines laid out at the website http://www.w3.org/1999/xhtml. We are also going to lose the ability to style our text, inside the body of the HTML page. xHTML demands that all styling be done outside of the web page itself in a separate file. So, that must go. The corrected code looks like this:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />

<meta name=”description” content=”Welcome to Bob’s Hardware, We sell” />

<meta name=”keywords” content=”Flowers, Seeds, Rakes, Shovels, Hardware Store” />

<meta name=”author” content=”Bob Smith” />

<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes</title>

</head>

<body>

Nothing needs to be changed in these lines of code either.

<h1>Text to Draw Attention to</h1>

<abbr title=”A much longer description”>Something Abbreviated</abbr>

<acronym title=”as soon as possible”>ASAP</acronym>

<b>I Want this to be Bold</b>

<big>This is going to be Big</big>

<blockquote>Indent me and show I’m important</blockquote>

Here we have some issues, but nothing that major needs to be done. xHTML W3C Strict, requires that all inline elements be placed inside of block elements in the body section of your HTML. Inline elements are those elements that don’t force a line break after their closing tag. Example: <a>, <em>, <abbr>, <big>, etc. Block Elements force a line break after their closing tags. Example: <h1>, <p>, <blockquote>, etc. The quick solution to this issue is to surround all of the content in your body with paragraph tags <p>.

xHTML 4.01, also doesn’t allow you to use the following tags in your HTML:

  • <center>
  • <font>
  • <frame>
  • <iframe>
  • <menu>
  • <s>
  • <strike>
  • <u>

The last issue with this code is that block quotes must have the paragraph tag defined within them like this: <blockquote><p>Words in a block quote</p></blockquote>

Here is the fixed up HTML code:

<h1>Text to Draw Attention to</h1>

<p><abbr title=”Abbreviated”>Something Abbreviated</abbr>

<acronym title=”as”>ASAP</acronym>

<strong>I Want this to be Bold</strong>

<big>This is going to be Big</big></p>

<blockquote><p>Words in a block quote</p></blockquote>

<center>Center Me Please</center>

<em>I like Being Italicized</em>

<i>I like being Italicized too</i>

<p>This is a big paragraph. Really, it is!</p>

<q>You can quote me on that</q>

<s>I’ve been struck</s>

To fix up this block of HTML W3C, we’ll have to eliminate the use of the <center> and <s> tag. Then put everything inside of paragraph <p> tags. Here is the xHTML W3C code:

<p><em>I like Being Italicized</em>

<i>I like being Italicized too</i></p>

<p>This is a big paragraph. Really, it is!</p>

<p><q>You can quote me on that</q></p>

<small>I feel so small</small>

<strong>I’m the strongest</strong>

<sub>I’m Subscript</sub>

<sup>I’m Superscript</sup>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill Lynch Ad” height=”415″ width=”300″/>

<dl>

<dt>Bicycle</dt>

<dd>- Has two Wheels</dd>

<dt>Car</dt>

<dd>- Has Four Wheels</dd>

</dl>

<ol>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ol>

<ul>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ul>

This block of code is completely xHTML W3C compliant.

<a href=”http://www.newthinktank.com” target=”_blank”>The New Think Tank Website</a>

<a href=”http://www.newthinktank.com#Great Stuff”>Some Great Stuff</a>

<a href=”derekbanas@example.com?Subject=Hello%20again”>Send Mail</a>

Here we have a problem with the use of the target option in the first line of code. You are no longer able to tell the browser how to open a page, if you want to be xHTML W3C compliant. So just remove that one option from the code and your a okay.

<table summary=”Here is my sample table and a description of what it’s about”>

<caption>

Here are some things I did

</caption>

<tr>

<th>Sat</th>

<th>Sun</th>

<th>Mon</th>

</tr>

<tr>

<td>Played Ball</td>

<td>Watched Football</td>

<td>Worked</td>

</tr>

</table>

This whole table definition is compliant, so don’t change anything.

<form action=”http://www.newthinktank.com/mail2.php” method=”post”>

<b>Send Message to this Email</b><br />
<input type=”text” name=”email” size=40><br />

<p><b>Subject</b><br />
<input type=”text” name=”subject” size=40><br />

<p><b>Text Area</b><br />
<textarea cols=40 rows=10 name=”message”>Default Text in Text Area Box</textarea><br />

<p><b>Text Input</b><br />
<input type=”text” name=”textinput” /><br />

<p><b>Password Input</b><br />
<input type=”password” name=”password” /><br />

<p><b>Radio Input</b><br />
<input type=”radio” name=”radioinput” value=”Love Radio Buttons” />Love Radio Buttons
<input type=”radio” name=”radioinput” value=”Hate Radio Buttons” />Hate Radio Buttons<br />

<p><b>Checkbox Input</b><br />
<input type=”checkbox” name=”checkboxinput” value=”Love Checkboxs” />Love Checkboxs
<input type=”checkbox” name=”checkboxinput” value=”Hate Checkboxs” />Hate Checkboxs<br />

<p><b>Select Input</b><br />
<select name=”selectinput”>
<option value=”loveselect”>I love select buttons</option>
<option value=”hateselect”>I hate select buttons</option>
</select><br />

<p><b>Option Input</b><br />
<select name=”optioninput”>
<option value=”loveselect”>I love option buttons</option>
<option value=”hateselect”>I hate option buttons</option>
</select><br />

<p><input type=”submit” value=”Send”>

<input type=”hidden” name=”submitted” value=”TRUE” />

</form>

</body>

</html>

To fix everything here just surround all of the inline elements with paragraph tags <p>. And that is it! If you copy and paste the following code into the xHTML W3C validator tool, you’ll see a screen that looks like this.

Picture of the HTML Validator Success ScreenThat is basically all there is to know about xHTML 1.0 W3C compliant HTML. Look how smart you are now. Here is the corrected xHTML code all fixed up and without my comments.

Till next time…

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><!– <!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> –>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />

<meta name=”description” content=”Welcome to Bob’s Hardware” />
<meta name=”keywords” content=”Flowers,Seeds, Rakes” />
<meta name=”author” content=”Bob Smith” />

<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

</head>

<body>

<h1>Text to Draw Attention to</h1>

<p><abbr title=””A”>Something Abbreviated</abbr>

<acronym title=””as”>ASAP</acronym>

<strong>I Want this to be Bold</strong>

<big>This is going to be Big</big></p>

<blockquote><p>Words in a block quote</p></blockquote>

<p><em>I like Being Italicized</em>

<i>I like being Italicized too</i></p>

<p><q>You can quote me on that</q></p>

<p><small>I feel so small</small> <strong>I’m the strongest</strong> <sub>I’m Subscript</sub> <sup>I’m Superscript</sup></p>

<p>This is a big paragraph. Really, it is!</p>

<p><img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill” height=”415″ width=”300″ /></p>

<dl>
<dt>Bicycle</dt>
<dd>- Has two Wheels</dd>
<dt>Car</dt>
<dd>- Has Four Wheels</dd>
</dl>

<ol>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ol>

<ul>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ul>

<p><a href=”http://www.newthinktank.com”>The New Think Tank Website</a>
<a href=”http://www.newthinktank.com#Great”>Some Great Stuff</a>
<a href=”derekbanas@example.com?Subject=Hello%20again”>Send Mail</a></p>

<table summary=”Here are some things I did”>
<caption>Here are some things I did</caption>

<tr>
<th>Sat</th>
<th>Sun</th>
<th>Mon</th>
</tr>
<tr>
<td>Played Ball</td>
<td>Watched Football</td>
<td>Worked</td>
</tr>
</table>

<form action=”mail2.php” method=”post”>

<p>Send Message to this Email<br />

<input type=”text” name=”email” size=”40″ /><br /></p>

<p>Subject<br />

<input type=”text” name=”subject” size=”40″ /><br /></p>

<p>Text Area<br />

<textarea cols=”40″ rows=”10″ name=”message”>Default Text in Text Area Box</textarea><br /></p>

<p>Text Input<br />

<input type=”text” name=”textinput” /><br /></p>

<p>Password Input<br />

<input type=”password” name=”password” /><br /></p>

<p>Radio Input<br />

<input type=”radio” name=”radioinput” value=”Love Radio Buttons” />Love Radio Buttons

<input type=”radio” name=”radioinput” value=”Hate Radio Buttons” />Hate Radio Buttons<br /></p>

<p>Checkbox Input<br />

<input type=”checkbox” name=”checkboxinput” value=”Love Checkboxs” />Love Checkboxs

<input type=”checkbox” name=”checkboxinput” value=”Hate Checkboxs” />Hate Checkboxs<br /></p>

<p>Select Input<br />

<select name=”selectinput”>

<option value=”loveselect”>I love select buttons</option>

<option value=”hateselect”>I hate select buttons</option>

</select><br /></p>

<p>Option Input<br />

<select name=”optioninput”>

<option value=”loveselect”>I love option buttons</option>

<option value=”hateselect”>I hate option buttons</option>

</select><br /></p>

<p><input type=”submit” value=”Send” /> <input type=”hidden” name=”submitted” value=”TRUE” /></p>

</form>

</body>

</html>

One Response to “What’s the Difference Between xhtml and html?”

  1. kashmala awan says:

    I WANT A DIFFERENCE BETWEEN HTML AND XHTML IN TABULAR FORM…. KINDLY HELP ME IF YOU CAN PROVIDE IT… I’LL BA DEFINITELY THANKFUL TO YOU…

Leave a Reply

Your email address will not be published.

Google+