Differences Between XHTML And HTML

What makes XHTML different from HTML

  • Tag and attribute names must be in lower-case
  • Elements must be nested properly, no overlapping
  • Non-empty elements must be closed
  • Empty elements must be terminated
  • All attribute values must be quoted
  • Attribute value pairs cannot be shortened
  • <script> and <style> elements

Tag and attribute names must be in lower-case

XHTML element and attribute names must be written in lowercase,as XML is case-sensitive, No longer you can get away with what people did to improve readability of the code — typing the attributes and elements names in uppercase and the values in lowercase. Attribute values can be any case you want. For example, the “#ffcc33” value below can also be written as “#FFCC33.”


HTML

XHTML
<TD BGCOLOR=”#ffcc33″>

<td bgcolor=”#ffcc33″>

Elements must be nest properly, no overlapping

Browsers wont care overlaped elements in most case. For example, if there is bold tag at the end of a paragraph, it doesnot matters whether to close the </b> first or the </p>. But with XML and XHTML, we have to unclose the last opened tag first and then first opened

HTML
XHTML
<p>Be <b>bold!</p></b> <p>Be <b>bold!</b></p>

Overlapping is widely tolerated in HTML,though it is illegal. An XHTML document must be well-formed XML. It should follow the basic XML syntax. If it fails doing so, There will be no obligation to continue processing of the document bythe XML parser.XML parser will not try to recover and “guess” what you meant if the syntax is wrong as HTML parser did.

Non-empty elements must be closed

either Explicitly or Implicitly all elements must be closed. Since the <p> is designed to mark the beginning and end of a paragraph it is a “non-empty” tag .Thus it must be closed at the end of paragraph

HTML XHTML
First paragraph<p> Second paragraph<p> <p>First paragraph</p> <p>Second paragraph</p>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>

Empty elements must be terminated

There are tags which contains no content within them, when we feel there is no important role to play by them, then should delete those empty tags. <p> tag contains a paragraph, and a <b> tag contains text to be bolded, a <br> tag is “empty” as it never contains any content.Other tags like this are <hr> and <img src=”valid.gif”>

HTML XHTML

<hr>

<hr />
<br> <br />
<input … > <input … />
<param … > <param … />
<img src=”valid.gif”> <img src=”valid.gif” />

Affected Elements: <area> <base> <br> <col> <frame><hr><img> <input><isindex><link><meta> <option><param>

All Attribute values must be quoted

No more <img … border=0>is allowed type.Attribute values including numeric values must be quoted

HTML XHTML
<img … border=0> <img … border=”0″ />

Attribute value pairs cannot be minimized

Usually we try to minimize the attribute if it has single value.But XML does not allow attribute minimization.Single valued or stand-alone attributes in XHTML must be expanded (eg. <td nowrap>text </td> becomes <td nowrap=”nowrap”>text</td>). umeric

HTML XHTML
<dl compact> <dl compact=”compact”>
<ul compact> <ul compact=”compact”>
<option … selected> <option … selected=”selected”> >
<td nowrap> text </td> <td nowrap=”nowrap”> text </td>
<input … checked> <input … checked=”checked” />
<input … checked> <input … checked=”checked” />

<script> and <style> elements

The script and style elements in XHTML, are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively.We can avoid the expansion of these entities by Wrapping the content of the script or style element within a CDATA marked section. The string which ends the CDATA section.”]]>” is The only delimiter that is recognized in a CDATA.

XHTML

<scripttext/javascript”> <![CDATA[ document.write(“<b>Hello World!</b>”); ]]> </script>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>

DOWNLOAD SOLUTION HERE