Differences Between HTML and XHTML

Mandatory XHTML Elements

All valid XHTML documents must have:

DOCTYPE declaration
HTML element
Head element
Body element
Title must be placed inside the Head

Here is a minimum XHTML document:

<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of your page</title>
</head>

<body>
Body of your page
</body>

</html>

Tag and Attribute names must be written in lower-case.

XML is case-sensitive, All XHTML element names must be written in lowercase.

HTML:	XHTML:
`<TD BGCOLOR="#c6c6c6">`	`<td bgcolor="#c6c6c6">`

Attribute values must be quoted

XHTML requires attribute values to quote every attribute, even if it's numeric:

HTML:	XHTML:
`<table width=100>`	`<table width="100">`

Elements must be properly nested without overlapping

Most browsers don't care if your elements are overlapped. For example, if you have a bold tag at the end of a paragraph, it rarely matters whether you close the </b> first or the </p> first. With XHTML, you need to unclose the tags in a properly nested order for the document to be valid XHTML.

HTML:	XHTML:
`<p>this word is <b>bold</p></b>`	`<p>this word is <b>bold</b></p>`

Overlapping is not proper HTML, it is just widely tolerated in most all existing browsers. An XHTML document is required to be well-formed XML. If it is not, the XML parser does not have an obligation to continue processing the document. Unlike current HTML parsers, an XML parser will not try to recover and "guess" what you meant if the syntax is wrong.

All Non-empty elements must be closed

All Non-empty elements must have an end tag. The <p> tag is designed to mark the beginning and end of a paragraph. That makes it a "non-empty" tag since it contains the paragraph text and therefore required to be closed within an XHTML document. Affected Elements include:<basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>.

HTML:	XHTML:
`This is a paragraph<p> This is another paragraph<p>`	`<p>This is a paragraph</p> <p>This is another paragraph</p>`

Empty elements must be closed

Empty elements are elements without content such as a <br> because it never contains anything. Unlike a <p> tag that contains a paragraph. Empty tags include: <area>, <base>, <br>, <col>, <frame>, <hr>, <img>, <input>, <isindex>, <link>, <meta>, <option>, <param>.

All empty elements must use the proper XML syntax with a trailing forward slash ("/") before the end bracket. Note to make your XHTML compatible with today's browsers, you should add a space after the element text and the />.

HTML:	XHTML:
`<hr>`	`<hr />`
`<br>`	`<br />`
`<input ... >`	`<input ... />`
`<param ... >`	`<param ... />`
`<img src="image.gif">`	`<img src="image.gif" />`

Attribute value pairs cannot be minimized

An attribute is minimized when there is only one possible value. XML does not allow attribute minimization. Stand-alone attributes must be expanded .

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 type="radio" ... checked>`	`<input type="radio" ... checked="checked" />`
`<input type="checkbox" ... checked>`	`<input type="checkbox" ... checked="checked" />`

The id Attribute Replaces The name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. The id is used instead of the name

HTML:	XHTML:
`<img src="picture.gif" name="picture1">`	`<img src="picture.gif" id="picture1" />`

`<script>` elements

HTML:	XHTML:
`<script language="javascript">`	`<script type="text/javascript">`